https://www.youtube.com/watch?v=4pFBi3Z_fY0

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!