Skip to main content

Email templates: Figma to HTML with inline CSS

Michal avatar
Written by Michal
Updated over 8 months ago

We Value Your Feedback!

We're really excited about this new feature and are still shaping it. Your feedback helps us understand your needs and enhance your experience. Share your thoughts/ suggestions/ compliments with us at 👉 support@animaapp.com

Here’s how you can use Anima to convert your Figma designs into responsive, client-compatible email templates. The process transforms flexible layouts into table-based layouts and applies inline CSS.

Please note that this feature is available for our Figma plugin only


Getting started with Anima

  1. Install the Anima plugin for Figma

  2. Try our Figma playground file with a sample and instructions 📒

From Figma to Inbox - Step-by-step guide

  1. In the plugin - Switch to ‘component code inspect’ / Or open in Dev mode.

  2. Select the Frame you want to export to code.

  3. Select the framework & styling ‘HTML’ + ‘Email compatible’

Anima Figma to HTML Inline for Email compatibility

Features and Constraints

This section outlines the supported features and the limitations encountered when converting flex layouts to table- layouts for emails.

  1. Add Auto layout [Mandatory]
    *Wrap auto layout isn’t supported in email tables.

  2. Image Export Guidelines [Optional]
    All assets automatically export as PNG. If JPG is needed, use Figma’s 'Export' option. Note that SVG formats are not supported in all email clients.

  3. Use web-safe fonts [Optional]
    Custom fonts are not supported across all email clients. Anima will default to web-safe fonts if needed.

Enhance your email designs with more features

Make your email more dynamic and adaptable with these supported features:

  1. Breakpoints
    Use Anima’s breakpoints to connect different views for mobile and desktop.

  2. Links 

    Use Figma’s native prototype to connect links to external web pages.

  3. GIFs
    Use Figma's native options to add dynamic content to your emails. Make sure not to export them using the usual 'Export' action to maintain the animation.

    Figma to HTML inline for emails, add breakpoints

Prioritizing Accessibility in Design

Add Alt Text and Heading Structure for Improved Accessibility

  1. Heading
    Apply Figma text styles to establish a clear heading structure using H1, H2, etc.

  2. Alt text
    Name image layers meaningfully in Figma to generate descriptive alt text for improved accessibility.

Export Code </>

Once you’re ready to bring your design to life, Anima offers two pathways:

  1. Open in Playground: Preview and edit your HTML and CSS in Anima’s Playground environment.

  2. Download ZIP File: Get the HTML and assets packaged together for integration into your email campaigns.

👉 ✉️ Demo of Email code

Did this answer your question?