Figma layers support and best practices
Last updated
Last updated
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. |