Skip to content
Development
Skill

/figma-integration

Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design

Boost this skill
@plugin87plugin87@plugin87
From plugin
ux-ui-agent-skills
1.4k19 skills1 agent5 commands2 MCP
Install
$ npx -y skills add plugin87/ux-ui-agent-skills --skill figma-integration --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/figma-integration

Context preview

The summary Claude sees to decide when to auto-load this skill.

Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design

SKILL.md

figma-integration.SKILL.md
name: figma-integration
description: Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift.
invocation: model

Skill: Figma Integration

Bridge design (Figma) and code (this repo) in both directions. The token JSON stays the source of truth; Figma Variables mirror it.

Steps

1. Read `workflows/figma-integration.md` (token↔Variable mapping, sync directions, MCP usage, parity). 2. Map the 3-tier hierarchy → three Figma collections (Primitives → Semantic → Component) with aliasing; dark/brand/density → Figma **Modes** (`tokens/theming.json`). 3. Choose ONE authoritative sync direction (code→Figma publish, or Figma→code extract via Tokens Studio / Variables REST API). The other side is generated — never hand-edit both. 4. **If a Figma MCP server is connected:** prefer its tools/skills (load its mandatory prerequisite skill first). Use it to read frames/variables/screenshots into code, build Variables/components from our tokens, or wire Code Connect to `components/*`. 5. Check component parity: Figma variants/properties must cover our variants + sizes + the 8 states; flag gaps.

Verification (definition of done)

  • Every Figma Variable resolves to a token in `tokens/*.json` (no orphan hex in designs).
  • One authoritative direction; the generated side has zero hand edits.
  • Variant sets cover all 8 states; Code Connect points to the right `components/*` file.
  • After any token import: `python3 scripts/validate_tokens.py` passes.
Read more
Read it on GitHub ↗
Ships withux-ui-agent-skills

Turn Claude into a senior design architect - DTCG design tokens, 50 components, WCAG 2.2 AA to AAA, 138 design systems, any-framework code, and 38 objective gates that fail the build instead of claiming success. Install as a Claude Code plugin or with npx.

Get the whole plugin
Stats
JavaScriptNodeReactNext.jsTailwind
+7 tags
shadcn/uiHTMLCSSBashGitHubAnthropicFigma
1,439
Stars
140
Forks
Active
Maintenance
JavaScript
Language
MIT
License
12h ago
Last commit
6mo ago
Created

Repo: plugin87/ux-ui-agent-skills

In this plugin
19 skills5 commands2 MCP1 agent
See everything inside

Other skills on ux-ui-agent-skills.

See all 19 skills in ux-ui-agent-skills