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’ll 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 will be able to copy/paste the following required details from your new integration created above into your Emailify export settings:

When you’re ready, click the Upload To Marketing Cloud button to start exporting the emails you’ve selected from Figma to HTML, and have them automatically be uploaded to your Content Builder templates in Marketing Cloud.

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.

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 will allow you to specify aliases for those <a> tag links in your exported HTML to help tracking data by naming them something relevant to the design (eg. “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

Enabling the Blocks toggle will automatically include some extra .html files to your .zip file export; it will automatically split out each row from your Emailify design into their own HTML files, allowing you to extract these more easily if you’re planning to create your own re-useable modules 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> tag, so you’ll need to spend some time extracting those if you are taking this approach.

Please 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.