> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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

<Steps>
  <Step title="Sync Global Container Width" icon="ruler" title-type="h3">
    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.

    <Callout kind="info">
    Connecting more than one site (**+ Add another site**) requires **UiChemy Pro**.
    </Callout>

    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.

    <ExpandableGroup>
      <Expandable title="How Global Container Width Works (Figma → Elementor)" default-open="false">
        The Container Box Width in Elementor is determined solely by the horizontal padding (left and right) applied to your Box Container in Figma.

        <Callout kind="tip">
        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.
        </Callout>

        Once calculated, input this value into **UiChemy → Global Styles → Global Container 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.
      </Expandable>
    </ExpandableGroup>
  </Step>

  <Step title="Sync Global Colors & Typography" icon="palette" title-type="h3">
    When your live site is connected, UiChemy lists all the Global Fonts and Global Colors from your Elementor site.

    <ExpandableGroup>
      <Expandable title="What You Can Do" default-open="false">
        - Update, modify, or add new global colors and typography using **+ Add New**.
        - See all color variables and styles from Figma, split across **Variables**, **Styles**, and **Document** tabs, including random colors used throughout your file in the Document tab.
        - Typography styles are split across just **Styles** and **Document**, there's no separate Variables tab for typography.
        - View how often each color and typography style is used across your Figma file, shown as **Used N times** beside each one, with a **Select** button to jump straight to it.
      </Expandable>

      <Expandable title="Typography Fields Shown" default-open="false">
        Font Family, Font Size, Letter Spacing, Font Weight, Line Height, and Typography Name, plus two further style properties shown as icons, so you always know which style is which. UiChemy supports both Style-based and Document-based typography.
      </Expandable>

      <Expandable title="Helpful Features" default-open="false">
        - **Rescan**, updates the list after you've made changes or added new styles/colors in Figma.
        - **Hide Duplicates**, hides repeated or unused colors and typography, so your list stays clean.
        - **Pick All Colors** (or **Pick All Typography** on the typography picker), selects every style and color in one click.
        - **Rename anytime**, rename your colors and typography after selecting them (the new names appear in Elementor once synced), and edit or delete them from the plugin whenever you need to.
      </Expandable>

      <Expandable title="Running the Sync" default-open="false">
        When you first select a site, UiChemy shows a **"scanning figma....."** loading state while it reads your file. Once you've made your selections, the **Sync** button shows a count of pending changes, for example **Sync (11)**, click it to apply them. A **"Sync process done successfully"** message confirms it worked.
      </Expandable>

      <Expandable title="Viewing the Result in Elementor" default-open="false">
        - **Global Colors / Typography**, go to **Site Settings → Global Colors / Global Typography**.
        - **Container Box Width**, go to **Site Settings → Layout → Box Width**.
      </Expandable>
    </ExpandableGroup>
  </Step>

  <Step title="Sync Additional Global Styles" icon="layers" title-type="h3">
    Beyond container width, colors, and typography, the Global Style screen 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.
  </Step>
</Steps>

### Elementor v4 Atomic Elements Support

If your site runs Elementor's newer v4 Atomic Elements editor, UiChemy syncs directly into its **Global Classes** and **Variables** system, instead of the older Global Colors/Typography settings. Your Figma color and typography styles map to 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.

<Callout kind="tip">
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.
</Callout>

### 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.
- **Borders**, your Figma border styles, reusable across widgets.
- **Gaps**, your Figma flex/grid spacing, reusable across widgets.
- **Shadows**, your Figma drop shadow styles, reusable across widgets.

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.

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="What should I do if my global styles aren't syncing from Figma to Elementor?" default-open="false">
    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.
  </Expandable>

  <Expandable title="Can I use UiChemy to export designs with global styles to platforms other than Elementor?" default-open="false">
    UiChemy supports Elementor, Gutenberg, and Bricks Builder only, not other page builders like Divi or WPBakery.
  </Expandable>

  <Expandable title="What are the best practices for setting global styles in Figma before exporting?" default-open="false">
    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.
  </Expandable>

  <Expandable title="How does UiChemy handle responsive design when syncing global container box width?" default-open="false">
    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.
  </Expandable>

  <Expandable title="What happens if I change global colors or typography in Elementor after syncing?" default-open="false">
    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.
  </Expandable>
</ExpandableGroup>