# Overview {% embed url="" %} ## What is Cannoli App? [Cannoli App](https://cannoli.app) is a tool that takes Figma files and turns the artboards into email code. With Cannoli, you can use your favorite design tool (Figma!) to create beautiful and responsive emails that will work for any ESP. ### Guides: Jump right in Follow our handy guides to get started on the basics as quickly as possible: {% content-ref url="/pages/F3yNrEySCHRmkWrtimYz" %} [Getting started on Cannoli](/guides/getting-started-on-cannoli) {% endcontent-ref %} {% content-ref url="/pages/Ag9j42RwXEKS4tEyXYLK" %} [Preparing your Figma file from scratch](/guides/preparing-your-figma-file-from-scratch) {% endcontent-ref %} {% content-ref url="/pages/ZCP6gwvD44hl6h5ccezd" %} [Preparing your Figma file for an image slice email](/guides/preparing-your-figma-file-for-an-image-slice-email) {% endcontent-ref %} {% content-ref url="/pages/Uiz6NW2qY74qyTPhMXOW" %} [Creating an email system in Figma for Cannoli](/advanced/creating-an-email-system-in-figma-for-cannoli) {% endcontent-ref %} {% content-ref url="/pages/CHfmrSPfecMPUp5kZOcR" %} [Using Cannoli's email kit on Figma](/guides/using-cannolis-email-kit-on-figma) {% endcontent-ref %} {% content-ref url="/pages/eVICNnKJxB3VK6ktvqnM" %} [Using Cannoli's plugin on Figma](/guides/using-cannolis-plugin-on-figma) {% endcontent-ref %} ## Extra guides If you are a hands-on learner, see the Email Kit for Cannoli App on Figma, which has many examples of layouts that work well for Cannoli: {% embed url="" %} If you are a visual/audio learner, see our playlist on YouTube with a series of five videos on how to best use Figma and Cannoli to code your emails: * [Cannoli App tutorial on YouTube](https://www.youtube.com/playlist?list=PLRU_8I8e-GIjA5ZoCcGYdwEYoirkbgodg) # What's new Every month we share with you Cannoli's most recent feature additions and changes. Want to request a feature? Write to us at hello\@cannoli.app. ### August 2023 **Introducing Cannoli Services** * Order email code complete with QA, responsiveness optimization, dark mode optimization, and Email on Acid previews for $75 USD/email. Delivered in 2 (two) business days. Make sure to check out our [policies](https://cannoli.app/services) when creating an order to ensure we are able to deliver your order as expected. * Added checkout page for services, in which the user is able to create orders for email code. * Added landing pages for services and platform specifically, and revamped home page to include all up-to-date features and offerings. **Minor changes** * Updated the sidebar with a new layout and added description tooltips. * Visual editor is now the default editor. * Added a read-only view for public files. **Fixes** * Resolved various visual editor issues, including component filtering and undefined size units. * Addressed issues with the blocks feature, team subscriptions, and file version compatibility. * Fixed sidebar-related bugs, including incorrect information display and scrolling issues. * Resolved image loading and upload issues. * Corrected URL for team component editing. * Fixed card previews in blocks and templates dashboard. * Addressed issues with loading blocks from template creation and spinner display on templates grid. *** ### July 2023 **Templates** * Templates available for both personal and team workspaces. * Create a new template using blocks from your workspace. * Create a file directly from your template. **New dashboard interface** * Revamped the sidebar and app navigation. * Removed tabs from the dashboard. **Improved Blocks functionality** * Blocks have been upgraded to a Pro feature. * Introduced virtual mj-head components in blocks and templates previews. **Fixes** * Addressed styling issues with cards for blocks and templates. * Resolved issues with the templates feature. * Ensured proper display of success or error messages when processing files. *** ### **June 2023** **Enhanced block management** * Add, edit, duplicate, delete, and more for both personal and team blocks. * Introduced blocks pagination for personal and team blocks. * Simplified block creation with the "New Block" button. **Minor Changes** * Added sorting options in project files. * URL value is now optional. * Improved visual editor attributes for mj-text elements. **Fixes** * Resolved issues related to deleting the last file or block on a page. * Fixed date display issues in both file and project dashboards. * Addressed missing attributes in the visual editor. *** ### **May 2023** **Block editing functionality** * Make changes directly to the block's code in a dedicated editor. Note: changes should be done to code's body only, not to the CSS classes, as the block will adopt any classes from the template or file it's used in. **Free pro-trial** * If you've never used Cannoli before, you have the chance to sign up using a free trial. At this time, this is available for Pro subscriptions only. **Minor Changes** * Added file pagination for personal and project files. * Updated the free trial duration. * Mock API requests are now enabled only for the local environment. **Fixes** * Fixed a display issue in Chrome (Mac OS) when opening the visual editor. * Resolved a bug related to MJML code status retrieval. *** ### **April 2023** **New Mailchimp integration** * Send finished templates into Mailchimp directly. **Minor Changes** * Updated team name display in project information. * Adjusted the minimum size of the layer panel. **Fixes** * Improved font-family handling: replaced HTML entity with single quotes and updated inline font-family when font changes. * Enhanced the help center modal with a fully clickable checkbox to prevent the modal from showing again. * Fixed the active plan flag for "PRO" users. *** ### March 2023 **Font management** * Added a resources page for profiles, font editor panel, custom font links, fallback stacks, Google fonts integration, and a dropdown for font selection. **Minor changes** * Updated the UI for "New File" * Transitioned the help center to a modal format in the editor * Enhanced font editing: Inputs for font-weight, line-height, font family, and fallback stack. * Added the ability to search, add, and remove both Google and custom fonts. **Fixes** * Various UI fixes including space under font-family and app display issues on Firefox * Resolved payment overdue banner display issue *** ### February 2023 **Minor changes** * Enhanced block and layout editing with mutations * Introduced code validation for data integrity **Fixes** * Multiple bug fixes related to file and tag editing, and editor loading issues * Addressed validation code issues causing errors *** ### January 2023 **New 3-column layout** * Updated the editor layout to a three-column format * Introduced tree view for file content with capabilities like reordering, deleting, duplicating, exporting, and importing custom blocks **Minor changes** * Added editor configuration for line endings on different platforms * Expanded editable attributes and components, including padding, border properties, and more. **Fixes** * Addressed console errors and other minor issues in the editor * Resolved analytics-related issues *** ### December 2022 **Minor changes** * Tooltips added across the editor * Added "mailto" support in link validation * Added multiple property editing capabilities to editor for images **Fixes** * Editor rendering issues * Sidebar collapsing issues *** ### November 2022 **Visual editor** \ (Cannoli App, new feature) Add content to your email without having to go into the code. Edit links, images, social icons and text components. Get feedback on your URL, alt text and image src values.

visual editor

We will continue to improve this feature and add more editing capabilities in the next few months. **Timer component**\ (Cannoli App, beta feature)\ \ Create a custom-made timer, including your fonts, brand colors and design and add it to your code. Request this feature at for free for the duration of the beta period.

Timer component

### October 2022 **Help center**\ (Cannoli App, new feature) Access all of our resources from the new [Help Center page](https://cannoli.app/dashboard/help-center/resources). **Responsive columns**\ (Plugin, new feature)\ \ We've brought back this highly requested feature. Toggle between responsive and non-responsive columns in each section.

plugin responsive columns

**Visually hidden elements**\ (Cannoli App, Figma, new feature) Cannoli now identifies visually hidden layers on your frame and skips processing them, making your code output more accurate to the original Figma file.

visually hidden elements

**Image alt text**\ (Cannoli App, Figma, new feature) Alt text for images is generated from the layer name in Figma, and it's no longer capitalized.

alt text from Figma layers to Cannoli code

**Fixes** * Copy to clipboard feature on editor working stably. * Break lines from Figma files recognized again when processing a file.
### September 2022 **Subscriptions** The beta period is over! Continue using Cannoli by subscribing to one of our plans, [choose one](https://cannoli.app/#pricing) here. * **Team:** for teams ready to leverage the collaborative workflow. * **Pro:** for the one-person marketing team. * **Starter:** for individual email creators. **Email editor** * **Click and scroll**: clicking on an element in the preview will highlight the line of code corresponding to that element in the code editor, and the same happens when clicking on a line of code. If the line of code is not in the visible part of the screen, it will automatically position itself with the scroll action.

Click and scroll

### August 2022 **Plugin** * **New email layout builder:** drag & drop components such as images, texts or buttons inside the columns of the email. Then style the output, change colors, fonts, add images, etc. {% hint style="info" %} When you're done using the plugin, remember that you can add elements to your layout by wrapping and naming them with the mjml convention, more info [here](/fundamentals/figma-layers-support-and-best-practices). {% endhint %}

Plugin output

### July 2022 **Email editor** * **New color scheme and layout** ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2Fp3JCyZ0TMdBcxawMuGDE%2Fcolor%20scheme%20editor%20screen.png?alt=media\&token=7dae7534-e108-4d2e-bb51-185e6d4607e7) * **Sidebar:** from the sidebar, access user settings and help resources, log out or go back to the dashboard. ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FtkA42BQtg58NHIQKmVwh%2Feditor_screen_sidebar.gif?alt=media\&token=78084339-9923-43a3-b261-27712190bb75) #### Plugin * **New look & feel** ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2F7dQ3VWKyhXTngINvkFn5%2Fnew%20look%20and%20feel.png?alt=media\&token=277c7f37-d711-4ff9-8be9-669a0825260c) * **File refresh:** refresh your Cannoli files directly from the plugin after doing any changes in Figma. ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FQ7ktLE5fIYhg30ovF6cB%2Fplugin_file_refresh.gif?alt=media\&token=7c965262-fcf9-47c2-af31-af5098fa478a) * **Preheader settings:** add the preheader—the text preview for an email—directly from your Figma file through the plugin. ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FMQsyKPe3zDxq0QxhlzFt%2Fplugin_preview_text.gif?alt=media\&token=cae62cc8-8097-4877-b0ef-447b3e56eadc) * **Select default team:** select one of your Cannoli teams. If you need a new one you can create it directly in Cannoli. ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FqZ9heXQmem39uArN5zLK%2Fplugin_switch_team.gif?alt=media\&token=1be5dd54-af0a-4ef3-a2b8-376e161980ce) * **Create new project:** after selecting a team, you can create a new project and start syncing files into it. ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FQx3ChfGuNMv5CeBRviZf%2Fcreate_project.gif?alt=media\&token=eb930b91-e3ae-4af0-bbbf-9527319035c0) * **Select default project:** select a project in your Cannoli team and sync files directly to it. ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FCDw2TFRpAfAsvrJ4YxLK%2Fplugin_dropdown_project.gif?alt=media\&token=daf8ac2a-5a24-4e96-a607-7c3ff41ea4fa) **MJML Support** * **Improved border support:** add border values for each side. ### June 2022 **Email editor** * Export email code to Klaviyo\ Link your Klaviyo account and send your templates directly to the Templates screen in Klaviyo ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FRnBjSOo2RPG9PXwQ0hlK%2Fklaviyo%20integration.gif?alt=media\&token=0de16b3a-f28c-47d5-89ef-8d7694b0e7db) * Send test emails ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FDcy2J7yNETwFnIflOWEj%2Fsend%20test.gif?alt=media\&token=4da9980a-3dba-4f98-ba4c-7b96273c1334) #### Dashboard * New colors and layout * Access the team, project and files settings through the page navbar ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FoMUISRSLvp2D06qbKaHo%2Fdashboard.gif?alt=media\&token=b2311a8d-6d77-4fb5-a918-b3f79fed0845) * Move files between projects ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2Fz7eQgrc07l6W8573PDWZ%2Fmove%20project.gif?alt=media\&token=154c4f30-42c7-45e0-b509-7c3c098283f7) # Getting started on Cannoli {% embed url="" %} To get started on Cannoli... 1. Visit 2. Login with your Figma account. You must have a Figma account to use Cannoli. 3. Click "New Project from Figma File" 4. Name your project and paste the url of your Figma file. 5. Select your page and frame to start the conversion. Don't have a Cannoli-ready file? No problem, try our example here: {% hint style="info" %} That's all there is to getting started on Cannoli. The hard part is preparing your Figma file. We have three helpful guides to help you prepare your Figma files for Cannoli, this is the important step: {% endhint %} {% content-ref url="/pages/Ag9j42RwXEKS4tEyXYLK" %} [Preparing your Figma file from scratch](/guides/preparing-your-figma-file-from-scratch) {% endcontent-ref %} {% content-ref url="/pages/ZCP6gwvD44hl6h5ccezd" %} [Preparing your Figma file for an image slice email](/guides/preparing-your-figma-file-for-an-image-slice-email) {% endcontent-ref %} {% content-ref url="/pages/Uiz6NW2qY74qyTPhMXOW" %} [Creating an email system in Figma for Cannoli](/advanced/creating-an-email-system-in-figma-for-cannoli) {% endcontent-ref %} {% content-ref url="/pages/CHfmrSPfecMPUp5kZOcR" %} [Using Cannoli's email kit on Figma](/guides/using-cannolis-email-kit-on-figma) {% endcontent-ref %} {% content-ref url="/pages/eVICNnKJxB3VK6ktvqnM" %} [Using Cannoli's plugin on Figma](/guides/using-cannolis-plugin-on-figma) {% endcontent-ref %} # Preparing your Figma file from scratch {% embed url="" %} ## Intro The important thing to know about Cannoli is that it converts Figma artboards into [MJML](https://mjml.io), 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 ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FrJ8xr8pwUHfVAYcYisG8%2FLesson%201.jpg?alt=media\&token=5e7fc8cf-7d4e-44bd-a785-bb5fa474d960) 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! {% hint style="info" %} Figma guides on frames and autolayouts * [Frames in Figma](https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma) * [Create dynamic designs with auto layout](https://help.figma.com/hc/en-us/articles/360040451373) {% endhint %} ### Step two: Add your contents to mj-column frame ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FDYZHlymRjfI6Y66S60Tm%2FLesson%202.jpg?alt=media\&token=88aa5b52-84d6-40e2-9ed0-93e60277b256) Next, add your contents in your mj-column frame. Cannoli supports: * Text * Images * Buttons: * Must be named mj-button, with only text nested in the group or frame * Dividers: * Must be named mj-divider * Social icons * See the guide below how to use social icons See the guide here on what Cannoli supports and best practices: {% content-ref url="/pages/9EfTpTFbWsPF5GpdaCcg" %} [Figma layers support and best practices](/fundamentals/figma-layers-support-and-best-practices) {% endcontent-ref %} ### Step three: Stylize your email in Figma and submit to Cannoli ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FJtXhg3dUChg2ycXcOE55%2FLesson%203%20\(1\).jpg?alt=media\&token=edfde794-b883-4356-bbf3-9640332d81fd) This last step is simple: put the finishing touches on your email using Figma's great design tools. When you are ready, submit your file into Cannoli App, and Cannoli will process the design into email code. Cannoli is the perfect place to make last mile changes to your email, for instance: * Add links to your images, buttons and text as needed * Add preheader text * Any additional changes you would prefer to do in code vs design. Don't forget that Cannoli is in MJML, and you'll make your edits in MJML, but export the converted HTML to your email service provider. When you are ready, transfer your HTML code to your ESP. HTML code will work with any ESP. ## Notes Please see our **Email kit for Cannoli App -> Emails from scratch** for some sample artboards using the method described in this guide: {% embed url="" %} The page **Emails from components** will also contain examples using some more advanced Figma and MJML features. # Preparing your Figma file for an image slice email {% embed url="" %} ## Intro Image slice emails are emails that have a series of images stacked on top of each other. You likely receive many emails built in this manner in your inbox. A common method in producing these emails is designing your email in Photoshop, Figma, Sketch, or other design software, and then slicing or grouping the overall design into many images. And then finally, uploading these images into a drag-and-drop editor back into the original overall design and formation. We think Cannoli makes this workflow faster and less error prone, this is a guide on how to use the image slice method via Figma->Cannoli. ## A step by step guide 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 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 ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FrJ8xr8pwUHfVAYcYisG8%2FLesson%201.jpg?alt=media\&token=5e7fc8cf-7d4e-44bd-a785-bb5fa474d960) 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: * **Your row must be named 'mj-section'** * **Your column must be named 'mj-column'**. Your images will go in columns. ### Step two: Add your images in your column ![](https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2F4dkW9TRHDaPTtQZxKg9i%2FLesson%204.jpg?alt=media\&token=8f0365d5-af1b-4335-9ebb-bc97cdeada34) Next, add your images in your mj-column frame. You can either: * Add your images, already in image format (eg jpg and png), OR * Add groups of layers you would like to export as an image. Name your groups mj-image. ### Step three: Paste your link into Cannoli Your email is basically ready to go. Visit [cannoli.app](https://cannoli.app) and paste your Figma file into Cannoli. In Cannoli, don't forget to: * Add preheader text * Add links to your images When you are ready, grab your email HTML and paste into your ESP. ## Notes If you use the image slice email method, we think Figma->Cannoli will speed up your workflow. Please see our **Email Kit -> Email from Scratch -> Image slice email examples** for some sample artboards using the method described in this guide: {% embed url="" %} # Using Cannoli's email kit on Figma {% embed url="" %} ## Intro # 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! # Figma layers support and best practices Below is a table with the proper way to name each layer in Figma. This way Cannoli will identify the structure and layer names to convert your design to MJML code.
Layer ElementLayer Naming ConventionFigma Layer ExamplesConsiderations
Imagemj-imageVectors could be translated as mj-images as well.
Textmj-textCurrently texts are detected by Cannoli without the need to name the layers as shown here.
Buttonmj-buttonIf you designed the button with icons or gradients, we suggest using mj-image instead.
Dividermj-divider
Social Media Iconmj-social-elementAdd another mj-social-element if you need a row with multiple icons.
# About MJML Coming soon... # Supported MJML components Here you can find the MJML components supported in Cannoli. Below this table there is an example that illustrates how the MJML output looks on Cannoli
MJML tagMJML outputSupportedFigma Naming ConventionConsiderationsLocation
mj-preview<mj-preview>trueNot necessary to add this element neither rename layers with this tag in Figma.head
mj-breakpoint<mj-breakpoint width="480px">trueNot necessary to add this element neither rename layers with this tag in Figma.This tag allows you to control the breakpoint at which the layout shifts from desktop to mobile and vice versa.head
mj-attributes<mj-attributes>trueNot necessary to add this element neither rename layers with this tag in Figma.head
mj-style<mj-style>trueNot necessary to add this element neither rename layers with this tag in Figma.head
mj-body<mj-body>trueNot necessary to add this element neither rename layers with this tag in Figma.If you want to have a margin in the email with a different color than the sections, then you can use the mj-body tag in an auto-layout frame that also contains an mj-wrapper.mjml
mj-button<mj-button>truemj-buttonbody
mj-column<mj-column>truemj-columnbody
mj-divider<mj-divider>truemj-dividerbody
mj-group<mj-group>truemj-section-groupHelps to keep the columns together, so they wont stack on top of each other on mobile.body
mj-image<mj-image>truemj-imagebody
mj-section<mj-section>truemj-sectionbody
mj-social<mj-social>truemj-socialbody
mj-social-element<mj-social-element>truemj-social-elementbody
mj-spacer<mj-spacer>trueNot necessary to add this element neither rename layers with this tag in Figma.body
mj-text<mj-text>truemj-textbody
mj-wrapper<mj-wrapper>truemj-wrapperAllows to wrap multiple sections together.body
#### MJML output example in Cannoli {% code overflow="wrap" lineNumbers="true" %} ```markup Example @media only screen and (max-width: 720px) { .wrapper > table > tbody > tr > td { padding-left: 0px !important; padding-right: 0px !important; } .section > table > tbody > tr > td { padding-left: 20px !important; padding-right: 20px !important; } .column > table > tbody > tr > td { padding-left: 0px !important; padding-right: 0px !important; } .padB40 { padding-bottom: 40px !important; } .image { padding-left: 0px !important; padding-right: 0px !important; } .image > table { text-align: center !important; margin: 0 auto !important; } .image > table > tbody > tr > td > a > img { height: auto !important; } .divider { padding-left: 0px !important; padding-right: 0px !important; } .button > table { width: 100% !important; } .button > table > tbody > tr > td > a { width: 80% !important; } } Limited Editions Waiting For You
Find out what you’re missing with 20% off your first purchase.
Dig It! best sellers
award winners
new releases
Copyright 2021 Atomic Publishers. All rights reserved.
``` {% endcode %} # Creating an email system in Figma for Cannoli {% embed url="" %} Coming soon... # For marketers who want brand governance Coming soon... # For designers who love Figma Coming soon... # For developers who love MJML Coming soon # Image slicing for Cannoli in less than 2 minutes {% embed url="" %} # Syncing a Figma file using the plugin {% embed url="" %}