Works with Salesforce

Figma to Salesforce, as real HTML

Design your email in Figma, turn it into responsive, email-safe HTML with MarkupMail, and paste it into Salesforce Marketing Cloud. No coding needed.

Try it free in Figma See how it works

No sign-up, no card. 5 free emails every month.

How it works

Three steps from Figma to Salesforce

Design the email the way you already do. MarkupMail writes the code.

  1. 01Select a frame

    Design the email in Figma as you normally would, then select the frame you want to export.

  2. 02Click Generate

    MarkupMail builds email-safe HTML that holds up even in Outlook, with your text still editable. Then it runs 30+ checks and flags anything to fix.

  3. 03Paste into Marketing Cloud

    Copy the readable HTML, then paste it into a new HTML email in Marketing Cloud’s Content Builder.

    Salesforce’s guide to creating emails
Salesforce details

Ready for Salesforce

Personalisation strings come through untouched, and the checks that matter run before you export.

Personalisation strings, kept as typed

Type Marketing Cloud’s personalisation strings straight into your design. MarkupMail keeps them exactly as they are, so Marketing Cloud can fill them in when it sends.

  • %%FirstName%%The subscriber’s first name. Match the name of your own field
  • %%profile_center_url%%The link to the profile centre, where people can unsubscribe
  • %%Member_Addr%%Your street address, one of the address strings every email needs
  • %%view_email_url%%A link to view the email in a browser
All of Marketing Cloud’s personalisation strings

Checked before you export

MarkupMail runs 30+ checks before you export, including these.

  • Missing unsubscribe link
  • Missing postal address
  • Too big for Gmail, which clips emails over 102KB
  • Missing alt text
  • Links going nowhere
FAQ

Using MarkupMail with Salesforce

What to know before your first send.

Where do I paste the HTML?

In Content Builder, choose Create, then Email Message, and pick HTML. Paste the HTML in, preview it and save. If the option is missing, an admin can turn on HTML Paste. Salesforce’s guide has the steps.

Which HTML file should I use?

The readable one. Marketing Cloud adds line breaks to very long lines when it sends, and the minified file is mostly long lines.

Do personalisation strings work?

Yes. Type them into your design, like %%FirstName%%, and MarkupMail keeps them exactly as typed, so Marketing Cloud fills them in when it sends. Use the exact names of your own fields.

What does every email need?

A link to unsubscribe or to the profile centre, and your postal address, using Marketing Cloud’s strings like %%profile_center_url%% and %%Member_Addr%%. Marketing Cloud checks for them before it sends. Salesforce’s guide lists them all.

Where do my images go?

Upload them to Content Builder, then swap each image path in the HTML for the image’s web address.

Can I edit the text in Marketing Cloud?

Yes, in Content Builder’s code editor. MarkupMail keeps your text as live text, not part of an image, so you can change the copy there without going back to Figma.

Your next Salesforce email, built in Figma.

Install MarkupMail in Figma, select a frame and click Generate. Your first 5 emails every month are free.

Try MarkupMail free