Preparing your Figma file from scratch

Intro

The important thing to know about Cannoli is that it converts Figma artboards into MJML, which is a framework that makes coding emails a painless and fast process.

This step by step guide below is essentially guiding you on how to create a Figma file similar to how you construct an MJML email from scratch. But don't worry! You don't need to know MJML to design Figma files for Cannoli, this guide will focus on helping you create designs with no prior knowledge of MJML.

A step by step guide

Of course, the pre-step is to create a file in Figma. These steps are starting from a Figma file/canvas and focus on creating an artboard.

This guide also assumes you have a working knowledge of Figma, though if you don't, you can probably learn how to use Figma a bit from this guide.

Step one: Create three nested auto layout frames

Create three frames and nest them within each other. There are several ways to do this in Figma. Use the method that is most comfortable to you. And make your frames autolayout. The graphic above shows a correct layout of layers.

Naming conventions are important for Cannoli. You can name your artboard what you'd like, but:

• Rows must be named 'mj-section'

• Columns must be named 'mj-column'. Your contents will go in columns.

Columns always need to nest under rows—this is just how email works!

Figma guides on frames and autolayouts

• Frames in Figma

• Create dynamic designs with auto layout

Step two: Add your contents to mj-column frame

Next, add your contents in your mj-column frame. Cannoli supports:

• Text

• Images

• Buttons:

  • Must be named mj-button, with only text nested in the group or frame

• Dividers:

  • Must be named mj-divider

• Social icons

  • See the guide below how to use social icons

See the guide here on what Cannoli supports and best practices:

Figma layers support and best practices

Step three: Stylize your email in Figma and submit to Cannoli

This last step is simple: put the finishing touches on your email using Figma's great design tools.

When you are ready, submit your file into Cannoli App, and Cannoli will process the design into email code.

Cannoli is the perfect place to make last mile changes to your email, for instance:

• Add links to your images, buttons and text as needed

• Add preheader text

• Any additional changes you would prefer to do in code vs design. Don't forget that Cannoli is in MJML, and you'll make your edits in MJML, but export the converted HTML to your email service provider.

When you are ready, transfer your HTML code to your ESP. HTML code will work with any ESP.

Notes

Please see our Email kit for Cannoli App -> Emails from scratch for some sample artboards using the method described in this guide:

https://www.figma.com/community/file/1042861645873665842www.figma.com

The page Emails from components will also contain examples using some more advanced Figma and MJML features.