mcpField
F
figma-integration

figma-integration

github.com/plugin87Design & UI3.1k495 installsUpdated 3d ago
Repository

About figma-integration

figma-integration is a design-system skill for keeping Figma Variables and repository tokens aligned in either direction. It covers mapping, synchronization, and component parity checks.

Key features

  1. 01Maps token tiers to Figma collections
  2. 02Represents theme variants as Figma Modes
  3. 03Supports code-to-Figma or Figma-to-code sync
  4. 04Uses a connected Figma MCP server when available
  5. 05Checks component variants, properties, and states

Use cases

  1. 01Publish repository tokens as Figma Variables
  2. 02Extract Figma Variables into code tokens
  3. 03Compare Figma components with repository components

MCP support

When a Figma MCP server is connected, the skill recommends using its tools to read design data, create Variables or components, and connect code components.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill figma-integration

After installing, type/figma-integrationin Claude Code to confirm it loaded.

Details

From the project README

Skill: Figma Integration

Step 0: is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

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 ${CLAUDE_SKILL_DIR}/../../../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 (${CLAUDE_SKILL_DIR}/../../../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 ${CLAUDE_SKILL_DIR}/../../../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 ${CLAUDE_SKILL_DIR}/../../../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 ${CLAUDE_SKILL_DIR}/../../../components/* file.
  • After any token import: python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py passes.

Comments

Markdown supported