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.

Syncing a file into Cannoli using the plugin

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.

Click Run.

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 hello@cannoli.app.

For access to some free Figma email templates and more tips on how to use Figma and Cannoli together, click here.