Preparing your Figma file for an image slice email
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.
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.
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.
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.
Your email is basically ready to go. Visit 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.
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:
