BIG
Figma

What is the easiest way to export a design in Figma to Mailchimp?

BIG linden / Support Docs / What is the easiest way to export a design in Figma to Mailchimp?
Last edit: January 17, 2023
(1 week ago)

Figma

What is the easiest way to export a design in Figma to Mailchimp?

Q:

We use Mailchimp for email marketing and design the campaign emails in Figma. Currently, our workflow is slow and tedious. Is there any easy way to send our design from Figma over to Mailchimp?

Issue

The client wants to know if there is an easier way to send the design from Figma to Mailchimp for email marketing.

Possible solution

Exporting from Figma is easy, when you use the right plugins and tools.

How to Export from Figma to Mailchimp

Figma is a versatile tool. It can be used in many ways, and every Figma designer has their own process and workflow. For those who design email marketing campaigns often, it becomes easy, and a routine is established.

The most “correct” way to export a design from Figma to Mailchimp is to use the “Export” feature in Figma to export the design elements as image files, and then use those image files to create a custom template in Mailchimp.

There are, thankfully, easier ways. There are a variety of plugins and tools available that make exporting from Figma. Some of these tools are meant for publishing on the web, exporting to WordPress (Fignel, Export Kit, etc.), and awesomely several great ones for exporting into Mailchimp.

Some of these tools are new, some have been around a few years, but they’re all suggested by the design and email marketing teams, so if they’re good enough for the campaigns those ladies work on, it’ll work for you.

Figma plugins for Exporting to Mailchimp

Mailchimp is a powerful and popular email marketing platform, loved by creators for over 10 years. It allows marketers to create, send, and manage emails quickly and easily. Figma is a user interface design software used widely for UI/UX design projects.

With the use of Figma plugins for exporting from Figma into Mailchimp marketers, designers, and creatives can export their designs directly from Figma into Mailchimp in order to streamline the process of creating email campaigns within Mailchimp’s platform.

Let’s discuss some of the plugins that enable this type of integration with Mailchimp.

Emailify HTML Email Builder by Hypermatic

This Figma plugin allows users to quickly design emails with common components, customize their text, images, styles and auto layout settings with the app.

Emailify supports dark mode custom color overrides and image swaps as well as exporting animated GIFs. Users can preview their HTML emails at different device sizes with the add-on and it also provides integrations for popular email marketing platforms. It automatically generates a preview page of all the emails, and users have an option to export MJML source code if preferred. The finished product can be downloaded as a .zip file directly from Figma.

Emailify has 35k+ users – learn more about Emailify on the official Figma community page for the plugin

Here’s a video tutorial showing you step-by-step how to upload HTML emails from the Figma Emailify plugin to MailChimp and get started with the plugin:

Ampier HTML and AMP Email Generator

Design and export from Figma production-ready emails to Mailchimp or Sendgrid.

From the plugin development team: “Ampier plugin for Figma lets you create stunning AMP and HTML email designs for your email marketing campaigns” directly in Figma, then when you’re ready, just “Export production ready code” that works most “common email clients, including Gmail, Apple Mail, Outlook”, explains the developers.

The Ampier plugin for Figma allows users to create stunning AMP and HTML emails within Figma’s intuitive design environment. It provides users with a convenient workflow, clean & responsive code that works with all popular email clients, feedback forms powered by AMP technology, special HTML fallbacks for unsupported clients, predefined assets for quick start designs, beautiful asset packs and more. The plugin also allows you to export production-ready code to your ESP of choice or download the exported .zip file containing HTML, AMP and TJML parts straight from Figma.

Ampier has 2.5k+ users – learn more about Ampier on the official Figma plugin community page

Here’s a video that gives you a glipse at how to use the Ampier plugin to design an email for Mailchimp in Figma and then exporting it, with their ‘no-code approach’:

Additional reading

None at this time.

More articles about Figma

More articles related to .

Capabilities related to Figma: