# 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.
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!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.cannoli.app/guides/using-cannolis-plugin-on-figma.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.