Figma email design system — what's in this library
An email design system is a structured set of reusable components, tokens, and templates that keeps your email campaigns consistent across sends, teams, and platforms. Instead of rebuilding layouts from scratch each time, your team works from a shared library of tested components that export as production-ready HTML.
Every template in this library is designed in Figma and compatible with the Marka Email Generator plugin. Export clean, email-client-safe HTML in one click — no coding required.
What's included
Reusable email components Headers, heroes, CTA blocks, product cards, footers, social icons, text sections, and dividers — each built as a Figma component with Auto Layout. Combine blocks to assemble any email layout without starting from scratch.
Figma variables for brand tokens Colors, font sizes, and spacing are set as Figma variables. Change your brand color once and every component updates instantly. Useful for agencies managing multiple clients or in-house teams managing sub-brands.
Outlook-compatible HTML export Marka exports table-based HTML with inline CSS — the only approach that renders correctly across Outlook 2007 through Microsoft 365, Gmail, Apple Mail, and all major email clients.
Mobile responsive layouts Components use Figma Auto Layout and export with CSS media queries for mobile breakpoints automatically.
Dark mode support All templates include dark mode CSS. Emails adapt to light and dark themes in Apple Mail, Gmail mobile, and Outlook's forced dark mode without manual configuration.
How to use these templates
- Duplicate the Figma file from the Figma Community
- Set your brand colors, fonts, and logo using Figma variables
- Assemble your email layout using the included components
- Open the Marka Email Generator plugin and select your email frame
- Click Export HTML and paste the code into your ESP of choice
Works with Mailchimp, Klaviyo, HubSpot, SendGrid, Brevo, and any platform that accepts custom HTML.
