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?

Figma

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.

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

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 (PNG or JPEGs), and then use those image files to create a new 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 they 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 glimpse at how to use the Ampier plugin to design an email for Mailchimp in Figma and then exporting it, with their ‘no-code approach’:

Can I use Figma for email marketing?

Of course! Figma is a wonderful tool for designing emails, planning email marketing campaigns, and generally all aspects of email marketing. Many email marketers use Figma in their workflow. The tool has become one of the most popular design tools, picked over InDesign and Illustrator by many professional marketers.

Figma allows you to easily create and manage templates for newsletters, e-commerce emails, promotional campaigns, or anything you can think of.

3 Creative Ways to Use Figma in Your Email Marketing Campaigns

  1. Design Template Library: Create a library of email templates that your organization can reuse for different campaigns and missions. Keep all of your email templates in one place for easy access.
  2. Collaborate on Creative Assets: Allow teams to collaborate on creative assets such as emails, graphics, campaign plans, calls to action and other design elements used in email marketing from within Figma’s collaborative platform. Escape the back-and-forth communication through emails or other tools like Slack or Zoom.
  3. Consistent Branding Through the Buyers Journey: Use Figma to ensure a consistent branding experience across all email campaigns, landing pages, calls to action, and other assets in your campaign. Design your emails from the same template library and have easy access to brand assets that are often used in campaigns.

3 Tools for Integrating Figma’s API with the Mailchimp API

Make sure that your email marketing efforts are even more streamlined and efficient with some of the tools for integrating Figma’s API with the Mailchimp API. Here are three great options:

  1. Make (formerly Integromat) – this integration tool makes it easy to set up automated workflows between Figma and MailChimp using their powerful visual no-code API builder.
  2. Pipedream – this service allows you to combine hundreds of apps, including both APIs (Figma & MailChimp) into robust automations without advanced technical capacity.
  3. Zapier – this cloud-based automation platform allows you to connect Figma with Mailchimp so that whenever a new project is created in Figma, it triggers an action on your connected account in Mailchimp automatically. All kinds of creative uses for this are possible.

These are some great options for leveraging Figma’s API to make your email marketing efforts even more efficient. With these tools, it will be easier than ever to keep track of email campaigns and automate workflows between Figma and the popular marketing platform MailChimp.

Additional reading

None at this time.

More articles about Figma

More articles related to .

Capabilities related to Figma:

You design it, we build it. Translating perfect designs, perfectly.

REQUEST A 1:1 CONSULTATION

Get a 30 minute 1:1 consult with a BIG consultant and get a 7 page report on making digital work in your organization with key insight into paths for success and playbooks just for your unique needs.

Please understand not all requests can be met. Please contact us with any questions.