Figma

Your design system flows from Figma into WordPress, with every change previewed first. Ask your AI to read a Figma file, see exactly what would change in a diff table, then approve the import before anything is written.

What it does

The Figma integration runs two pipelines into your site:

• Design-token import. Your AI reads the colors and text styles from a Figma file and applies them to your design system.
• SVG icon export. Your AI exports the icons from a Figma file straight into your WordPress media library.

No host plugin is required. The Figma integration works on an MCP-only install, so you can pull your design tokens in even before you have built a single page.

How it works

You connect with a Figma Personal Access Token (or ask your AI to check the connection status). Your AI then reads the styles and shows you a markdown diff table so you can see exactly what would happen before any write:

• Matched. Styles already in your design system that line up with Figma.
• Changed. Existing tokens whose values would update.
• New. Styles in Figma that would be added to your store.

Alongside the diff, your AI asks a few configuration questions and waits for your explicit approval before writing. Those questions cover:

• Import scope: all styles, or only the ones you actually used.
• Import mode: Quick Apply (replace) or Smart Merge.
• Naming convention for the imported tokens.
• Font-size unit.
• Line-height unit.
• Responsive sizes.

Once you approve, tokens land in the central design-system store first, then mirror into your active builder. Because every widget binds to token variables instead of raw values, one import re-themes the whole site. Smart features along the way include usage counting (so it knows which styles are actually in use), smart responsive scaling, and Smart Merge, which folds the Figma tokens into your existing system without wiping what you already have.

Trigger the AI

Talk to your AI in plain English. Paste any of these and adapt the details:

• Connect my Figma, here's my access token: [token]
• Import my design system from this Figma file: [URL]
• Only import the styles I actually used.
• Merge these Figma tokens into my existing design system, don't wipe what I have.
• Export the icons from my Figma file into my WordPress media library.

Whichever you start with, your AI shows the diff table and the configuration questions first, then writes only after you approve.

Requirements

• A Figma Personal Access Token, created in Figma Settings, then Security. This path reads local paint and text styles.
• Or the Figma MCP connected in your AI client, if your tokens are Figma variables.
• No host plugin. The Figma integration works on MCP-only installs.

Once your tokens are in, see the design system for how the central store mirrors into your active builder and how drift is handled if you hand-edit a token later.