Note: You need access to a Knak account to use the plugin. You must also have the Sync Assets Using Figma Plugin permission enabled in Knak. If you belong to multiple Knak instances, make sure you are signed in to the correct instance before publishing your email.
Demo Video
Before You Begin
Before installing the plugin, make sure you have:
A Figma account
Access to a Knak account
Permission to Sync Assets Using Figma Plugin
Access to the correct Knak instance if you use multiple accounts
Install the Knak Figma Plugin
Step 1. Sign In to Figma
Open the Figma desktop application or sign in through your web browser.
Step 2. Find the Plugin
Open the Knak Figma Plugin page in the Figma Community: https://www.figma.com/community/plugin/1469783369876460053
Alternatively:
Open Explore Community.
Select See Plugins.
Search for Knak Figma Plugin.
Open the plugin listing.
Step 3. Install the Plugin
Click Install or Open in Figma.
After installation:
The plugin becomes available in all Figma files.
You can open one of your recent files.
You can also use the provided Playground File to explore the plugin before building your own emails.
Step 4. Open the Plugin
Open the plugin using either method.
Option 1
Go to: Menu → Plugins → Knak Figma Plugin
Option 2
Click the Actions icon in the bottom toolbar.
Select Knak Figma Plugin.
Step 5. Wait for the Plugin to Load
Allow a few moments for the plugin interface to load.
When loading is complete, the Knak plugin opens inside Figma.
Authenticate Your Knak Account
Step 1. Sign In to Knak
The first time you launch the plugin, you must authenticate your Knak account.
If you use Single Sign-On (SSO)
Sign in to Knak before launching the plugin.
The plugin automatically detects your active session.
If you use email and password
Click Sign In inside the plugin.
Enter your Knak credentials.
Step 2. Authorize the Plugin
Click Allow to grant access.
When authorization finishes:
Click Return to Figma.
Continue designing your email.
Publish Your Email to Knak
Step 1. Publish Your Design
When your design is ready, click Publish in the Knak Figma Plugin.
This opens the publishing workflow for your current email.
Step 2. Select a Brand
Choose the destination brand in Knak.
Enter a descriptive name for your email.
Step 3. Publish to Knak
Click Publish to Knak.
When publishing succeeds, a confirmation message appears in Figma along with your Knak Asset ID.
Having trouble publishing?
If your email doesn't sync because of Figma layer structure issues, use Autofix to automatically detect and repair common problems before publishing again.
Learn more in Fix Figma Layer Issues with Autofix.
Find Your Published Email
After publishing:
Open Knak.
Search for the asset name you entered during publishing.
You can also:
Open the destination brand.
Navigate to the Figma folder.
Each publish creates a campaign folder using the current date.
Additional emails published on the same day appear in the same folder.
Publishing on a new day automatically creates a new campaign folder.
Locate your email asset inside the campaign folder, then open it to begin making additional changes in Knak.
For guidance on how to move assets between different brands, check out this help document: https://help.knak.io/en/articles/6446407-moving-assets-between-brands.
Finish Your Email in Knak
After your email is available in Knak, you can enhance it before sending.
Common tasks include:
Add merge tags
Add dynamic content
Add translations
Preview your email
Test rendering across email clients
After completing your edits:
Publish your email.
Sync it to your Marketing Automation Platform (MAP).
Perform one final round of testing before sending.
Image Library Behavior
Images published from Figma are automatically uploaded to the Knak Image Library.
If your organization uses a Digital Asset Management (DAM) system, replace the synced images with assets from your DAM after publishing.
Best Practices
Ignoring these best practices may cause the sync to fail.
Do not ignore the auto-layout in Figma unless specified otherwise by the Knak plugin guidelines.
Fonts - ensure that the font used in your asset is available in Knak.
Groups & frames in Figma containing padding - We encourage adding padding to columns and elements directly rather than grouping and adding padding on the group in Figma.
Frames - You don’t need to create a frame before starting. The plugin automatically creates the frame for you.
Use spacers and padding to adjust the section or column height.
Always build your emails using the Knak plugin components rather than arbitrary frames or auto layout to ensure compatibility and prevent syncing issues.
Avoid inconsistencies in column structures by adhering to the plugin’s guidelines.
Limitations
Please keep in mind that this is an active list. Items in this list may change from time to time as we continue to develop this feature. And check out this help doc that highlights features that don't translate from Figma to emails.
Design Limitations
Conversion of Manually Designed Figma Files: The plug in cannot automatically convert Figma email designs that were created without using the plugin's specific tools into HTML. To export a design to HTML, users must utilize the plug in’s components and design tools within Figma.
Support for Advanced Email Client Features: The plug in does not provide special workarounds for certain HTML/CSS properties that lack support across various email clients. For instance, it doesn't offer solutions for overriding dark mode styles in Gmail or Outlook.
Syncing multiple emails at once: The plug in does not support syncing multiple emails built with the plug in at once. You are also not able to build multiple emails in the same Figma file.
Overwrite existing emails: Upon publishing your design to Knak, the plug in only creates net new assets in Knak. It is not able to overwrite or update existing emails in Knak - even if the asset was built with the plug in
Module and theme support: This plug in can not create new modules and themes in Knak. Upon publishing your design to Knak, the plug in only creates net new assets in Knak.
2-way sync: This plug in cannot bring your emails from Knak into Figma. The plug in will only sync designs from Figma to Knak.
Height of content elements should always be set to hug
Landing page support
Figma "Gap" Feature Compatibility: Avoid using the "Gap" feature in Figma, as it doesn’t translate correctly to Knak. Use columns or spacers in your design instead.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.