Figma Style Sync
Sync Figma's global colors, typography, and container width directly to Elementor with UiChemy.
What Are Global Styles?
Maintaining visual consistency across a website is essential, that's why designers create Global Styles in tools like Figma before building in WordPress or Elementor. These 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 run into trouble:
- Copying each color code manually into Elementor
- Entering typography settings, font, size, weight, spacing, one by one
- Configuring responsive layout settings separately for each device
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 Figma design system directly to Elementor, no more manually copying global styles. With a few clicks, you can sync your global settings and get consistent results on your Elementor site.
How Syncing Works
Sync Global Container Width
This syncs the box width value from your Figma design to Elementor's containers.
Once your site is connected on the Global Style screen in UiChemy, the plugin shows the container box width currently used in Elementor. Enter the box width from your Figma design and hit Sync, UiChemy applies that value to your Elementor box width settings. When you export your design, UiChemy automatically applies this value to all eligible sections, so content width matches exactly.
Connecting more than one site (+ Add another site) requires UiChemy Pro.
Beyond the default Desktop, Tablet, and Mobile breakpoints, click + Add Breakpoints to add Widescreen, Laptop, Tablet Landscape, and Mobile Landscape. Box width values can be entered in pixels or percentages.
Sync Global Colors & Typography
When your live site is connected, UiChemy lists all the Global Fonts and Global Colors from your Elementor site.
Sync Additional Global Styles
When you picked Editor V4 on Select Page, the screen is called Sync Global Classes & Variables, and beyond container width, colors, and typography it also lets you sync:
- Global Padding, a shared inner spacing value applied inside elements.
- Global Border, a shared border style (width, color, and type) applied around elements.
- Global Border Radius, a shared corner-rounding value applied to elements.
- Global Gap, a shared spacing value between items in a flex or grid layout.
- Global Shadow, a shared drop shadow style applied to elements.
Each works the same way, click + Add New to create a new global class, which then stays available as a reusable style in Elementor.
These five globals are only available for Editor V4 conversions. With Elementor Default, the screen is called Sync Global Styles and covers container width, colors, and typography.
Elementor v4 Atomic Elements Support
When you choose Editor V4 under Select Widgets to use: on Select Page (the default), UiChemy syncs directly into Elementor's Global Classes and Variables system, instead of the older Global Colors/Typography settings. If Editor V4 isn't on yet in your site, UiChemy offers to enable it for you. See Atomic Elements (v4).
Two-Way Sync
If you make changes in Elementor, updating the container box width, adding new global colors, or modifying typography, UiChemy can read those updates too. Open the Global Style screen in the plugin and hit Rescan to refresh the list with the latest data from your Elementor site.
UiChemy also supports exporting multiple Figma designs at once with Global Colors and Typography fully synced, useful for teams working on multi-page websites or design systems.
What You Get
Once synced, your Figma design system exists as reusable global styles inside Elementor:
- Colors, your Figma color palette, available as global colors in Elementor.
- Typography, your Figma text styles, available as global typography in Elementor.
- Container widths, your Figma layout's box width, applied per breakpoint.
- Padding, your Figma inner spacing values, reusable across widgets (Editor V4).
- Borders, your Figma border styles, reusable across widgets (Editor V4).
- Gaps, your Figma flex/grid spacing, reusable across widgets (Editor V4).
- Shadows, your Figma drop shadow styles, reusable across widgets (Editor V4).
Change a color or font once in Global Styles, and it updates everywhere it's used across your site, no hunting down individual widgets to update them one by one.