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
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:
pageFigma layers support and best practicesStep 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:
The page Emails from components will also contain examples using some more advanced Figma and MJML features.
Last updated
