Cannoli email builder - Figma designs into email code

About this plugin

What is Cannoli

Cannoli effortlessly turns Figma designs into HTML and MJML code, complete with CSS styles. To make email designs compatible with Cannoli, use its naming convention and structure, which the plugin handles automatically. Check the documentation for more details.

How the Plugin Works

1. Launch the plugin in the Figma file where you'll create your email design.

2. In the "Design" tab, establish the email structure by adding sections and columns as needed. Columns can be made responsive, stacking on mobile and remaining horizontal on desktop.

3. Incorporate base elements (header, paragraph, image, button) or use pre-built components from the "Library" tab, or leave sections empty for custom elements.

4. Click "Create" to generate a new frame with your email structure and basic content.

5. Add content, images, and styles to the frame, adjusting properties like paddings and spacings. Use Cannoli naming conventions and structure when adding content (refer to documentation).

6. Convert the email design into code on the "Get Code" tab, signing up for a free Cannoli account. In the plugin, input your file's URL and select the frame for conversion.

7. Utilize Cannoli's editor for final adjustments, such as editing copy, adding links, or replacing images.

8. Export your email code by copying it to the clipboard, downloading, or exporting directly to a Klaviyo template.

Things to note about MJML structure and naming conventions

• Cannoli uses MJML to efficiently convert Figma designs into HTML code.
• Emails are divided into rows called "sections."
• Each section contains one or more columns.
• You can't nest sections or columns within each other.
• Content goes inside columns.

Naming:

Figma layers must have the "mj" prefix followed by the MJML tag name. Common MJML tags supported by Cannoli include mj-button, mj-image, mj-text, and mj-divider. See the full list.

Note: Anything inside an "mj-image" layer automatically becomes an image, useful for image slicing in emails.

Need Help?

If your file didn't convert correctly, we'll send a new version within 24 business hours. Meanwhile, contact [email protected] or use the chatbot.

Explore our Email Kit for example designs compatible with Cannoli.