{
  "markdown": "![Figma Suite — Design, build systems, sync with code and back](cover.png)\n\n# figma-suite\n\nA Claude Code skill set for Figma. Syncs design tokens, builds component libraries, designs screens, and audits for design system compliance — all through natural language.\n\nTurns the official Figma MCP server into a full design workflow: proper auto-layout, variable bindings on every property, component composition via instances, text styles, native slots, and screenshot-validated output. No hardcoded values, no detached instances, no raw hex codes. Plugin API guidance is aligned against Figma's own published skills.\n\nA bidirectional loop keeps code and Figma in sync — talk to the agent, edit tokens/components/designs on either side, and run `sync` to converge. The code↔Figma relationship lives in a Zod-validated `component-mappings/` directory (one `{id}.json` per component) with flexible property- and value-level mapping (so code `style` can map to Figma `Type`, and `\"primary\"` to `\"Primary\"`), and bridges to Figma Code Connect when available.\n\n## Requirements\n\n- [Claude Code](https://claude.com/claude-code) CLI\n- [Figma MCP Server](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) (official remote server at `https://mcp.figma.com/mcp`)\n- Figma files with edit access\n\n## Installation\n\n### Via Claude Code CLI (recommended)\n\n```bash\n# 1. Add the marketplace\n/plugin marketplace add robukh/figma-suite\n\n# 2. Install the plugin\n/plugin install figma-suite@figma-suite\n```\n\n### Via skills CLI\n\n```bash\nnpx skills add robukh/figma-suite\n```\n\nSelect **Claude Code** when prompted for the agent.\n\n### Manual install\n\nClone or download this repo, then copy the skill folder.\n\nProject-level:\n\n```bash\ncp -r skills/figma-suite/ .claude/skills/figma-suite/\n```\n\nPersonal (all projects):\n\n```bash\n# macOS / Linux\ncp -r skills/figma-suite/ ~/.claude/skills/figma-suite/\n\n# Windows (PowerShell)\nCopy-Item -Recurse skills/figma-suite/ \"$env:USERPROFILE/.claude/skills/figma-suite/\"\n```\n\n## Setup\n\n1. Ensure the official Figma MCP server is connected\n2. Run `/figma-suite` — it auto-runs setup on first use\n\nSetup asks for your Figma file URLs, scans your libraries for variables and components, and generates project-specific design rules that guide all workflows.\n\nDuring setup, you choose where to save the workspace:\n- **Project-level** (default) — `.figma-suite/` in your project directory (shareable with teammates)\n- **Global** — `<HOME>/.claude/figma-suite/{project-name}/` (personal, not committed)\n\n- **With a codebase** — scans your project for tokens and components\n- **Standalone** — paste Figma file URLs, no codebase needed\n- **Multiple libraries** — supports multiple DS library files (e.g., icons + components)\n- **Multiple design files** — supports multiple design files per project\n- **Design rules** — auto-generates project-specific design rules from your library, fully editable\n\n## Updating\n\n```bash\n# If installed via Claude Code CLI\n/plugin update figma-suite\n\n# If installed via skills CLI\nnpx skills update robukh/figma-suite\n```\n\n## Usage\n\n```\n/figma-suite                   # Auto-setup on first run, then show workflow menu\n/figma-suite setup             # (Re)scan project, generate token/component mappings\n/figma-suite sync              # Full bidirectional loop: tokens + components + mapping\n/figma-suite sync --tokens     # Tokens only (classic token sync)\n/figma-suite sync --components # Components + mapping only\n/figma-suite sync --to-figma   # One-way push to Figma (composes with scope flags)\n/figma-suite sync --to-code    # One-way pull to code (composes with scope flags)\n/figma-suite build-library     # Generate Figma component library\n/figma-suite design <desc>     # Design a screen in Figma\n/figma-suite audit             # Audit Figma file for DS compliance\n/figma-suite update-guide      # Sync design guidelines both ways\n```\n\n## What It Does\n\n### Design Screens\nComposes 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.\n\n### Build Component Libraries\nReads your components (from code or from Figma), extracts variants/states/props, and generates Figma component sets with auto-layout, variable bindings, content regions (native SLOT for freeform content, INSTANCE_SWAP for specific swappable children), text properties, and boolean toggles. Builds in dependency order — primitives first, composites last. Every component is fully parameterized, zero raw values.\n\n### Sync (bidirectional loop)\nThe cyclical sync across three lanes — **tokens**, **components**, and the **mapping** itself. Detects drift, shows a dry-run report, applies after approval, then re-reads and updates the `component-mappings/` files so the agent always holds an up-to-date code↔Figma picture. Token sync supports W3C Design Tokens, Style Dictionary, CSS Custom Properties, Tailwind, and JS theme objects. Component sync diffs live Figma properties/values against the mapping's flexible `propertyMap`. Optionally compiles eligible mappings into Figma Code Connect (`.figma.ts`) when on an Org/Enterprise plan — and works fully without it.\n\n### Audit\nRead-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.\n\n### Update Guidelines\nSyncs design documentation between your project's design rules, codebase docs, and Figma annotations/documentation pages.\n\n## Design Principles\n\nThe agent follows these rules in every workflow:\n\n- **Zero raw values, bound by role** — every fill, stroke, radius, padding, gap, and font property is bound to a variable, choosing the semantically-correct token (not just a pixel match)\n- **Component composition** — nested components are instances, never rebuilt from primitives\n- **Text styles** — typography applied via Text Styles, with variables bound on the style itself (family, size, weight, line-height)\n- **Content regions, decided per region** — a freeform region (Card body, Dialog content) becomes a native SLOT with auto-layout; a specific swappable child (Button icon, Avatar) becomes an INSTANCE_SWAP. Never an empty frame\n- **Auto-layout everywhere** — any container of related children uses auto-layout, never absolute coordinates\n- **No text glyphs as icons** — icons are real components, never typed characters (`✕`, `✓`, `→`)\n- **Hug contents** — parent components adapt when children resize, hide, or swap\n- **Screenshot + verification table** — every visual change is screenshotted, and component creation reports a rule→status→actual verification table, not just a picture\n- **Ask when unsure** — the agent derives design decisions from your library; when ambiguous, it asks\n\nThe craft behind these rules — token-by-role choice, component anatomy, variant economics, composition, iconography, and a \"what a senior rejects\" quality bar — lives in [design-judgment.md](skills/figma-suite/reference/design-judgment.md).\n\n## File Structure\n\n```\n.claude-plugin/\n├── marketplace.json                       # Plugin marketplace definition\n└── plugin.json                            # Plugin manifest\nskills/figma-suite/                        # Skill\n├── SKILL.md                               # Main orchestration + rules\n├── workflows/\n│   ├── setup.md                           # First-time project init\n│   ├── sync.md                            # Bidirectional loop: tokens + components + mapping\n│   ├── build-library.md                   # Component library generation\n│   ├── design-screen.md                   # Screen design composition\n│   ├── audit.md                           # Design system audit\n│   └── update-guidelines.md               # Guideline sync\n├── reference/                             # Universal rules (no project-specific data)\n│   ├── design-judgment.md                 # Craft layer: token-by-role, anatomy, variant economics, composition, iconography, quality bar\n│   ├── config-schema.md                   # Config structure, multi-file model, rules-file formats\n│   ├── mapping-schema.md                  # component-mappings/{id}.json Zod schema + Code Connect bridge\n│   ├── token-map.md                       # Token format → Figma variable mapping rules\n│   ├── component-contracts.md             # Component → Figma translation rules\n│   ├── plugin-api-patterns.md             # Figma Plugin API usage patterns + known constraints\n│   ├── figma-file-structure.md            # File/page organization conventions\n│   └── naming-conventions.md              # Naming presets for components, properties, tokens\n└── schema/                                # Optional, on-demand mapping validator (zero-dep by default)\n    ├── mapping.schema.json                # JSON Schema for component-mappings/{id}.json (editor autocomplete via $schema)\n    ├── meta.schema.json                   # JSON Schema for component-mappings/_meta.json (version/timestamp)\n    ├── validate.mjs                       # node validate.mjs <component-mappings-dir> — installs zod only if run\n    └── package.json                       # Pins zod, scoped here so the skill root stays zero-dependency\n\nGenerated by /figma-suite setup — goes into the workspace folder you pick during setup:\n  .figma-suite/ in the project root (default), or <HOME>/.claude/figma-suite/{project-name}/ (global):\n├── config.json                            # Project config (libraries, design files, presets)\n├── design-rules.md                        # Rules for designing in Figma (user-editable)\n├── code-rules.md                          # Rules for writing code from Figma (user-editable)\n├── token-map.generated.md                 # Your tokens → Figma variables\n├── component-contracts.generated.md       # Your components → Figma component sets\n└── component-mappings/                     # Code ↔ Figma mapping — one {id}.json per component (Zod-validated)\n    ├── {id}.json                           # One standalone ComponentEntry, named by id slug\n    └── _meta.json                          # Optional schema version + last-generation timestamp\n```\n\n## Security\n\nThis skill depends on the [official Figma MCP server](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) (`https://mcp.figma.com/mcp`), a first-party remote endpoint operated by Figma, Inc. This is the **only** external runtime dependency.\n\n**What happens at runtime:**\n\n- The `mcp__figma__use_figma` tool sends Figma Plugin API code to Figma's MCP server, which executes it within the user's authenticated Figma session.\n- All other `mcp__figma__*` tools make structured, read-only or declarative requests to the same server.\n\n**Access controls:**\n\n- Users must explicitly authenticate via OAuth before any operations work. No anonymous or implicit access is possible.\n- Operations are scoped to Figma files the authenticated user has edit access to. The skill cannot access files beyond the user's existing permissions.\n- OAuth tokens are managed by the MCP server and the user's Figma account — the skill never sees, stores, or transmits credentials.\n\n**What this skill does NOT do:**\n\n- Send data to any skill-author-controlled endpoint.\n- Collect, store, or exfiltrate user data, tokens, or credentials.\n- Communicate with any server other than the official Figma MCP endpoint.\n- Require network access beyond `https://mcp.figma.com/mcp`.\n\n**Reporting security issues:**\n\nIf you discover a security vulnerability in this skill, please open a private security advisory on this repository. For issues with the Figma MCP server itself, report to [Figma's security team](https://www.figma.com/security/).\n\n## Contributing\n\nContributions are welcome! Feel free to open issues and pull requests.\n\n## License\n\nMPL-2.0 — see [LICENSE](LICENSE)\n",
  "bytes": 12058,
  "sha": "2bb4507660749e962d91e43b863ec45517114ef992a578d5124c51f263c71be2",
  "repo_slug": "robukh/figma-suite",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_robukh_figma_suite_figma_suite_79d39f35/readme"
}