Cannoli

Name: Cannoli
Rating: 5.0 (2 reviews)

Turn Figma designs into email HTML

5.0•2 reviews•

215 followers

Turn Figma designs into email HTML

5.0•2 reviews•

215 followers

•

•

Transform Figma designs into HTML emails effortlessly. Design in Figma, convert with Cannoli – no coding hassle. Edit emails easily using Cannoli's intuitive code editor. Automatic image optimization for sharp, smooth delivery.

Free Options

Launch tags:Email Marketing•Marketing•No-Code

Launch Team

ArticosTest your messaging on buyers in minutes, right in your agent

Promoted

Cannoli

Maker

Hey there, it's happening today! I'm super excited to see all of you jumping into the world of Cannoli! Let me share the cool story behind this amazing tool. Back when I started as an HTML email developer at Scalero, I ran into some tricky tech challenges while creating email templates from scratch. Dealing with things like complex HTML tables and those pesky inline CSS styles was quite a struggle. That's when the idea for Cannoli came to us— a tool that's all about making your life easier by magically turning your Figma designs into HTML code for email. Imagine waving goodbye to all the tech troubles and having more time for your creative flow! So, let's team up and set out on this new adventure together, powered by Cannoli. Feel free to ask any questions or share your comments, that will help us improve for you, thank you!

Report

3yr ago

Voxme: AI coach, insights, guidance

How well does Cannoli maintain the fidelity of Figma designs during the conversion process? Are complex layouts and elements accurately translated into HTML emails?

Report

3yr ago

Cannoli

Maker

@ricardo_luz Good question and candidly, it's a work in progress when design files are complex. Email clients do not handle background images / overlays very well, so you have to flatten a lot of elements to get an HTML output that will render okay across many email clients. Our translator (our parser) tries making some inferences on how elements are grouped together or if there are elements overlapping and do some of the flattening. This is an aspect of our parser that will need constant improving over time. It's of course preferred that the designer has some familiarity of limitations in email code and do some of this simplification and flattening themselves pre-Cannoli, just like you would hand off to your dev team, but over time, we of course want to be able to automate that accurately.

Report

3yr ago

Great job team, the exact tool that I was looking for. Congrats.

Report

3yr ago

Cannoli

Maker

@lucy_miller let us know what you think! Thanks for the kind words.

Report

3yr ago

Any plans for Sketch?

Report

3yr ago

Cannoli

Maker

@jsteneros perhaps in the medium future but not in the near future: we still need to work a bit on our parser that translate the Figma JSON to email code. Once we nail that, we'll look to support other file types.

Report

3yr ago

OkFeedback

Hi Brant, Congratulations on the launch of Cannoli! have you thought about offering templates or drag-and-drop functionality to make it even easier for non-designers to create professional-looking emails?

Report

3yr ago

Cannoli

Maker

@sarvpriy_arya thanks for the question! We have a community file in Figma that offers templates and other helpful tools to get started. Let us know what you think: https://www.figma.com/community/...

Report

3yr ago

Cannoli

Maker

@sarvpriy_arya to add to Will's response. We do have a bit of a drag and drop solution within the Cannoli App once you submit a file from Figma, but we really want your start path to be in Figma and use all of Figma's functionality. We have a community file with some starter templates as Will pointed out. We also have a Figma plugin that you can use to drag and drop some elements into a Figma frame to get started. Check that out: https://www.figma.com/community/...

Report

3yr ago