What Are Global Styles?
In modern web design, maintaining visual consistency across a website is essential. That’s why designers create Global Styles in design tools like Figma before building in WordPress or Elementor.
These global styles typically include:
- Color Variables, Styles: Centralized color palettes used across designs
- Text Styles: Predefined typography rules for headings, body text, buttons, etc.
Creating global styles in Figma helps teams keep every page and component visually aligned.
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.
The Problem: Transferring Global Styles to Elementor
While setting up global styles in Figma is simple, manually recreating them in Elementor is where many users face difficulty:
- You have to copy each color code manually into Elementor
- Typography settings like font, size, weight, and spacing must be entered one by one
- Responsive layout settings for different devices require separate configuration
This process is time-consuming, error-prone, and frustrating – especially for larger or more complex websites.
The Solution: UiChemy’s Global Style Sync
UiChemy connects your design system in Figma directly with Elementor. With just a few clicks, you can sync your global styles without manual work.
UiChemy lets you sync:
- Global Colors
- Global Typography
Boxed Width Container Settings (in px or %, for desktop, tablet, and mobile)
UiChemy also provides:
- A Hide Duplicate button that removes redundant colors and typography styles to keep your Elementor settings clean.
- A Pick All button that lets you quickly select all colors or all typography styles when you want to sync everything at once.
No repetition. No inconsistency. Just a smooth transition from Figma to Elementor.
How to Use Global Style in UiChemy?
To do this, we have two options to export our Figma design with a global style.
Option 1: Step by Step Method
If you’re using the step-by-step method…
- To do this in Figma, open the UiChemy plugin.
- Then, select the Step by Step Method and click on the Start button.
- Select the top-level page or frame of your layout, and then click on the Next button until the Sync Global Styles tab.
- Then, 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.
- From the Global Container Width section, you can set Elementor’s 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.
- 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.
- 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.
- Once done, click on the Sync button, and your global styles will be added to your selected Elementor site.
- Then click on the Back button to return to the previous screen.
- After that, click on the Convert button. Depending on your design, you can export the design using the Direct Import or Copy To Clipboard method.
- Then click the Import button at the bottom to start converting your design. Once done, you will be redirected to the site page.
- Once redirected to the Export Method tab, under Import Settings, choose New, and select a template type (Page, Elementor Templates, or Nexter Templates).
- Click Next, then Import your layout(s). Once uploaded, click Open to preview the design directly on your website.
Note: Make sure to add your site to see the other global style properties.
Note: The Sync button will activate only when you make any changes to the existing global style.
Option 2: Express Conversion
If you’re using the Express Conversion…
- To do this in Figma, open the UiChemy plugin.
- Then, select the Express Conversion and click on the Start button.
- As above, select the top-level page or frame of your layout, and then click on the Next button until you reach the Express Conversion tab.
- Under the Express Conversion tab. Click on the Sync Global Styles option.
- Then, on the next screen, under Sync Global Styles, select your site from the Select Site dropdown. If you haven’t added your site yet, you can add it here. Once selected, it will fetch the Elementor global styles from your site.
- From the Global Container Width section, you can set Elementor’s 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.
- 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.
- 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.
- Once done, click on the Sync button, and your global styles will be added to your selected Elementor site. Under the Express Conversion tab. Click on the Conversion Settings option.
- Then click on the Back button to return to the previous screen.
- After that, click on the Convert button. Depending on your design, you can export the design using the Direct Import or Copy To Clipboard method.
- Then click the Import button at the bottom to start converting your design. Once done, you will be redirected to the site page.
- Once redirected to the Export Method tab, under Import Settings, choose New, and select a template type (Page, Elementor Templates, or Nexter Templates).
- Click Next, then Import your layout(s). Once uploaded, click Open to preview the design directly on your website.
Note: Global Style is only available with Figma to Elementor conversion.
Let’s understand each Global Style option in detail.
What is a Boxed Width Container?
A Boxed Width Container defines the maximum width your website content can stretch within the browser.
Instead of allowing content to span the full width of the screen, a boxed layout keeps it centered and constrained within a fixed width, such as 1140px or 90%.
It helps with:
- Better readability on large screens
- Consistent layout across pages
- Clean, professional spacing
UiChemy allows you to define this width for Desktop, Tablet, and Mobile, and sync it directly from Figma into Elementor.
Global Container Width
The width you set in the Global Container 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, we 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.
How Global Colors Sync Works?
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 select any color from these tabs by clicking it to 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 the Sync button to update all the global colors in your Elementor website.
Use the Hide Duplicate button to remove redundant colors before syncing, and the Pick All button to select all colors instantly if you want to sync everything.
How Typography Sync Works?
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 select any typography style by clicking the Select button to replace the existing style.
You can also click on the + Add New button to add more global typography.
Once you’ve added all your global typography, click the Sync button to update all the global typography in your Elementor website.
Use the Hide Duplicate button to remove redundant typography styles, and the Pick All button to select all typography styles at once.