https://www.youtube.com/watch?v=sDmXKKJ3OW0

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

Screenshot 2023-12-08 at 10.29.59.png

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: