Skip to main content
Building from scratch in Email Love does not mean drawing ordinary Figma frames. You create an Email Love email frame, then assemble it from export-ready components in the plugin.
Want Claude or Codex to build it? Start with a working Email Love design system. You can use the Ultimate Email Design System, build a new system, or migrate your existing library. Then follow the agent workflow.

​
Before you start

You need:
  • The Email Love Figma plugin
  • A Figma file where you can edit
  • The Email Love design system you want to use
  • Your message, images, and one primary CTA
If this is your first campaign, write down the audience, goal, key facts, CTA label, and CTA destination before you touch the canvas.

​
1. Create the email frame

Open the plugin and create a new email frame. Name the frame for the campaign, such as August product announcement or Welcome 01. The email frame holds the full campaign and its settings. Do not replace it with a standard Figma frame.

​
2. Choose a simple section plan

Most first emails only need five parts:
  1. Header
  2. Hero with the main message
  3. One or two supporting content sections
  4. Primary CTA
  5. Footer with unsubscribe
Start with the smallest structure that communicates the message. You can add another section later if it has a clear job.

​
3. Add components from Assets

Keep the whole email frame selected. In Assets, open the category you need and add components in reading order. Use complete components when they fit the content. For a custom layout, use Build Your Own to add an empty one-, two-, three-, or four-column section, then place text, images, buttons, and other Email Love content inside its Columns.
Never paste ordinary Figma layers between the email frame and its Email Love components. Unknown frames can export as one flat image with everything inside them.

​
4. Replace the content

Update the component instances without detaching them:
  • Replace sample copy with your real message
  • Swap image fills while keeping the image frames
  • Update the CTA label
  • Hide optional regions through component properties when available
  • Keep body text and headings set to Hug or Auto Height
Aim for one idea per section. If two sections repeat the same point, combine them. Select the relevant text, button, image, or Wrapper, then use Properties to add links and alt text. At minimum, verify:
  • The primary CTA destination
  • Clickable images
  • Alt text for meaningful images
  • The unsubscribe link
  • Subject and preheader on the email frame
Decorative images can use empty alt text. Meaningful images should describe the information or action they provide, not start with “Image of.”

​
6. Set the responsive version

Use Mobile Styles to check:
  • Column stacking and order
  • Mobile padding
  • Text size and alignment
  • Image size
  • Content hidden on desktop or mobile
Use Appearance to check fallback fonts and dark-mode colors. Then open Preview and test at least one narrow phone width.

​
7. Run Copilot and export

Run Copilot before export. Fix structural errors, missing alt text, and invalid nesting first. Then select the outer email frame, click Export, and choose your destination. See Export Your First Email for the complete flow.

​
Your finished-email checklist

  • The email starts with the main value or message
  • Every section has a distinct purpose
  • One primary CTA is visible
  • All placeholder copy and images are replaced or clearly marked
  • Subject and preheader are set
  • The footer has an unsubscribe link
  • Mobile stacking reads in the right order
  • Fallback fonts and dark mode have been previewed
  • Copilot reports no unresolved structural errors
  • A real inbox test has been sent

​
Let Claude or Codex build the first draft

Once the design system is ready, use:
For setup, progress expectations, and troubleshooting, see Build Emails in Figma with Claude or Codex.