figlets

A Claude Code plugin for building production-quality Figma design systems and components.

Four skills covering the full design system lifecycle — from bootstrapping a variable architecture to building, auditing, and documenting components.

Skills

Prerequisites & Setup

figlets requires the figma-console MCP — a local MCP server that bridges Claude Code to Figma Desktop. This is what gives Claude the ability to read and write to your Figma file.

1. Get a Figma Personal Access Token

In Figma: Account → Settings → Personal access tokens → Generate new token. Copy the token (starts with figd_) — it's shown only once.

2. Add the MCP to Claude Code

claude mcp add figma-console -s user \
  -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE \
  -e ENABLE_MCP_APPS=true \
  -- npx -y figma-console-mcp@latest

This installs the MCP globally for all your Claude Code sessions.

3. Install the Desktop Bridge plugin in Figma

1. Open Figma Desktop
2. Go to Plugins → Development → Import plugin from manifest
3. Select ~/.figma-console-mcp/plugin/manifest.json
4. Open a Figma file and run the plugin — it starts the WebSocket bridge

The plugin must be running in Figma Desktop whenever you use figlets. It auto-updates on each launch — no re-importing needed after MCP updates.

4. Test the connection

Restart Claude Code, then try:

"Check Figma status"

Claude should report a WebSocket connection. If it does, figlets is ready to use.

For local/contributor setup, troubleshooting, and cloud mode options, see the figma-console-mcp README.

Installation

One command (recommended)

curl -fsSL https://raw.githubusercontent.com/arashr/figlets/main/install.sh | bash

Downloads the three SKILL.md files into ~/.claude/skills/. Works on macOS and Linux. No git or npm required.

Via Claude plugin marketplace

claude plugin marketplace add arashr/figlets
claude plugin install figlets

Manual

Copy each skills/<name>/SKILL.md to ~/.claude/skills/<name>/SKILL.md

Workflow

Each skill is standalone — use them independently or chain them:

/fig-setup   (optional — if starting a new design system from scratch)
   ↓  intake → 4 variable collections built in Figma → optional token showcase

/fig-create [url | frame | screenshot | description]
   ↓  token gap audit → build → self-audit → a11y check

/fig-qa
   ↓  full node traverse → flag unbound values → auto-fix or one-by-one

/fig-document
   ↓  spec sheet in Figma + component-specs/[Name].md handover file

fig-setup

Bootstraps a complete Figma variable architecture for a new design system. Walks through project intake (platform, brand colors, scale choices), then builds 5 variable collections one at a time — previewing each before writing to Figma.

• Collection 1 — Primitives: color ramps with WCAG/APCA contrast annotations, scrim primitives (black/white with alpha, for overlays and state layers), shadow numeric primitives (FLOAT), type scale, spacing scale. Hidden from publishing.
• Collection 2 — Color Semantics: Light/Dark aliases into primitives. Role-based or Surface-based naming (Material 3 style). Scrim semantic tokens (color/scrim/hover, color/scrim/overlay, etc.) and shadow color aliases (color/shadow/key, color/shadow/ambient) — white-based scrims in dark mode for visible shadow depth. Mandatory contrast verification table before building.
• Collection 3 — Typography: Material 3 naming (type/display/lg|md|sm → type/label/lg|md|sm), 15 roles. Figma Text Styles created with each property (fontSize, lineHeight, letterSpacing) bound to Collection 3 variables. Mobile/Desktop responsive modes.
• Collection 4 — Spacing: Mobile/Desktop responsive — component, layout, inset, stack, touch target, radius, and border tokens.
• Collection 5 — Elevation: 6 Effect Styles (elevation/0–elevation/5) with shadow offset, radius, and color all bound to variables. Shadow color updates automatically in Light/Dark mode.
• Optional token showcase: visual reference frame with every value bound to a variable — color ramps with contrast badges, semantic color pairs, scrim overlay demos, typography scale, spacing bars, border radius, border width, and elevation cards.

Standalone — no other figlets skill is required before or after.

/fig-setup                   # starts intake questionnaire

fig-create

Builds a component from a Figma URL, selected frame, screenshot, or text description.

• Loads all design token variables and maps them to hex/value lookups
• Audits the source design for token gaps before building — proposes nearest token for each unmatched value
• Detects repeating sub-patterns and offers to reuse existing components as instances
• Uses ComponentSet variants for interaction states (Default / Hover / Focus / Active / Disabled) so prototype wiring works
• Uses variable collection modes for type dimensions (Primary / Secondary / Ghost — colors only, no duplicate layouts)
• Uses boolean component properties for show/hide elements
• Wires ON_HOVER → Hover, ON_PRESS → Active, ON_CLICK → Focus reactions
• Runs a post-build self-audit and fixes remaining violations before screenshot
• Checks WCAG AA contrast ratios and touch target sizes

/fig-create                         # uses current Figma selection
/fig-create Button                  # text description
/fig-create https://figma.com/...   # Figma URL

fig-qa

Traverses every node in the selection (or full page if nothing selected), checking all fill colors, stroke colors, stroke weights, corner radii, padding, gaps, and font sizes for variable bindings. Skips INSTANCE nodes — master components carry the bindings.

• Matches each violation to the nearest existing variable
• Offers: fix all / review one-by-one / report only
• Writes changelog.md and known-issues.md in the project directory

/fig-qa                             # audits current selection or full page
/fig-qa https://figma.com/...       # audits specific node

fig-document

Generates a complete spec sheet and a machine-readable handover file.

Figma spec sheet ([ComponentName] · Spec frame, Documentation section):

• Live preview of the default variant
• Variant showcase (all variants side by side)
• Properties table (TYPE / DEFAULT VALUE)
• Token bindings table (NODE / PROPERTY / TOKEN / RESOLVED VALUE)
• Spacing & sizing annotations
• Anatomy diagram — numbered badges positioned from real bounding boxes
• Do / Don't usage guidelines

Local file (component-specs/[ComponentName].md):

• Variants, properties, token bindings, accessibility results, sizing, anatomy — all in one LLM-readable file
• Spec-oriented, no framework code — any LLM can implement the component correctly in any stack

Figma description updated with a compact [SPEC] block for MCP tool context.

/fig-document                       # uses current Figma selection
/fig-document Button                # by component name

Update check (optional)

figlets checks for updates once per session and tells Claude when a newer version is available. To enable it, add the following to ~/.claude/settings.json:

{
  "hooks": {
    "SessionStart": [
      {
        "matcher": "*",
        "hooks": [
          {
            "type": "command",
            "command": "bash ${CLAUDE_PLUGIN_ROOT}/scripts/check-update.sh",
            "timeout": 5
          }
        ]
      }
    ]
  }
}

When an update is available, Claude will mention it at the start of your next session:

"figlets update available: v1.0.0 → v1.1.0. Run: claude plugin update figlets"

The check only runs once per 24 hours and exits instantly when no update is needed.

Publishing a new version

./scripts/release.sh [patch|minor|major]

This will:

1. Show all commits since the last release
2. Show which SKILL.md files changed
3. Ask: Publish v1.1.0? [y/N]
4. If confirmed: bump plugin.json, commit, tag, push

GitHub Actions creates the GitHub Release automatically when the tag lands.

License

MIT