figma-suite

figma-suite

A Claude Code skill set for Figma. Syncs design tokens, builds component libraries, designs screens, and audits for design system compliance — all through natural language.

Turns the official Figma MCP server into a full design workflow: proper auto-layout, variable bindings on every property, component composition via instances, text styles, instance swap slots, and screenshot-validated output. No hardcoded values, no detached instances, no raw hex codes.

Requirements

• Claude Code CLI
• Figma MCP Server (official remote server at https://mcp.figma.com/mcp)
• Figma files with edit access

Installation

Via Claude Code CLI (recommended)

# 1. Add the marketplace
/plugin marketplace add robukh/figma-suite

# 2. Install the plugin
/plugin install figma-suite@figma-suite

Via skills CLI

npx skills add robukh/figma-suite

Select Claude Code when prompted for the agent.

Manual install

Clone or download this repo, then copy the skill folder.

Project-level:

cp -r skills/figma-suite/ .claude/skills/figma-suite/

Personal (all projects):

# macOS / Linux
cp -r skills/figma-suite/ ~/.claude/skills/figma-suite/

# Windows (PowerShell)
Copy-Item -Recurse skills/figma-suite/ "$env:USERPROFILE/.claude/skills/figma-suite/"

Setup

1. Ensure the official Figma MCP server is connected
2. Run /figma-suite — it auto-runs setup on first use

Setup asks for your Figma file URLs, scans your libraries for variables and components, and generates project-specific design rules that guide all workflows.

During setup, you choose where to save the workspace:

• Project-level (default) — .figma-suite/ in your project directory (shareable with teammates)

• Global — <HOME>/.claude/figma-suite/{project-name}/ (personal, not committed)

• With a codebase — scans your project for tokens and components

• Standalone — paste Figma file URLs, no codebase needed

• Multiple libraries — supports multiple DS library files (e.g., icons + components)

• Multiple design files — supports multiple design files per project

• Design rules — auto-generates project-specific design rules from your library, fully editable

Updating

# If installed via Claude Code CLI
/plugin update figma-suite

# If installed via skills CLI
npx skills update robukh/figma-suite

Usage

/figma-suite                   # Auto-setup on first run, then show workflow menu
/figma-suite setup             # (Re)scan project, generate token/component mappings
/figma-suite sync              # Diff code tokens vs Figma variables
/figma-suite sync --to-figma   # Push code tokens to Figma
/figma-suite sync --to-code    # Pull Figma variables to code
/figma-suite build-library     # Generate Figma component library
/figma-suite design <desc>     # Design a screen in Figma
/figma-suite audit             # Audit Figma file for DS compliance
/figma-suite update-guide      # Sync design guidelines both ways

What It Does

Design Screens

Composes production-quality screens in Figma using your design system. Every element is a component instance with variables bound to every property — colors, spacing, radius, typography. Follows your project's design rules for layout, spacing hierarchy, and typography scale. Validates every section with screenshots.

Build Component Libraries

Reads your components (from code or from Figma), extracts variants/states/props, and generates Figma component sets with auto-layout, variable bindings, instance swap slots, text properties, and boolean toggles. Builds in dependency order — primitives first, composites last. Every component is fully parameterized, zero raw values.

Sync Tokens

Bidirectional sync between code design tokens and Figma variables. Detects drift in 9 categories, shows a dry-run report, and applies changes after approval. Supports W3C Design Tokens, Style Dictionary, CSS Custom Properties, Tailwind, and JS theme objects.

Audit

Read-only inspection of any Figma screen for design system compliance. Checks token binding, component usage, layout quality, and variable health. Scores 0–100 with severity-ranked findings and actionable recommendations.

Update Guidelines

Syncs design documentation between your project's design rules, codebase docs, and Figma annotations/documentation pages.

Design Principles

The agent follows these rules in every workflow: