# Preparing your Figma file for an image slice email {% embed url="" %} ## Intro Image slice emails are emails that have a series of images stacked on top of each other. You likely receive many emails built in this manner in your inbox. A common method in producing these emails is designing your email in Photoshop, Figma, Sketch, or other design software, and then slicing or grouping the overall design into many images. And then finally, uploading these images into a drag-and-drop editor back into the original overall design and formation. We think Cannoli makes this workflow faster and less error prone, this is a guide on how to use the image slice method via Figma->Cannoli. ## A step by step guide The pre-step is to create a file in Figma. These steps are starting from a Figma file/canvas and focus on creating an artboard. This guide assumes you have a working knowledge of Figma, though if you don't, you can probably learn how to use Figma a bit from this guide. ### Step one: Create three nested auto layout frames ![](/files/96DHiMPGyjUTdBurkiJI) Create three frames and nest them within each other. There are several ways to do this in Figma. Use the method that is most comfortable to you. And make your frames autolayout. The graphic above shows a correct layout of layers. Naming conventions are important for Cannoli. You can name your artboard what you'd like, but: * **Your row must be named 'mj-section'** * **Your column must be named 'mj-column'**. Your images will go in columns. ### Step two: Add your images in your column ![](/files/CyJWcHuqxgNECVmqOQ9b) Next, add your images in your mj-column frame. You can either: * Add your images, already in image format (eg jpg and png), OR * Add groups of layers you would like to export as an image. Name your groups mj-image. ### Step three: Paste your link into Cannoli Your email is basically ready to go. Visit [cannoli.app](https://cannoli.app) and paste your Figma file into Cannoli. In Cannoli, don't forget to: * Add preheader text * Add links to your images When you are ready, grab your email HTML and paste into your ESP. ## Notes If you use the image slice email method, we think Figma->Cannoli will speed up your workflow. Please see our **Email Kit -> Email from Scratch -> Image slice email examples** for some sample artboards using the method described in this guide: {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.cannoli.app/guides/preparing-your-figma-file-for-an-image-slice-email.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.