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