How to Export Figma Design to Elementor with Global Style using UiChemy?

Are you looking to export your Figma design with global styles to Elementor? Global styles help you maintain a consistent style across your website easily. With UiChemy, you can easily export your Figma design to Elementor with your applied global style.

Use Global Style in UiChemy

To export your Figma design with global style, follow the steps – 

1. In Figma, go to Resources > Plugins and search for UiChemy and click on it. It will open the UiChemy plugin interface and log in to your account.

2. Then select the frame you want to export.

3. Then select the Optimize option and click the Optimize button.

4. On the next screen, go to the Global Styles tab.

5. From the Select Site dropdown, you have to select your site. If you’ve not added your site, you can add your site from here as well. Then it will fetch the Elementor global styles from your site.

Note: Make sure to add your site to see the other global style properties.

6. From the Global Container Boxed Width section, you can set Elementor global content width. Sections that match the global boxed width will automatically have their width set to boxed, while sections that don’t match will have their width set to full-width.

7. Then, from the Global Colors section, you can edit the existing global colors or add global colors from your design that will be applied to Elementor Global Colors.

8. After that, from the Global Typography section, you can edit the existing global typography or add global typography from your design that will be applied to Elementor Global Fonts.

9. Once done, click on the Sync button, and your global styles will be added to your selected Elementor site.

Note: The Sync button will activate only when you make any changes to the existing global style. 

10. Then click on the Back button to return to the previous screen.

11. After that, click on the Convert button. Depending on your design, you can export the design using Copy mode or the Live Import method.

Note: Global Style is only available with Figma to Elementor conversion.

Let’s understand each Global Style option in detail.

Global Container Boxed Width

The width you set in the Global Content Width section will change the Elementor global content width. Now, any section of your design with the same width will use the boxed width for that container when you export your design in Elementor.

While the sections don’t match your set width will use the full width for that container.

Once you change the width, click on the Sync button it will change the Elementor global content width of your Elementor website.

Global Color

Here you’ll see all the global colors that you have in your Elementor website. You can edit those existing colors.

To edit a color, click on the color box, which will open a pop-up. Here you’ll see three tabs –

• Variables – Here you’ll find all the colors added in the Local variables in Figma.
• Styles – Here you’ll find all the colors added in Local styles in Figma.
• Documents – Here you’ll find all the colors used in your Figma design that are not added in Local variables or Local styles.  

You can use any color from these tabs, just click on the color and it will replace the existing color.

You can also click on the + Add New button to add more global colors.

Once you’ve added all your global colors, click on the Sync button to update all the global colors in your Elementor website.

Global Typography

Here you’ll see all the global typographies that you have in your Elementor website. You can edit those existing typographies.

To edit typography, click on the typography box, which will open a pop-up. Here you’ll see two tabs –

• Styles – Here you’ll find all the typography added in Local styles in Figma.
• Documents – Here you’ll find all the typography used in your Figma design that is not added in Local styles.  

You can use any typography from these tabs, click on the Select button, and it will replace the existing typography.

You can also click on the + Add New button to add more global typography.

Once you’ve added all your global typographies, click on the Sync button to update all the global typography in your Elementor website.