What is Direct 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 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.

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 and click on that.
2. On the next page, you’ll see your Site URL (website URL) and Security 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 Direct Import

1. Open the UiChemy plugin and select the top-level frame of your layout.  
2. Select the Step by Step Method and click the Start button. Continue by clicking Next until you reach the Sync Global Styles tab.
3. After that, click on the Select Site dropdown, and click + Add another site. In the pop-up, enter your Site URL and Security Token, then click Connect. If everything is correct, you’ll see a success message; otherwise, you’ll see an error message if anything is wrong.
4. Once connected, you’ll see your website URL is selected in the Select Site dropdown. Then, click Next to proceed.
5. Click the Convert button, then select Direct Import and click Import to begin converting your design.
6. You’ll see a live progress screen as the design is being converted.
7. Once redirected to the Expert Method tab, click the dropdown beside your site (green dot). Under Import Settings, choose New or Existing, and select a template type (Page, Elementor, or Nexter).
8. Click Next, then Import your layout(s). Once uploaded, click Open to preview the design directly on your website.

Note: For Elementor Template and Nexter Template, you have to select the template type as well.

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 and click on that.
2. On the next page, click on the Regenerate Token button to generate a new token.
3. Once you’ve regenerated a token, repeat steps 1 to 4 from the process mentioned above.
4. In the Select Site dropdown, click on the Edit button beside your website URL.
5. Then add the new token in the Security Token field and 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. Once done, you’ll see the dot beside the website URL turn green.