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.
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 helps you connect your Figma design system directly to Elementor, no more manual copying of global styles. With just a few clicks, you can sync your global settings and get consistent results in your Elementor site.
UiChemy lets you sync:
1. Sync Global Container Box Width
This feature allows you to sync the box width value from your Figma design to Elementor containers.
Here’s how it works:
- Once your site is connected in the Global Style screen of UiChemy, the plugin will show the current container box width used in Elementor.
- You can then enter the box width from your Figma design (based on how your sections are designed) and hit the Sync button.
- UiChemy will apply that value to your Elementor box width settings.
- When exporting your design to Elementor, UiChemy will automatically apply that value to all eligible sections, so the content width matches exactly.
Additionally, you can set custom breakpoints like:
- Widescreen
- Laptop
- Tab Extra
- Tablet
- Mobile Extra
- Mobile
You can enter the box width value in either pixels or percentages, depending on what fits your design needs.
How Container Box Width Works? (Figma → Elementor)
The Container Box Width in Elementor is determined solely by the horizontal padding (left and right) applied to your Box Container in Figma.
Example:
If your Figma layout has:
- Total Container Width: 1440px
- Left Padding: 150px
- Right Padding: 150px
Then the Box Width is calculated as:
Box Width = 1440px (Total Width) - 150px (Left Padding) - 150px (Right Padding)= 1140pxThis 1140px is what you should input as your Box Width in UiChemy.
How UiChemy Applies This:
- Once you’ve calculated the correct Box Width based on container padding, input it into UiChemy > Global Styles > Container Box Width.
- UiChemy will:
- Apply this width to Elementor’s Container Width setting (Site Settings > Layout > Container Box Width).
- Remove the default left/right padding in Elementor, since it’s already accounted for in your Box Width.
You can also define different Box Widths for each breakpoint (Desktop, Laptop, Tablet, Mobile, etc.) based on the padding in your Figma layout for each screen size.
2. Sync Global Colors & Typography
When your live site is connected, UiChemy lists out all the Global Fonts and Global Colors from your Elementor site.
You can:
- Update, modify, or add new global colors and typography using the + Add New button.
- See all the color variables and styles from Figma, including even the random colors used throughout your file, shown in the Document tab.
- View how often each color and typography style is used in your entire Figma file.
When it comes to typography:
- You’ll see key details like Font Size, Font Family, Line Height, Letter Spacing, Font Weight, and Typography Name, so you know exactly which one you’ve used in your design.
- UiChemy supports both Style-based and Document-based typography.
There are also several helpful features:
- A Rescan button: If you’ve made changes or added new styles/colors in Figma, click this to update the list.
- A Hide Duplicate button: This hides any repeated or unused colors and typography, so your list stays clean.
- A Pick All button: Select all styles and colors in one click instead of picking them one by one.
You can also:
- Rename your colors and typography after selecting them. These names will appear in Elementor once synced.
- Edit or delete colors and typography from the plugin anytime.
After syncing, you can view the updates directly in Elementor:
- Global Colors / Typography: Go to Site Settings > Global Colors / Global Typography
- Container Box Width: Go to Site Settings > Layout > Box Width
Two-Way Sync
If you make changes in Elementor, like updating container box width, adding new global colors, or modifying typography, UiChemy can read those updates too.
Just open the Global Style screen in the plugin and hit the Rescan button to refresh the list with the latest data from your Elementor site.
Global Colors
This video demonstrates how to sync global colors from your Figma design to your Elementor site. You’ll learn how to rescan styles, hide duplicates, pick all colors at once, and rename them before syncing.
Global Typography
Here’s a quick video walkthrough on how you can sync and manage global typography from Figma to Elementor using UiChemy. It covers how to view, rename, edit, and sync typography styles with all key details like Font Family, Size, Weight, and more.
How the “Hide Duplicate” Feature Works in UiChemy?
Learn how the Hide Duplicate feature helps keep your color and typography lists clean by filtering out repeated or unused styles from your Figma file before syncing with Elementor.
Export Multiple Designs with Synced Global Styles in UiChemy
In this demo, see how UiChemy makes it effortless to export multiple Figma designs at once with Global Colors and Typography styles fully synced. Watch as we preview the synced designs directly in Elementor, maintaining visual consistency across every layout. Perfect for teams working on multi-page websites or design systems.
