# 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="https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2Fnwmy3LVzOrNRBOLc86xZ%2FScreenshot_1.png?alt=media&#x26;token=41d6b995-857d-4c74-97d3-a46c36b25b2e" 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="https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2F3rGD51YewX90Jd2CMZKb%2FScreenshot_2.png?alt=media&#x26;token=41a94f50-9aa4-418a-aebb-2f2f5e2345cb" 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="https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2F6veZD6gDKthpLdb7o39F%2FScreenshot_3.png?alt=media&#x26;token=3bcf142f-2d2b-4ea9-9124-8b7b7df997a9" 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="https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FV5OQCERHzRxw0IY1WTQP%2FScreenshot_4.png?alt=media&#x26;token=7a95b785-1772-411f-af4c-36e59c78221b" alt=""></td><td></td></tr><tr><td>Social Media Icon</td><td>mj-social-element</td><td><img src="https://182431243-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4F7MC4RfLhS0IdRHE3vO%2Fuploads%2FQkvK2caBE5PWTQCL631h%2FScreenshot_5.png?alt=media&#x26;token=69765223-4ddc-419d-8fe2-f19cc89800c5" alt=""></td><td>Add another mj-social-element if you need a row with multiple icons. </td></tr></tbody></table>