Cannoli
Search
K
Comment on page

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 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.