# 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](https://cannoli.app/login)

In order to use the plugin, go to [this link](https://www.figma.com/community/plugin/1053770884164943496/Cannoli---Figma-to-email-code%2C-including-HTML-and-MJML) 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](https://cannoli.app/login) (it’s free!), that way you can sync the email designs from the plugin into Cannoli.

<figure><img src="https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FEk80vCniCDO2SyMJ0Ssg%2Flog-in.png?alt=media&#x26;token=aaad19c4-04db-4a41-aa1e-752bce29c9f3" alt=""><figcaption></figcaption></figure>

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)*.&#x20;
2. Add the sections you need and define which ones will occupy 1 or more columns.&#x20;
3. Drag and drop the elements you need for each section, you can drag:&#x20;
   * header
   * paragraph&#x20;
   * button
   * image
4. When you finish detailing each section with its elements, click on <mark style="color:purple;">`create`</mark>.&#x20;
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 <mark style="color:purple;">F key</mark> or by going directly to the top left menu and select the frame tool.&#x20;
2. Then choose and drag any component from the plugin and drop it into the frame.&#x20;
3. Repeat the operation as many times you need.&#x20;
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.

<figure><img src="https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FfPBs5p6rYSoKYO3ciop6%2Flibrary.png?alt=media&#x26;token=08751814-a58f-4a6f-b567-5d3d01828caf" alt=""><figcaption></figcaption></figure>

### Get Code

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

1. Go to the <mark style="color:purple;">Get Code</mark> tab.&#x20;
2. Add a <mark style="color:purple;">Preview text</mark>, this is the text that appears in your inbox before you open the email, so make sure it’s catchy.&#x20;
3. Choose the frame you want to sync (open the share menu and copy the Figma file link, then paste it to the corresponding <mark style="color:purple;">text field</mark>). You only need to do this once for each Figma file that you ingest to Cannoli.&#x20;
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.&#x20;
5. Hit the <mark style="color:purple;">sync</mark> button.&#x20;
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!