mcpField
C
claude2figma

claude2figma

github.com/podoDesign & UI29167 installsUpdated 1d ago
Repository

About claude2figma

claude2figma is a set of four skills that enforces design-system compliance when writing to Figma canvases. It is for users with token-based design systems and checks component instances and variable-bound styling, then verifies compliance after canvas operations.

Key features

  1. 01Four design-system enforcement skills
  2. 02Check master component instances
  3. 03Require Figma variables and styles
  4. 04Validate colors, type, spacing, and radii
  5. 05Verify after canvas operations

Use cases

  1. 01Keep canvas components linked to masters
  2. 02Apply design-system variables to styling
  3. 03Check canvas writes for token compliance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill claude2figma

After installing, type/claude2figmain Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

claude2figma

Catalogue stub — full package: senlindesign/claude2figma

Decision tree

  1. Is the skill already installed? Check ~/.design-agent-skills/skills/ for claude2figma or related skill directories.

    • Yes → invoke and proceed
    • No → go to step 2

  2. Shell access? Yes → install below. No → show user the command (Claude Code: send with ! as a chat message — add -g for global or omit for project-only).

Install command

npx skills add senlindesign/claude2figma

Invoke after install

  • Skill name: claude2figma
  • Triggers: "claude2figma", "Figma token compliance", "Figma variables enforcement", "design system Figma"

What it does

An enforcement layer comprising four skills that ensure every Figma canvas write complies with your design system. Verifies that placed components are instances of master components (not detached), and that all color, typography, spacing, and border-radius values are bound to Figma variables and styles rather than raw values. Auto-verifies compliance after every canvas operation.

When NOT to use

  • Reading or auditing existing Figma designs — use figma-official-skills (Figma MCP)
  • Code-to-design without a token-based design system
  • Token architecture outside Figma — use design-tokens-skill

Comments

Markdown supported