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. |
Last modified 1yr ago