figma/mcp-server-guide
11 skills25k installs17.1k starsGitHub
Install
npx skills add https://github.com/figma/mcp-server-guideSkills in this repo
1Implement DesignImplement Design is a workflow skill for agents that have the Figma MCP server connected. It walks through verifying MCP tool availability, validating a Figma design URL with file key and node-id, pulling structured design context from Figma, and implementing components or screens in the codebase with emphasis on design tokens and visual fidelity to the source frame. Solo builders who already design in Figma and code in Claude Code or Cursor use it to stop manually redlining specs or pasting static PNGs into chat. Prerequisites include a live Figma MCP connection, a well-formed figma.com/design link pointing at the target node, and preferably an established component library so generated code maps to real primitives. The skill is intentionally step-ordered so agents do not jump to codegen before design context is loaded.5.9kinstalls2Figma Implement DesignFigma Implement Design is an agent skill for solo builders who already have Figma specs and want those screens in their app repo—not slides or hand-wavy Tailwind guesses. It defines a repeatable path through the Figma MCP server: parse the provided file URL, pull structure and tokens, and implement components or pages with pixel-level parity. Use it when someone says implement design, generate code from Figma, or drops a figma.com link for a component batch. Skill boundaries are explicit: canvas create/edit in Figma belongs to figma-use; full-page generation in Figma to figma-generate-design; Code Connect-only tasks to figma-code-connect; CLAUDE.md/AGENTS.md design rules to figma-create-design-system-rules. You need MCP connectivity and a valid Figma URL format before the agent should start.4kinstalls3Figma UseFigma Use is a reference skill for solo builders and designers who drive Figma through the use_figma agent path and need accurate, environment-specific Plugin API knowledge. It is not a generic Figma tutorial; it catalogs what actually works when the agent executes JavaScript against open files, including creation helpers from rectangles through auto-layout frames, component nodes, boolean operations, variables, images, and traversal utilities. The doc explicitly warns about product-mode constraints—for example createPage works in Design URLs but throws in FigJam and Slides—and points to unsupported APIs so implementation plans stay honest. Builders pair it with the parent use_figma skill when translating specs into frames, components, and layout systems without leaving the agent workflow. Complexity is intermediate because you must understand Figma node types and the difference between design files and other Figma products.3.3kinstalls4Figma Generate DesignFigma Generate Design is an agent skill for solo builders and small teams who need Figma screens that match shipped or planned UI without redrawing from scratch. It triggers when someone wants to write to Figma, create in Figma from code, push a page, build a landing page in Figma, or convert modals, dialogs, drawers, sidebars, and panels into composed frames. The workflow discovers what already exists in the file—components, variables, text and effect styles—often aligned with Code Connect mappings, then imports and stacks sections one at a time so each region stays traceable to the source. That token-first approach keeps new frames consistent with the published design system instead of one-off rectangles and hex values. Use it during build when design parity between repo and Figma matters for review, marketing, or partner handoff, especially alongside the broader figma-use skill for MCP operations.2.5kinstalls5Figma Generate Libraryfigma-generate-library is a workflow skill for solo builders and small teams who want Figma libraries that truly mirror their codebase—not decorative mocks. It teaches what to build and in what order: design tokens and variables first, then component structures with proper variant sets, variable bindings, documentation for foundations, and light/dark theming. The skill references real-world system patterns and spans substantial plugin orchestration, so it pairs mandatory with figma-use, which covers how to invoke the Figma Plugin API correctly. Use when you are standing up a new system from repo sources, extending an existing library, or when someone asks to “just add one component” but you still need token grounding and variants to avoid brittle design debt. It does not replace figma-use; both load together for every call.1.8kinstalls6Figma Create New FileFigma-create-new-file is a guardrail skill for agents that talk to the Figma MCP server. It exists because create_new_file has editor-type rules and a required sequence: load this skill first, then call the tool, then typically hand off to use_figma on the returned file. Solo builders use it when starting a fresh mock, whiteboard, or slide deck without manually clicking through Figma. Arguments are simple—/figma-create-new-file with optional editorType and fileName—so you can spin up FigJam for discovery workshops or Slides for launch reviews in one command. The skill is integration-first, not a design critique workflow; its value is correct MCP usage and avoiding broken or wrong-editor files. Pair it with Figma connector auth already configured in your agent environment. Beginner-friendly if MCP is set up; the complexity is in agent discipline (mandatory prerequisite), not visual design craft.1.6kinstalls7Figma Create Design System Rulesfigma-create-design-system-rules helps solo builders and small teams lock in how AI agents should translate Figma into code. Trigger it when you want to create design system rules, generate project guidelines, set up design rules, or customize Figma-to-code conventions. The skill walks through your stack and outputs the right rule file for Claude Code, Codex CLI, or Cursor so agents pick the correct components, respect token usage, and avoid one-off hardcoded styles. It depends on the Figma MCP server so designs and dev context stay linked. Once rules exist, every later implementation pass inherits the same naming, folder structure, and component patterns, which cuts rework when designs change or multiple agents touch the same repo.1.6kinstalls8Figma Code Connectfigma-code-connect is an integration skill for maintaining Figma Code Connect template files that tie published team-library components to implementable code snippets. Solo builders and small frontend teams install it when designers hand off Figma URLs and they want agents to scaffold or update `.figma.ts` mappings instead of guessing props and variants. The workflow assumes the Figma MCP server is connected, components are published, and the account tier supports Code Connect; it explicitly distinguishes template files from parser-based `.figma.tsx` published via CLI. Use it during frontend build when you mention Code Connect, design-to-code translation, or creating or updating Figma mapping files. The skill reduces drift between design system nodes and React or web components by grounding suggestions in live Figma MCP context.1.4kinstalls9Create Design System Rulescreate-design-system-rules is a generator skill for solo and indie builders who use Figma with AI coding agents and need one source of truth for how designs become code. It interviews your stack and conventions, then writes durable project rules that mirror what a senior designer-developer would onboard a teammate on: which primitives to use, where files live, how to name components, what must never be hardcoded, and how tokens and styling should flow. It is meant when you say phrases like “create design system rules”, “set up design rules”, or “customize design system guidelines” for Figma-to-code—not for one-off component tweaks without a system. Output targets Claude Code, Codex CLI, and Cursor rule files so the same constraints follow you across agents. You need the Figma MCP server connected; without it the skill cannot ground rules in your real design workflow. The payoff is fewer agent regressions and faster review because implementations match your house style by default.1.3kinstalls10Code Connect ComponentsCode Connect Components is an agent skill for solo and indie builders who maintain a design system in Figma and ship the same components in code. Install it when someone asks to code connect, map a Figma node to implementation, or link design to a repository—especially after the Figma MCP server is available and you have a design URL that includes node-id. The skill walks through connection verification, suggestion retrieval, codebase search with prioritized paths (src/components, ui, design-system), analysis of variants and properties, user-confirmed mappings, and creation via code_connect_src or code_connect_package. It matters because ad-hoc guessing breaks variant parity and review cycles; explicit mappings keep agents and humans aligned on which file implements which Figma component. It is an integration workflow, not a standalone MCP server—the Figma plugin MCP supplies the tools.896installs11Figma Generate DiagramFigma Generate Diagram is an agent skill from Figma’s MCP server guide that teaches when and how to produce software architecture diagrams—services, datastores, message queues, and external systems with real edges—using the generate_diagram tool and architecture-specific layout code. Solo builders documenting a SaaS or API surface use it in Build/docs so agents do not default to sloppy ELK flowcharts or hallucinated microservices when the user only said “we have a few services.” The reference encodes MUST rules, subgraph categories, edge types, node granularity, known gotchas, and a full example plus call parameters, separating architecture views from generic flowcharts. It assumes Figma MCP is available in your agent environment and rewards honest partial diagrams over polished fiction. Intermediate complexity: you need enough system knowledge to answer the skill’s focused questions before generation.529installs