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.
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!
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.
Report
Great job team, the exact tool that I was looking for. Congrats.
@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.
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?
@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/...
@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
That’s amazing, guys. Congratulations and good luck with PH launch. Like your idea and your product!
Cannoli
Voxme: AI coach, insights, guidance
Cannoli
Cannoli
Cannoli
OkFeedback
Cannoli
Cannoli
Cannoli