With Schema, you can sync your Figma design with the live ACSS setup of your website. Schema includes a specific skill about this process: skill-figma-inference.
How it works
An AI agent (Claude in this example) reads variables from Figma, maps them to ACSS framework keys, and patches the live site in one flow. The same process works in reverse: pull current site values back into Figma to keep your design file in sync.
Each Figma variable carries a codeSyntax.WEB value pointing directly to its ACSS variable (e.g. var(--primary)).
What you’ll need
- A live WordPress site running ACSS 4, EtchWP, and the SchemaWP plugin
- The SchemaWP Figma template — shipped with SchemaWP, it contains the variable architecture and modes that make the mapping work. Variables are named to match ACSS keys exactly, so Claude can map them without guessing.
- An MCP-enabled agent — Claude, Cursor, or any agent with access to both the Figma MCP and the Schema MCP
Process:
Make sure that the schema agent is active, and invoke the figma inference skill to be sure that the agent loads the skill specifically. In most times, the agent will use the skill automatically, but its always a good idea to request it specifically to avoid the agent loading other Figma related skills that you may already have.
Ask the agent to extract the ACSS schema from your Figma.
The agent will come-up with the extracted variables, and the coressponding ACSS mapping key.
Known issues and limitations
Currently the number of patachable keys from figma is limited. We are growing the scope slowly, as we try to optimise other dependent areas of schema.
| Category | Keys |
|---|---|
| Colors | color-primary, color-secondary, color-tertiary, color-accent, color-base, color-neutral, body-bg-color, body-color, bg-ultra-light, bg-light, bg-dark, bg-ultra-dark, text-dark, text-light, text-dark-muted, text-light-muted, heading-color, icon-color, border-color-dark |
| Typography | heading-font-family, text-font-family, heading-scale, mob-heading-scale, text-scale, mob-text-scale, base-heading-desk, base-heading-mob, base-text-desk, base-text-mob, h1-max – h6-max, h1-min – h6-min, text-xs-max – text-xxl-max, text-xs-min – text-xxl-min |
| Spacing | base-space, base-space-min, space-scale, mob-space-scale, section-padding-block, space-adjust-section |
| Layout | vp-max, vp-min, gutter-max, gutter-min |
| Radius | base-radius, radius-scale, btn-border-radius, card-radius |
| Buttons | btn-padding-inline, btn-padding-block, btn-font-weight, btn-border-width, btn-border-radius |
| Cards | card-padding, card-gap, card-radius, card-background, card-border-width, card-border-color |
When fetching colors from the live site to Figma, the process is problematic. This is because of the color space difference in schema vs ACSS (HSL/HEx vs OKLCH). We are working on the best possible experience and accurate conversion.