Image Slicing in Figma for Cannoli

If you’re trying to create an image-heavy Figma email design, we have a method that makes it easy with the help of Cannoli.app.

In this Cannoli Bite, you’ll learn how to do a technique called image slicing and use that to create a custom Figma email design in Cannoli.

Watch this short video tutorial or follow the written guide below to begin!

1. Cannoli

If you haven’t signed up with Cannoli yet, you can do that by heading over to cannoli.app. You can also use the Figma to HTML plugin for Cannoli. 

For a step-by-step guide on how to get set up with the plugin, check out this page.

2. Splicing the images

Let’s say you find yourself with overlapping images or maybe you want text in a very specific position but auto layout isn’t doing what you want it to. Here’s a solution you can try.

First, naming conventions are important in Cannoli so in order for your design to convert properly, make sure you do the following: 

• Name your row 'mj-section'
• Name your column 'mj-column'

From here, start by selecting your composition. 

This is called image slicing, and it allows you to use more complex designs in your emails.

3. Convert your email into code with Cannoli

Now your email is ready to go. 

Head over to cannoli.app and paste your Figma file into Cannoli. 

If you’re using the Cannoli plugin in Figma, just run the plugin and copy the link to your design. From there, a window should pop up. Click on Get Code and paste the link under Paste the figma link to sync a frame from this file. Then click Sync.

And you’re done!

Cannoli will automatically convert the email into code. You can still edit your email code at this point on the left side of the screen, so don’t forget to add preheader text and links to your images if you need to.

Once your email looks good, you can copy the code over to your ESP.

If you need any more help or have questions, reach out to us at hello@cannoli.app. 

Want some free Figma email templates? Check out this page for some pre-designed templates and helpful tips on how to use Figma and Cannoli together.