Cannoli
  • Overview
    • What's new
  • Guides
    • Getting started on Cannoli
    • Preparing your Figma file from scratch
    • Preparing your Figma file for an image slice email
    • Using Cannoli's email kit on Figma
    • Using Cannoli's plugin on Figma
  • Fundamentals
    • Figma layers support and best practices
    • About MJML
    • Supported MJML components
  • Advanced
    • Creating an email system in Figma for Cannoli
  • Use Cases
    • For marketers who want brand governance
    • For designers who love Figma
    • For developers who love MJML
  • 📹Cannoli Bites
    • Image slicing for Cannoli in less than 2 minutes
    • Syncing a Figma file using the plugin
Powered by GitBook
On this page
  1. Fundamentals

Figma layers support and best practices

PreviousUsing Cannoli's plugin on FigmaNextAbout MJML

Last updated 2 years ago

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 Element
Layer Naming Convention
Figma Layer Examples
Considerations

Image

mj-image

Vectors could be translated as mj-images as well.

Text

mj-text

Currently texts are detected by Cannoli without the need to name the layers as shown here.

Button

mj-button

If you designed the button with icons or gradients, we suggest using mj-image instead.

Divider

mj-divider

Social Media Icon

mj-social-element

Add another mj-social-element if you need a row with multiple icons.