What is Live Preview?

When you export your Figma design using UiChemy, you get an option to preview your template live. The Preview option automatically exports and uploads your design from Figma to your WordPress website through a token key and shows a preview of the template.

The Preview option is an alternative to the manual download and upload, it reduces a lot of manual work and saves time, especially if you are testing a layout. The Preview option will directly import the template to your website with a single click.

Generate Security Token

To use the Preview option you have to connect your WordPress website with the UiChemy plugin using a token key and site URL.

1. To generate the token key and website URL, you have to download and install the UiChemy | Figma to WordPress(Download Now) plugin.
2. Once you’ve installed and activated the plugin, from the Dashboard, go to UiChemy.
3. On the next page you’ll see your website URL and token key, you can also click on the Regenerate Token button to generate new tokens.

Use Live Preview

1. Open the UiChemy plugin and select the top level frame of your layout.  
2. Then click on the Convert to Elementor button and check the checkbox.
3. Then again, click on the Convert To Elementor button.
4. On the next screen, you’ll see two buttons, Preview and Download.
5. Click on the Settings icon in the Preview button, then you’ll see a Live Preview popup here, you have to add the website URL and token key.
6. Once you’ve added the URL and Token, click on the Check button, if everything is correct, you’ll see a success message otherwise, you’ll see an error message if anything is wrong.
7. Then close the popup and click on the Preview button. It will import the template directly to your website.
8. Once the template is uploaded, you’ll see an Open button, click on it to see the template preview.

You’ll find the uploaded template in the Elementor Templates section.

Note: The templates uploaded with the Preview button will be in draft mode you’ll have to publish them manually.

You have to make the connection between UiChemy and your WordPress website just once, then you can click on the Preview button to see the live preview of any Figma design.

Regenerate Security Token

1. To regenerate the security token from the Dashboard, go to UiChemy.
2. On the next page, click on the Regenerate Token button to generate a new token.
3. Once you’ve regenerated a token, you must reconnect your site with UiChemy following the above mentioned process.