This feature is still in development. Please reach out to tiffany@knak.com to participate in early testing.
Note: In order to use the Knak - Figma plugin, you will need access to a Knak account. If you have multiple Knak accounts, you will need to make sure you are logged into the account in the correct instance when syncing over your email from Figma.
Check out this video to see the Knak-Figma Plugin in Action!
How to Set Up the Knak Figma Plugin
Step 1. Login to your Figma account
Launch the Figma desktop app or open Figma in your browser.
Step 2. Search for the Plugin
Use this link to open the community page in Figma to the Knak-Figma Plug in: https://www.figma.com/community/plugin/1469783369876460053
To manually search for the Plugin, open the "Explore Community" page in Figma.
From here, click the "See Plugins" button. Use the global search to locate the Plugin by name. "Knak Figma Plugin". Then click on the Plugin’s listing in the Figma Community or Plugin Library.
Step 3. Install the Plugin
Click the Install button to add the Plugin to your Figma account. Once installed, you can access it from your list of Plugins in any design file.
Once this is installed you will be prompted to open the Plugin in one of your recent files. We have also set up a "Playground File" that we created as a template for you to test as well.
How to Launch the Plugin
Step 1. Open a Design File
Once this is installed you will be prompted to open the Plugin in one of your recent files. Create a new design file to use the Plugin.
We have also created a "Playground File" as a template for those first testing out the Plugin.
Step 2. Access the Plugin
Go to Menu > Plugins and click on the Plugin’s name.
Alternatively you can click the "Actions" button on the popup menu bar on the bottom of your screen and select the Knak-Figma Plugin.
Step 3. Wait for the Plugin to Load
Allow a few moments for the Plugin’s interface to appear on your screen. After the loading is complete you should see the Plugin display on your screen.
How to Authenticate your Figma account in Knak
Step 1. Sign in to Knak
When you run the Knak-Figma Plugin, it will ask you to login to Knak.
If you use SSO to login to Knak, make sure that you sign into Knak first so that way you will be automatically logged in when you run the Plugin.
If you use your email and password to login to Knak, you can click the sign in button that appears in Figma to direct you to input your login information to sign in to your Knak account:
Step 2. Authenticate your account
Click the Allow button to authenticate your account. Once the authorization is complete, you will have the option to click the Return to Figma button to start designing your email!
How to Publish your email to Knak
Step 1. Publish your email from Figma
Go back to your Figma account and click the Publish button for the email you would like to send over to Knak.
Step 2. Choose a Brand and Create a Custom Name for your Email
Select the brand you wish to sync your email to in Knak and add a name to easily identify your work.
Step 3. Publish and Sync to Knak
Click the Publish to Knak button to confirm the sync.
When this has successfully synced over, you will see a message at the bottom of your screen in Figma letting you know your email was synced, along with the asset ID number in Knak!
Step 4. Finding your Figma Email in Knak
Open Knak and either search the asset name you saved in Figma to find your new email, or you can navigate to the brand that you synced your Figma asset to and search for the new email manually. You will see a new folder appear in that brand called “Figma.”
This file will create a new campaign folder with the date that this is synced. All emails synced over from Figma on that date will be placed into that campaign folder, and a new campaign folder will be automatically created when you sync over emails from Figma on a new date.
For more 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
Step 5. Add the finishing touches to your Email
Now that your email is in Knak, add further personalization options to your email. Add in your merge tags to your text boxes, add dynamic content, and so much more! Once all your edits are completed for the email, add translations if needed and use our email testing feature to see how this email will preview in other email clients.
After everything is finished in Knak, publish and sync over your email to your Marketing Automation Platform to do one final round of email testing before sending your email to your audience.
Best Practices
Ignoring these best practices may cause the sync to fail
Do not ignore the auto-layout in Figma
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 plug in automatically creates the frame for you
Use spacers and padding to adjust the section or column height
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.
Known Bugs
Text box background does not respect section background in Figma but it works when synced
Drag and drop experience
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.
Landing page support: The plug-in can only support email designs. Landing page design is not available through the plug-in.