How the Plugin Works

A step-by-step guide to converting your Figma email designs to production-ready HTML.

1

Design with Auto Layout

Start your email design in Figma using Auto Layout for a 100% flexible design framework to build from scratch.

Important Key Elements
  • The frames must be wrapped in Auto Layout for the compiler to work correctly
  • All elements must be assigned to Auto Layout to be the correct dimensions
  • Align with the Auto Layout design rules to ensure consistency
Auto Layout Best Practices
  • Set the top-left corner radius to all elements
  • Apply spacing between elements using gap options
  • Connect a set of items for responsive behavior
  • Ensure all text, images, and fonts have a title/auto layout folder
2

Click Generate

Select your email frame in Figma and click the Generate button in the plugin panel to convert it to HTML.

Generation Process

The plugin analyzes all the structural elements and compiles the HTML into a processed framework for wiring.

Output Generated

Once the HTML is generated, you can inspect the HTML in the generator view, download, duplicate, or deploy.

3

Export HTML & Images

Once generation is done, you can export your HTML and image files in multiple ways.

Export HTML File

Download a complete HTML file with all inline styles and embedded image references. Deploy on your own hosting or copy directly into your ESP.

Get started →
Export Image Files

Download all the image assets your design contains as an archive. Images are automatically extracted from the Figma elements beneath the result.

Get started →
Hosted Images (Pro Soon)

Images can be stored on the Bento server so your HTML references a permanent URL instead of embedding base64 data. This makes the HTML lighter and allows the images to be accessed from anywhere.

Important: You must be a registered user to use the image hosting feature. Create an account to unlock this and other Pro features.

4

Send Test Email

Test your email design directly from the plugin before deploying to your email platform.

Send Test Emails Directly From Plugin

The Bento plugin can automatically send test emails to verify that the email looks correct before sending. You can run multiple send and test cycles without ever leaving Figma.

On Desktop

Open the Bento plugin in Figma and use the Send Test Email tab to deliver to yourself or any email address.

Email Clients

Test across different email clients to ensure consistent rendering.

Note: You must be logged in to send test emails.

Quick Summary

What You Need
  • Figma design using Auto Layout
  • All elements in Auto Layout frames
  • Bento Figma plugin installed
What You Get
  • Production-ready HTML file
  • Optimized image files
  • All client-tested email format
  • Email send-and-inspect capability

Ready to Get Started?

Install the plugin and start converting your Figma designs to HTML today.

Install Plugin Back to Home