Cannoli
Search
⌃K

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.