figma-sync
npx machina-cli add skill ajaywadhara/agentic-sdlc-plugin/figma-sync --openclawPrerequisites:
- Figma MCP configured in .mcp.json
- A Figma file URL provided by the user
STEP 1 — INGEST DESIGN TOKENS
Connect to the Figma file. Extract all design tokens:
- Colours (hex values + semantic names)
- Typography (font family, sizes, weights, line heights)
- Spacing scale
- Border radii
- Shadows and elevation
Save to: design-system/tokens.json
Compare against current CSS variables in src/. Generate a drift report: qa/figma-drift.md
Format:
| Property | Figma Value | Current Code | Delta | Action |
|---|---|---|---|---|
| Primary colour | #6366F1 | #6467F2 | off | Fix |
| Body font size | 16px | 16px | exact | None |
| Card padding | 24px | 20px | 4px | Fix |
STEP 2 — COMPONENT COMPARISON
For each component in the Figma file:
- Find the matching component in src/
- Compare rendered CSS against Figma spec
- Tolerance: +/-4px for spacing, exact match for colours
- Flag anything outside tolerance as a design debt item
STEP 3 — VISUAL BASELINE UPDATE
After fixing drift items: Run: npx playwright test --project=visual --update-snapshots New snapshots now represent Figma-aligned UI. Commit updated baselines.
STEP 4 — ONGOING SYNC
Add to CI: after every Figma file update (via webhook or manual trigger), run /figma-sync to catch new drift before it accumulates.
Source
git clone https://github.com/ajaywadhara/agentic-sdlc-plugin/blob/main/skills/figma-sync/SKILL.mdView on GitHub Overview
figma-sync optionally syncs design tokens from Figma, compare against code, flag drift, and update visual baselines. It helps keep design and implementation aligned across UI across releases.
How This Skill Works
Ingest design tokens from a Figma file (colors, typography, spacing, radii, shadows) and save to design-system/tokens.json. It then compares these tokens against current CSS variables in src/ and generates a drift report at qa/figma-drift.md. For each component, the tool compares rendered CSS to the Figma spec, flags out-of-tolerance items, and after fixes, updates visual baselines with Playwright (npx playwright test --project=visual --update-snapshots) before committing. Ongoing sync can be wired into CI to run after Figma updates.
When to Use It
- After updating a Figma design file to align with implemented UI tokens
- Before a release to ensure code tokens match the latest Figma specs
- When onboarding a new design system or new components
- To detect and quantify design drift between Figma and code
- As part of a CI workflow after any Figma webhook or manual update
Quick Start
- Step 1: Ingest tokens from your Figma file and save to design-system/tokens.json
- Step 2: Compare tokens against CSS vars in src/ and review qa/figma-drift.md
- Step 3: Run: npx playwright test --project=visual --update-snapshots and commit baselines
Best Practices
- Ensure Figma MCP is configured and a valid Figma file URL is provided
- Treat design-system/tokens.json as the single source of truth for tokens
- Aim for exact color matches and document any acceptable tolerances in qa/figma-drift.md
- Run the visual baseline update only after drift fixes are confirmed
- Integrate figma-sync into CI so drift is caught after every Figma update
Example Use Cases
- Syncing primary color tokens (#6366F1) from Figma to CSS variables and surfacing drift in qa/figma-drift.md
- Aligning body typography (font-family, sizes, line-heights) between Figma and src styles
- Detecting spacing drift on buttons and cards and correcting in design tokens
- Updating elevation/shadow tokens to match Figma shadows
- Standardizing border radii across components to reflect Figma design
