Sync Figma styles to the site's global colours and fonts

Elementor’s site settings hold global colours and fonts that every widget can use. If your Figma file has colour styles and text styles, FigWP can write them there, by name, and link a page’s colours to the globals, so changing a brand colour in Elementor changes every page that uses it.

What is read

• Colour styles with a single solid paint.
• Colour variables, in their default mode, with aliases followed to the value.
• Text styles: family, size, weight, line height and letter spacing.

What is written

The site upserts them into the active Elementor kit by name: a system colour or font with that name is updated, anything else is added as a custom one. Nothing is ever deleted.

By default the app runs a dry run and reports what would change. Ask it to apply when the list looks right.

Linking a page

With a page named, every colour control on that page whose value exactly matches a kit colour is linked to the global, with the literal kept as a fallback. Fonts are not linked: a global font in Elementor replaces the whole typography group, including each breakpoint’s size, which would undo the design’s sizes.

When to run it

Once, before the first conversion, so new imports can be linked, and again whenever the design’s styles change. A page converted before the sync can be linked afterwards.

Troubleshooting

A style is missing from the report. Gradients and multi-paint colour styles are skipped; only single solid paints are read. Local styles only: styles from a library the file uses must be published and available in the file.

The names on the site look wrong. Figma style names are used as given, including slashes. Rename them in Figma before syncing if you want cleaner names in Elementor.