New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Figma Integration

by plugin87 in plugin87/ux-ui-agent-skills

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…

MITAuto-check passedFrontend & Design

Install Figma Integration

skills CLI
$ npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install plugin87/ux-ui-agent-skills figma-integration --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/figma-integration .claude/skills/figma-integration && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
figma-integration
GitHub stars
1.5k
Token cost
~585 tokens
SKILL.md length
244 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

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…

  • Works in 5 steps: Read… → Map the 3-tier hierarchy → three Figma… → Choose ONE authoritative sync direction… → …
  • The user wants to push tokens/components to Figma
  • SKILL.md covers Steps and Verification (definition of…
  • Calls npx and python3

What it does

Figma Integration is an agent skill from plugin87/ux-ui-agent-skills. 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.

Its SKILL.md is about 590 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Figma. The repository describes itself as: Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build… The licence is MIT.

When your agent uses it

  • The user wants to push tokens/components to Figma
  • Pull a design into code
  • Set up token↔Variable sync
  • Check design-code drift

Example prompts

  • “/figma-integration”

Requirements

  • Python 3
  • Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  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…
  3. Choose ONE authoritative sync direction (code→Figma publish, or Figma→code extract via Tokens Studio / Variables REST API). The other side…
  4. If a Figma MCP server is connected: prefer its tools/skills (load its mandatory prerequisite skill first). Use it to read…
  5. Check component parity: Figma variants/properties must cover our variants + sizes + the 8 states; flag gaps.

What it can do on your machine

Read from SKILL.md and the folder at commit 8e73a21. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma Integration loads about 585 tokens when it runs. Until then it costs about 91 tokens; SKILL.md has 244 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~91
When it runs · the whole SKILL.md, loaded when a task matches
~585

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from plugin87/ux-ui-agent-skills at commit 8e73a21, republished under its MIT licence (© plugin87). 244 words, ~585 tokens.

Download SKILL.mdSave it as .claude/skills/figma-integration/SKILL.md (or your agent's skills folder).
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.

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.

© plugin87, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/figma-integration of plugin87/ux-ui-agent-skills.

Open the folder on GitHubat commit 8e73a21

Compare with similar skills

Figma Integration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma Integration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Figma Integration this skillplugin87/ux-ui-agent-skills1.5k—~585Automated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma Design to Codewarpdotdev/warp65k4 repos~2.9kAutomated safety check: PassAGPL-3.0
Figma Design System Rules Generatorwarpdotdev/warp65k3 repos~4.6kAutomated safety check: PassAGPL-3.0
Figma Code Connect Componentswarpdotdev/warp65k2 repos~4.2kAutomated safety check: PassAGPL-3.0

Similar skills

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Rules Generator

    warpdotdev/warp

    Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.

    65k GitHub starsUsed in 3 repos~4.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Code Connect Components

    warpdotdev/warp

    Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.

    65k GitHub starsUsed in 2 repos~4.2k tokens
    Frontend & DesignAuto-check passed

  • Cc Design

    ZeroZ-lab/cc-design

    High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.

    827 GitHub stars~2.2k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check: notes

More from plugin87/ux-ui-agent-skills

All 23 skills in this repo

  • Data-Dense Dashboard Designer

    plugin87/ux-ui-agent-skills

    Lays out dense analytics or trading-terminal screens in banded sections with hand-drawn SVG charts, instead of a wall of identical stat cards.

    1.5k GitHub stars~2.6k tokensUpdated today
    Auto-check passed

  • UI Component Spec Designer

    plugin87/ux-ui-agent-skills

    Writes a complete UI component spec with anatomy, variants, sizes, eight interaction states, design-token mapping and accessibility notes before or alongside code.

    1.5k GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Design Project Scaffold

    plugin87/ux-ui-agent-skills

    Creates a new design-product project from the kit's product-design template, then installs the engine folders and the Playwright dependency that the quality gates need.

    1.5k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Accessibility Audit

    plugin87/ux-ui-agent-skills

    Audits a UI or design against WCAG 2.2 and ARIA patterns and returns findings with the criterion, severity and a specific fix for each.

    1.5k GitHub stars~542 tokensUpdated today
    Auto-check passed

  • Apply Aesthetic

    plugin87/ux-ui-agent-skills

    Applies a chosen visual direction, an archetype or one of 138 named design systems, by remapping design tokens, then checks contrast before it finishes.

    1.5k GitHub stars~597 tokensUpdated today
    Auto-check passed

  • Brand Kit Design Tokens

    plugin87/ux-ui-agent-skills

    Builds a from-scratch brand design system as three-tier DTCG tokens plus one theme.css with light and dark modes, checked against WCAG contrast rules.

    1.5k GitHub stars~809 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Figma Integration

What does Figma Integration do?

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…. Figma Integration is an agent skill from plugin87/ux-ui-agent-skills. 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).

When should I use Figma Integration?

Figma Integration fits situations like: the user wants to push tokens/components to Figma; pull a design into code; set up token↔Variable sync; check design-code drift.

How do I install Figma Integration in Claude Code?

Run `npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -a claude-code`. Or copy the skill folder (.claude/skills/figma-integration in plugin87/ux-ui-agent-skills) into .claude/skills/figma-integration in your project. Claude Code loads it when a task matches its description.

How do I install Figma Integration in Codex?

Run `npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -a codex`. Or copy the skill folder (.claude/skills/figma-integration in plugin87/ux-ui-agent-skills) into .agents/skills/figma-integration in your project. Codex loads it when a task matches its description.

Can I use Figma Integration in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-integration, .gemini/skills/figma-integration, .github/skills/figma-integration and .opencode/skills/figma-integration in your project.

What does Figma Integration need to run?

Going by SKILL.md and its folder, Figma Integration needs the command-line tools its instructions call (npx and python3). Our summary lists: Python 3; Node.js.

Does Figma Integration access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Figma Integration safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Figma Integration use?

Figma Integration is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Figma Integration use?

About 585 tokens (SKILL.md is roughly 2.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figma Integration?

Skills that share tags, products or a category with Figma Integration: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design to Code (warpdotdev/warp, 65k stars) and Figma Design System Rules Generator (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma Integration?

plugin87 (a GitHub user) maintains it in plugin87/ux-ui-agent-skills, which has 1,546 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on October 8, 2026.

Source: plugin87/ux-ui-agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.