Cannoli logo

An easier way to go from design to code

We love designing in figma, and we realized a lot of other email creators do too, so we created Cannoli, a tool focused on speeding up your email workflow while using a tool you already love. By following some simple guidelines while designing, you’ll be able to get production ready responsive code in a few clicks.

How it works

With a few adjustments to your typical design workflow in figma, we are able to convert your file into production ready code, that’s responsive as well as editable.

Follow some simple rules to set up your Figma file for clean output.
Connect your Figma account, then start a project in Cannoli.
Paste in your Figma canvas url with an artboard that you want coded into email.
We’ll code the Figma design as best we can, then you can do last mile prep, like links, Preview and more.
Once you’ve set up some Cannoli files, we’re sure you’ll be able to edit and adapt these to new emails and ideas, to super charge your workflow!
Cannoli screenshot

Kickstart your Cannoli design with our plug in

If you’re having any trouble with MJML and Cannoli hierarchy, be sure to download our Figma plugi n whcih will help you build the perfect Figma files for the perfect Cannoli output.

Even more resources

Wether you want to learn more about MJML, how to set up your own Cannoli design system and more tips, we have you covered, check out our gitbook for in depth tutorials or our youtube channel.

Cannoli bites

Trusted by some of the world's fastest growing brands.


Join the newsletter for updates


Join our mailing list

Get your fix of marketing, design and automation tips tailor made for email written by industry experts.
Designrush logo 650.689.7182San Francisco, CaliforniaMexico City, Mexico