Skip to main content
There are four ways to create a design system. Pick the one that matches what you have. The Bring in your brand step with its four choices

​
Where to start

  • A new workspace: the Builder opens on setup when you sign up. You can also use Get set up on Overview.
  • Another design system: go to Design systems and click New design system.
Your files are never changed. We only read them.

​
From your Figma file

1

Paste the link

Choose Figma file, paste the link under Figma file link, and click Read my Figma file.If the file is private, the Builder asks for a Figma access token. It’s used for this setup and never saved.
2

Guided setup: let it build

For your first design system, the Builder reads every page of the file and builds automatically. Click Explore the Builder to carry on while it works. The progress shows on Overview and in the sidebar, and you get a notification when it’s ready.A design system building from a Figma fileA build makes up to 20 components and 5 templates. If the file has more, open the design system later and click Build what’s left.
3

Expert setup: review the audit first

When you click New design system to add another design system, the Builder shows its audit before it builds. You decide:
  • Treat the file as: The spec, Partly, or A reference. Choose The spec when the file’s sizes and spacing should be kept exactly.
  • Email width.
  • Which Modules to build. Untick any you don’t want.
Then enter a Design system name and click Build the design system, or Decide later. Nothing is built until you click Build the design system.
Figma limits how often apps can read files on its free plans. If Figma asks the Builder to wait, the build pauses and carries on by itself, or you can carry on straight away with your own Figma access. See When Figma asks the Builder to wait.
On the Free plan, a Figma build uses the plan’s one design system import with AI.

​
From a brand on Email Love

Email Love’s library holds real emails that brands have sent. If your brand is there, the Builder can rebuild your design system from its emails.
  1. Choose A brand on Email Love.
  2. Search for your brand under Search brands on emaillove.com and click it. The build starts straight away.
  3. The Builder picks up to five recent emails of different kinds. While it’s still reading, you can Swap an email for another one.
  4. It finds the sections the emails share, your colours, fonts and logo, and rebuilds them as your components and templates. Each email becomes a template.
Components that didn’t match their email well are marked Needs review. Open them and check them before your team uses them.
Clicking a brand starts the build at once. On the Free plan, it uses the plan’s one design system import with AI.

​
From emails you’ve sent

  1. Choose An email you’ve sent.
  2. Enter a Design system name.
  3. Under Email 1, click Upload HTML or paste the HTML into Paste the email’s HTML.
  4. To add more, click Add another email. You can add up to five. Each file must be .html or .htm and under 512 KB.
  5. Click Rebuild my email. With more than one, the button says how many, for example Rebuild my 3 emails.
Merge tags are kept as written. Template logic, such as conditions and loops, is removed, and the content of every branch is kept. On the Free plan, this uses the plan’s one design system import with AI.

​
From Email Love’s starter

Email Love’s starter is the Ultimate Email Design System: every component and template in Email Love’s library, free in every account. It uses no AI.
  1. Choose Email Love’s starter and click Use the starter styles.
  2. On Check it, click each row to make it yours: Logo, Colours, Fonts, Buttons and Layout. The preview on the left updates as you go. See Check it.
  3. Enter a Design system name.
  4. Click Looks right, build my starter emails.
  5. On Your templates, click Start an email on a template to make your first email, or Review components to look through what you have.
On the Free plan, starter components and templates don’t count towards the 20 components and 5 templates.

​
From an example

The Design systems page has Example design systems below your own. They’re built with the Email Love Figma plugin from Email Love’s Figma Community files.
  1. Open an example to look through it.
  2. Click Use this example to copy it into your workspace as-is.
On the Free plan, an example is cut down to fit the 20 components and 5 templates.

​
From your Figma plugin libraries

If you’ve synced a design system from the Email Love Figma plugin, setup shows Already use the Email Love Figma plugin? Convert one of your plugin libraries instead. Pick the library and click Convert. See Use the Figma plugin with the Builder.

​
After it’s built