What is Live Import?

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.

Install UiChemy Plugin

To use the Preview option you have to install the UiChemy plugin on your WordPress website.

1. From the WordPress Dashboard, go to Plugins > Add New Plugin.
2. In the search field, search for “UiChemy”, you’ll find the UiChemy – Figma to WordPress (Gutenberg, Elementor, Bricks) plugin.
3. Click on Install Now and then Activate.
4. Once activated make sure to Enable auto-updates, so you are always using the updated version.

Generate Security Token

Now you have to connect your WordPress website with the UiChemy plugin using a token key and site URL.

1. Once you’ve installed and activated the plugin, from the Dashboard, go to UiChemy > Settings.
2. 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.
3. Then from the Import as User dropdown, you can select the user name. This user will be the author of all the templates imported from Figma using UiChemy. The list will only show the administrator role users.

Use Live Import

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. On the next screen, you’ll see two buttons, Download JSON and Live Import.
4. Click on the Settings icon in the Live Import button, then you’ll see a Live Import popup here, you have to add the website URL and token key.
5. Once you’ve added the URL and Token, click on the Connect button, if everything is correct, you’ll see a success message otherwise, you’ll see an error message if anything is wrong.
6. Then click on the Live Import button. It will import the template directly to your website.
7. 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 > Settings.
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.