How to install and use the Cannoli Figma plugin
This blog describes how to use Cannoli, one of Scalero's software platforms. For a full video description, see our Cannoli Bites on YouTube.
Looking for the ultimate Figma to HTML plugin?
Cannoli.app is one of the best Figma plugins out there for converting your beautiful Figma email designs into accurate, editable code.
To learn how to install and use the plugin, watch this short tutorial or follow the written instructions below.
1. Adding the Cannoli Plugin
Start by heading over to the Cannoli plugin page on Figma and click Try it out.
2. Running the Cannoli plugin
From here, open up your Figma email template and click the Resources icon in the navigation bar.
The Cannoli plugin should show up under Recents, but if not, use the search bar.
3. Connecting Figma with the Cannoli app
If this is your first time using the plugin, you'll have to connect your Figma account to it.
After you hit Run, a small window will pop up.
Click Get Code in the navigation bar of this new window and then hit Connect.
From here, a new window in Cannoli will open asking you to connect your Figma and Cannoli accounts, so choose Connect Accounts.
Lastly, you’ll be asked to grant Cannoli access to your Figma account. Go ahead and click Allow Access.
You should then see the screen below letting you know that your Figma and Cannoli accounts have been successfully paired.
Hit Back to Cannoli Plug-in to start coding!
4. Copying the Figma file
Once that's ready, select your email design frame, add your preview text, then copy the link to your Figma file by clicking Share in the navigation bar and Copy Link in the pop-up window.
You’ll only have to do this once per Figma file.
5. Syncing the Figma file
Once you’ve copied the link, paste it under Paste the figma link to sync a frame from this file. Then click Sync.
6. Coding the email
Cannoli will work its magic and convert your Figma email template into HTML within a few moments, with the design on the right of your screen and the code on the left.
From here, you can highlight all the code and paste it into your ESP (email service provider).
If you have any questions or comments, feel free to reach out to us at email@example.com.
For access to some free Figma email templates and more tips on how to use Figma and Cannoli together, click here.
More from Scalero
Join our mailing list
Get your fix of marketing, design and automation tips, all written by industry experts.