Uploading your emails to Salesforce Marketing Cloud

Emailify includes a built-in integration with Salesforce, which lets you upload HTML emails directly from the Figma plugin to your Salesforce emails or templates.

Video Tutorial: Uploading your emails to Salesforce Marketing Cloud

This video walks through how to upload HTML emails from the Figma Emailify plugin to Salesforce Marketing Cloud.

If you need AMPscript links (for example, %%=v(@url)=%%) in your text paragraphs, Figma's native link field will block them as invalid URLs. To get around this, you can use Emailify's special AMPscript link format instead, https://ampscript.invalid/?%%=v(@url)=%%, and Emailify will output the raw AMPscript tag in your exported HTML.

In the Emailify export panel, select the Marketing Cloud (API) option from the dropdown list, then follow the steps below to get your authentication credentials:

  1. Login to your Salesforce Marketing Cloud account.
  2. Go to Marketing Cloud -> Setup -> Platform Tools ("Apps") -> Installed Packages.
  3. Click New.
  4. Give the package a name and description.
  5. Select to create the package with enhanced functionality.
  6. Save the package.
  7. Under Components, click Add Component.
  8. Select API Integration (after you add an API integration component, it can’t be removed).
  9. Select the Server-to-server integration type.
  10. Set the properties for the component, you need to allow Read and Write persmissions for Emails (under Channels) and for Documents and Images and Saved Content (under Assets).
  11. Click Save to save the component.

After that's created, you can copy/paste the following required details from your new integration created above into your Emailify export settings:

When you're ready, choose Template or HTML Email from the Upload As dropdown, then click the Upload To Marketing Cloud button to export the selected Figma emails to Marketing Cloud. The default Template option keeps the previous template-based email behavior. Choose HTML Email if you want the uploaded asset to open as an editable HTML email in Content Builder.

If you'd prefer Emailify to place the uploaded Salesforce email or template into a specific Content Builder folder instead of the default root location, connect your Salesforce account and choose a Template Folder in the Emailify export panel before uploading. Leaving it set to Content Builder (Default) keeps the previous behavior.

Uploading images into Salesforce Content Builder ​

If you also want Salesforce Marketing Cloud to host the images used in your email, you can now use the Salesforce Content Builder option from the CDN dropdown in Emailify.

  1. In the Emailify export panel, select either Marketing Cloud (API) or Marketing Cloud (oAuth) and connect your Salesforce Marketing Cloud account first.
  2. Open the CDN dropdown and choose Salesforce Content Builder.
  3. Choose the Content Builder folder you want Emailify to upload the images into.
  4. Export your email as normal.

Emailify will automatically upload the images for the email into the selected Salesforce Content Builder folder, then replace the image URLs in the exported HTML with the published Salesforce asset URLs before uploading the email or template.

The Template Folder and image Content Builder folder can be different, which is useful if your team keeps HTML emails, templates, and image assets in separate folders.

If you export the same email again into the same Content Builder folder, Emailify will reuse matching existing image assets when possible instead of failing if Salesforce reports that the image name is already taken.

Additional options for Salesforce Marketing Cloud ​

There are a few other options you can optionally enable for your Salesforce Marketing Cloud exports:

Add Content Slot ​

Enabling the Slot toggle will automatically add a <div data-type="slot" data-key="uniqueKeyHere" data-label="Drop Blocks or Content Here"></div> tag into your exported HTML, which will allow you to drag and drop other content into your email from the Marketing Cloud editor. This option is available when uploading as a Template; HTML Email uploads omit the slot container.

Add Alias Tags ​

Enabling the Aliases toggle will automatically add an alias="Your Figma layer name" attribute to any of your button, image, social icon or navbar links in your Figma design. It will automatically populate this with whatever each Figma layer name is in your layers panel.

This lets you specify aliases for those <a> tag links in your exported HTML to help tracking data by naming them something relevant to the design (for example, "Hero CTA Button").

Add Conversion Tags ​

Enabling the Conversions toggle will automatically add a conversion="true" attribute onto any <a> link tags your exported HTML.

Add Impression Tags ​

Enabling the Impressions toggle will automatically wrap any Row, Wrapper or Hero layers with an opening %%=BeginImpressionRegion("your_figma_layer_name")=%% and closing %%=EndImpressionRegion()=%% Salesforce Marketing Cloud Impression tags in your exported HTML.

HTML Block Files ​

Enable Blocks to include additional .html files in the ZIP. Emailify exports each row as a separate HTML file so you can use it as a reusable module in Salesforce Marketing Cloud.

You'll also need to be mindful that the HTML code for each block will still require the CSS/style tags and other elements from the <head></head> tag, so you need to spend some time extracting those if you are taking this approach.

Note, this toggle will only be available when the Marketing Cloud (Zip) platform option is selected in the Emailify export settings panel, and won't be visible if the API option is selected.