Using Cannoli's plugin on Figma

The plugin will help you to create ready to use emails for Cannoli, so you don’t have to name any layers or manually create a structure for your email and quickly sync your frames to Cannoli.app

In order to use the plugin, go to this link to download it.

Once installed, open the plugin in a new Figma file, you will see at the top right a button where you can log-in with your Cannoli account. If you don't have one yet, sign-up here (it’s free!), that way you can sync the email designs from the plugin into Cannoli.

Within the plugin there are two ways to create emails: the first is Design mode, you can create layouts with sections in which you can drag basic elements of an email; second, the Library mode that allows you to drag custom components into a frame to create an email, you can also edit these and use them as a quick starting point.

Design

Steps:

1. Name the layout (that name will be reflected in the Cannoli.app, you can change it later if you wish).

2. Add the sections you need and define which ones will occupy 1 or more columns.

3. Drag and drop the elements you need for each section, you can drag:

   • header

   • paragraph

   • button

   • image

4. When you finish detailing each section with its elements, click on create.

5. A layout will be generated with these sections. You can replace with text and image styles. You can edit the spacing as you see fit.

Library

Steps:

1. Once the plugin is open, create a frame by pressing F key or by going directly to the top left menu and select the frame tool.

2. Then choose and drag any component from the plugin and drop it into the frame.

3. Repeat the operation as many times you need.

4. When you're done, reorder the components wherever you want. You can select one of them by using the arrows on your keyboard to arrange it.

Get Code

It's time for Cannoli to turn your email into code!

1. Go to the Get Code tab.

2. Add a Preview text, this is the text that appears in your inbox before you open the email, so make sure it’s catchy.

3. Choose the frame you want to sync (open the share menu and copy the Figma file link, then paste it to the corresponding text field). You only need to do this once for each Figma file that you ingest to Cannoli.

4. If you have already created your Cannoli account, you will have the option to choose which team or project to sync your design to in the dropdown.

5. Hit the sync button.

6. You will be redirected to your email on Cannoli.

If you have any issues be sure to share any of them, we’ll help you out!