Cannoli
  • Overview
    • What's new
  • Guides
    • Getting started on Cannoli
    • Preparing your Figma file from scratch
    • Preparing your Figma file for an image slice email
    • Using Cannoli's email kit on Figma
    • Using Cannoli's plugin on Figma
  • Fundamentals
    • Figma layers support and best practices
    • About MJML
    • Supported MJML components
  • Advanced
    • Creating an email system in Figma for Cannoli
  • Use Cases
    • For marketers who want brand governance
    • For designers who love Figma
    • For developers who love MJML
  • 📹Cannoli Bites
    • Image slicing for Cannoli in less than 2 minutes
    • Syncing a Figma file using the plugin
Powered by GitBook
On this page
  • Intro
  • A step by step guide
  • Step one: Create three nested auto layout frames
  • Step two: Add your images in your column
  • Step three: Paste your link into Cannoli
  • Notes
  1. Guides

Preparing your Figma file for an image slice email

PreviousPreparing your Figma file from scratchNextUsing Cannoli's email kit on Figma

Last updated 3 years ago

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

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

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

  • 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:

Your email is basically ready to go. Visit and paste your Figma file into Cannoli. In Cannoli, don't forget to:

cannoli.app
Email kit for Cannoli AppFigma
Logo