> For the complete documentation index, see [llms.txt](https://docs.cannoli.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cannoli.app/fundamentals/figma-layers-support-and-best-practices.md).

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

<table><thead><tr><th width="122">Layer Element</th><th width="141">Layer Naming Convention</th><th width="265">Figma Layer Examples</th><th>Considerations</th></tr></thead><tbody><tr><td>Image</td><td>mj-image</td><td><img src="/files/PJHl11s7Ufosoz61TFmg" alt="" data-size="original"></td><td>Vectors could be translated as mj-images as well.</td></tr><tr><td>Text</td><td>mj-text</td><td><img src="/files/L1ZuixSCarLbWPfywXif" alt="" data-size="original"></td><td>Currently texts are detected by Cannoli without the need to name the layers as shown here.</td></tr><tr><td>Button</td><td>mj-button</td><td><img src="/files/ndetLodE1xFql7oWJQFH" alt=""></td><td>If you designed the button with icons or gradients, we suggest using mj-image instead.</td></tr><tr><td>Divider</td><td>mj-divider</td><td><img src="/files/T1cBReaZs6jHMLULnpgx" alt=""></td><td></td></tr><tr><td>Social Media Icon</td><td>mj-social-element</td><td><img src="/files/JkcN2x3LcNyHRup7lB4K" alt=""></td><td>Add another mj-social-element if you need a row with multiple icons. </td></tr></tbody></table>