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.
Hi all 👋 My name is Brant, and I’m the Co-founder of Scalero. We've created Cannoli.
We started Scalero in 2019 with the mission to help make email marketing easier somehow. There are a lot of things happening in email marketing: copywriting, design, development, data, and more.
One thing we've noticed the past four years is that no matter the email building tools on the market, many designers are using Figma to design emails regardless. And we've learned to love Figma, too.
So we've built Cannoli, which takes Figma frames and translates them to email code automatically. With Cannoli, you submit your Figma url, frame you want to be coded, and the Cannoli software does its best to translate that to email HTML.
Cannoli is a web application where you can do last mile edits (add links, alt text, change text, etc), and we have a Figma plugin helper as well.
We know our biggest challenge is improving how well Cannoli translates code. Outside of that, would love feedback on how we can help companies who use Figma get to finalized emails faster. Thanks all!
Wow, Cannoli seems like a game-changer in creating outstanding email templates! The fact that it eliminates the need for coding is a huge relief! I'm curious: How does Cannoli handle responsive design for email templates? Are there any built-in features or guidelines to ensure the emails look great on different devices and screen sizes?
Also, I'd like to know, do you have plans to make integrations with other email-sending platforms in addition to Mailchimp?
Overall, I'm so excited about this product. Kudos to the team for building such a promising tool!
@valeriia_dziubenko Cannoli uses MJML framework, so we assume the design in Figma is for desktop, translate that to MJML code, then MJML makes the HTML responsive for good rendering across mobile and desktop. I would say MJML behaves both a little fluid, a little adaptive. https://mjml.io/
Integrations... yes we have plans to expand. What ESP are you interested in?
@valeriia_dziubenko Hi Valeriia! Great question :)
Yes, Cannoli generates responsive code. It uses MJML, a language specifically created to code emails, and follows its guidelines for responsive code. With MJML you can specify breakpoints and choose if your columns should stack or not. Responsive HTML is also automatically generated, so no need to worry about that!
And yes, besides Mailchimp we also have an integration with Klaviyo. We hope to keep integrating more ESPs as they are needed. Which ESP would you like to see in Cannoli?
We're really excited too that you're trying Cannoli, please let us know if you have questions or feedback!
@cebulla Thanks a lot for your clarifications! Sounds reasonable.
Regarding the integrations, it would be great if you considered Selzy and UniOne as options. Being “dark horses” with a startup spirit yet these tool provide rather attractive conditions for their users, and rewards for partners are also applicable.
That’s just as a possibility. However, I believe that your users will benefit from having as many ready-to-use integrations as possible, but at the same time your unique functionality will make them fall in love with your tool even without them.
@daniela_acosta1 Thank you for your answer! I responded regarding the possible integrations to your colleague below. I hope your product gets the positive recognition it deserves!
How well does Cannoli maintain the fidelity of Figma designs during the conversion process? Are complex layouts and elements accurately translated into HTML emails?
@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.
Wow. Just about time, I've been using beehiiv for a long time and it's great but I always wanted to fully create the design for the entire email. Smashed it!
Cannoli
SMTP Debug Tool
Cannoli
Cannoli
SMTP Debug Tool
SMTP Debug Tool
Voxme: AI coach, insights, guidance
Cannoli
Anecdote
Cannoli
FAM - Social Finance
Cannoli