How to Export Figma Design to Elementor with Global Style using UiChemy?
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.
1. Sync Global Container Box 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.
You can also set custom breakpoints: Widescreen, Laptop, Tab Extra, Tablet, Mobile Extra, and Mobile. Box width values can be entered in pixels or percentages.
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.
For example: a Figma layout with a total container width of 1440px, 150px left padding, and 150px right padding gives a Box Width of 1440 − 150 − 150 = 1140px. That's the value you'd enter in UiChemy.
Once calculated, input this value into UiChemy → Global Styles → Container Box Width. UiChemy then:
- Applies this width to Elementor's Container Width setting (Site Settings → Layout → Container Box Width)
- Removes the default left/right padding in Elementor, since it's already accounted for in your Box Width
You can 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 all the Global Fonts and Global Colors from your Elementor site. From here, you can:
- Update, modify, or add new global colors and typography using + Add New
- See all color variables and styles from Figma, including random colors used throughout your file, in the Document tab
- View how often each color and typography style is used across your Figma file
For typography, you'll see Font Size, Font Family, Line Height, Letter Spacing, Font Weight, and Typography Name, so you always know which style is which. UiChemy supports both Style-based and Document-based typography.
A few helpful features:
- Rescan, updates the list after you've made changes or added new styles/colors in Figma
- Hide Duplicate, hides repeated or unused colors and typography, so your list stays clean
- Pick All, selects every style and color in one click
You can also rename your colors and typography after selecting them (the new names appear in Elementor once synced), and edit or delete them from the plugin at any time.
After syncing, 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
Elementor v4 Atomic Elements Support
Editor V4 is currently in Alpha. You choose whether to use it right at the start of conversion, on the Select Page step, under Select Widgets to use: Elementor Default or Editor V4 (Alpha).
If you pick Editor V4, UiChemy syncs directly into Elementor's newer Global Classes and Variables system on a dedicated Sync Global Classes & Variables step, instead of the older Global Colors/Typography settings. Select the site you want to sync to, and UiChemy scans your Figma file for styles to match. Beyond container width, colors, and typography, this step covers global classes for:
- Global Padding
- Global Border
- Global Border Radius
- Global Gap
- Global Shadow
Each category works the same way, click + Add New to create a class from a value in your Figma file, matching Elementor's atomic global classes and variables so they stay usable the same way across both the classic and atomic editing experiences.
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.
Frequently Asked Questions
What should I do if my global styles aren't syncing from Figma to Elementor?
Check that your Figma design is properly connected on the UiChemy Global Style screen, that you've entered the correct box width, and that your live site is connected. Try the Rescan button to refresh the styles and capture any recent Figma changes.
Can I use UiChemy to export designs with global styles to platforms other than Elementor?
UiChemy supports Elementor, Gutenberg, and Bricks Builder only, not other page builders like Divi or WPBakery.
What are the best practices for setting global styles in Figma before exporting?
Create a centralized color palette and predefined typography rules, and use clear naming conventions for colors and text styles, these names carry over into Elementor after syncing.
How does UiChemy handle responsive design when syncing global container box width?
You can define different box widths for breakpoints like Desktop, Laptop, Tablet, and Mobile, based on your Figma layout's padding at each size, keeping content width consistent across devices without manual adjustment in Elementor.
What happens if I change global colors or typography in Elementor after syncing?
UiChemy can read those changes back, just open the Global Style screen and click Rescan to refresh with the latest data from your Elementor site.