This guide walks you through building a modular email design system in Figma from scratch. By the end, you will have a reusable component library that any team member can use to assemble on-brand email campaigns in minutes rather than hours. Expect to spend around two to three hours setting it up the first time.

What You'll Build

  • A structured Figma file with a dedicated email design system page
  • A token-based foundation covering spacing, colour, and typography
  • A library of modular email blocks: header, hero, body, CTA, and footer
  • Responsive column layout components using Auto Layout
  • A master email template that assembles from those blocks

Prerequisites

  • Figma Professional or Organisation plan (Variables require it)
  • Basic familiarity with Figma Auto Layout and Components
  • Your brand colours, fonts, and logo assets ready to import
  • An email service provider such as Klaviyo, Loops, or Mailchimp (for reference, not required inside Figma)

Step 1: Set Up Your File Architecture

A clean file structure prevents the system from becoming a dumping ground six months from now.

Create a new Figma file called Email Design System. Inside it, add four pages in this order:

  1. Cover: a thumbnail so the file is identifiable in your team library
  2. Tokens: all design tokens defined as Figma Variables
  3. Components: every individual email block lives here
  4. Templates: assembled email layouts ready to hand off

Name each page exactly as above. Consistent naming matters when your team searches across published libraries.

Why separate Components from Templates?

Components are the building blocks. Templates are the finished emails. Mixing them on one page leads to accidental edits to master components when someone is working on a live campaign layout.

Step 2: Define Your Design Tokens as Figma Variables

Tokens are the single source of truth for colour, spacing, and type. They save you from hunting down hex codes across hundreds of frames.

Navigate to the Tokens page. Open the Variables panel via the local variables icon in the toolbar.

Create three collections:

Colour tokens

Add a collection called Color. Inside it, create variables for every brand colour your emails use. A minimal set looks like this:

brand/primary     → #0047FF
brand/secondary   → #FF6B35
neutral/white     → #FFFFFF
neutral/surface   → #F5F5F5
neutral/text      → #1A1A1A
neutral/subtle    → #6B6B6B
feedback/success  → #22C55E
feedback/error    → #EF4444

Use a two-level naming convention: category, then role. This maps cleanly to CSS custom properties later if your developer is building the templates in HTML.

Spacing tokens

Add a collection called Spacing. Email clients are inconsistent with padding, so explicit tokens matter more here than on the web.

space/4   → 4
space/8   → 8
space/16  → 16
space/24  → 24
space/32  → 32
space/48  → 48
space/64  → 64

Typography tokens

Add a collection called Typography. Store font sizes and line heights, not full text styles. You will apply those in the next step.

font-size/heading-1  → 32
font-size/heading-2  → 24
font-size/body       → 16
font-size/small      → 14
line-height/tight    → 1.2
line-height/normal   → 1.5

Common pitfall: Do not create tokens for one-off values. If a value only appears once in the whole system, hard-code it and move on. Tokens are for values that repeat.

Step 3: Build Your Text Styles

Navigate back to the Components page. Open the text styles panel.

Create one text style per role. Apply your typography tokens to each one. A working set for email:

  • Heading/H1: 32px, your brand font, line height 1.2
  • Heading/H2: 24px, your brand font, line height 1.2
  • Body/Default: 16px, system or web-safe font, line height 1.5
  • Body/Small: 14px, system or web-safe font, line height 1.5
  • Label/Button: 16px, bold, line height 1

Use a web-safe font for body copy. Georgia, Arial, and Verdana render reliably across Gmail, Outlook 365, and Apple Mail as of 2026. Reserve your brand font for headings only, and add a fallback stack.

Step 4: Create the Core Email Block Components

Each block is a self-contained Figma component built with Auto Layout. Set every block to a fixed width of 600px, the standard safe width for desktop email clients.

Block 1: Header

The header holds your logo and optional navigation links.

  1. Create a frame: 600px wide, Auto Layout vertical, padding 24px all sides
  2. Add an image placeholder for the logo (use a rectangle with a constraint)
  3. Optionally add a horizontal stack of text links for navigation
  4. Wrap the frame as a component: right-click, Create component
  5. Name it Email/Block/Header

Block 2: Hero

The hero is a full-width image with an overlay headline and optional sub-copy.

  1. Create a frame: 600 x 320px, Auto Layout vertical
  2. Set fill to a placeholder image using the token neutral/surface
  3. Add a text layer for the headline using the Heading/H1 style
  4. Add a sub-copy text layer using Body/Default
  5. Wrap as component: Email/Block/Hero

Block 3: Body Content

A flexible block for text-heavy sections.

  1. Create a frame: 600px wide, Auto Layout vertical, padding 32px horizontal and 24px vertical
  2. Add a headline layer, a body copy layer, and a divider line
  3. Wrap as component: Email/Block/Body

Block 4: CTA Button

The button is a nested component used inside other blocks.

  1. Create a frame: Auto Layout horizontal, padding 16px vertical and 32px horizontal, corner radius 4px
  2. Fill with brand/primary
  3. Add a text layer using the Label/Button style, fill neutral/white
  4. Wrap as component: Email/Block/CTA

Block 5: Two-Column Layout

This block handles side-by-side content such as product cards or feature lists.

  1. Create a frame: 600px wide, Auto Layout horizontal, gap 16px, padding 24px
  2. Add two child frames, each 268px wide, with Auto Layout vertical inside
  3. Place image placeholders, headline, and body text in each child frame
  4. Wrap as component: Email/Block/TwoColumn
  1. Create a frame: 600px wide, Auto Layout vertical, padding 24px, fill neutral/surface
  2. Add social icon placeholders, an unsubscribe text link, and a legal address text layer
  3. Wrap as component: Email/Block/Footer

Pro tip: Add a State variant to your CTA block with values Default and Hover. It gives developers a clear reference without needing a separate spec document.

Step 5: Build the Master Template

Navigate to the Templates page.

Create a new frame called Template/Promotional. Set it to 600px wide with Auto Layout vertical and gap 0.

Drag in instances of your blocks in this order:

  1. Email/Block/Header
  2. Email/Block/Hero
  3. Email/Block/Body
  4. Email/Block/TwoColumn
  5. Email/Block/CTA
  6. Email/Block/Footer

Because these are component instances, editing the master component updates every template automatically. That is the core value of a modular system.

Duplicate Template/Promotional and rearrange the blocks to create a Template/Newsletter and a Template/Transactional variant.

Step 6: Publish the Library and Document Usage

In Figma, go to Assets > Libraries and publish your file as a team library. Every designer in your workspace can now access the components from any file.

What documentation should you include?

Add a notes frame next to each component on the Components page. Include:

  • The block's intended use case (one sentence)
  • Any props or variants available
  • The maximum and minimum content length that fits the layout

Lightweight documentation prevents misuse more reliably than Slack messages asking people to read the docs.

If your team also manages social media campaigns alongside email, a consistent content planning workflow matters just as much as consistent design. The free Lenka Studio social media toolkit includes a content calendar template that pairs well with a modular email system.

Step 7: Test the System With a Real Campaign

The system is only proven when it handles a real brief.

  1. Ask a team member who was not involved in building it to assemble a new promotional email using only the library components
  2. Time how long it takes them to produce a complete 600px layout
  3. Note every point where they were confused or had to improvise
  4. Fix those gaps in the component documentation or component structure

A well-built system should let a designer assemble a standard campaign layout in under 15 minutes. If it takes longer, the blocks are either too granular or too rigid.

Teams at Lenka Studio have found that this kind of structured component workflow reduces design-to-handoff time for email by around 60 percent compared to working from a blank canvas each time.

Frequently Asked Questions

Does this work for responsive mobile email layouts?

Figma itself does not render responsive breakpoints the way a browser does. Design your blocks at 600px for desktop and create a separate 375px mobile variant of each block. Most email clients handle single-column stacking automatically when the viewport is narrow, so the mobile variants are mainly used as developer reference frames.

Can I use custom fonts in my email blocks?

You can use custom fonts in Figma for visual accuracy, but email client support for web fonts is inconsistent as of 2026. Apple Mail and some mobile clients support them, but Outlook on Windows does not. Always specify a web-safe fallback font in your developer handoff notes alongside any custom font you design with.

How is this different from just using an email template in Mailchimp or Klaviyo?

Platform-native template editors lock your design to their drag-and-drop constraints. A Figma-based system gives you full design control, shared across your whole team, before anything goes into the sending platform. You design once in Figma and replicate the structure in your email service provider using the Figma file as the spec.

What if a team member breaks a master component by accident?

Figma's version history lets you restore any previous state. More importantly, publish the library and set edit permissions so that only the design system owner can modify master components. Other team members work with instances, not the originals.

How often should we update the email design system?

Review the system whenever your brand refreshes or when your email performance data suggests a layout problem. Ad-hoc component additions are fine, but run a quarterly audit to remove blocks that are no longer used. Unused components add noise and slow down the library for everyone.

Next Steps

Once your system is running, the natural next step is connecting it to a coded HTML email template so developers can build campaigns directly from the Figma spec. From there, you can introduce automated screenshot testing using tools like Email on Acid or Litmus to catch rendering issues across Gmail, Outlook, and Apple Mail before campaigns go out.

If you want help building a design system that extends across email, web, and product interfaces, the team at Lenka Studio works with SMBs in Australia, Singapore, Canada, and the US to build scalable design foundations. Get in touch to talk through what your team needs.