figma/mcp-server-guide
10 skills20.4k installs18.3k starsGitHub
Install
npx skills add https://github.com/figma/mcp-server-guideSkills in this repo
1Figma UseThe figma-use skill is the mandatory prerequisite before every use_figma MCP tool call when agents write to or programmatically inspect Figma design files. It documents Plugin API execution rules: top-level await and return for output, never figma.notify or console.log, 0-1 color channels, clone-and-reassign fills, async page switching via setCurrentPageAsync, and the canonical font-load-before-text-edit recipe. Agents work incrementally with at most ten logical operations per call, return all created or mutated node IDs, fan multi-page edits into parallel use_figma invocations, and stop on atomic script errors before retrying fixed code. Efficient APIs cover node.query selectors, node.set batch updates, createAutoLayout containers, placeholder shimmer feedback, and inline node.screenshot validation. Pair with figma-generate-design for full screens and figma-generate-library for component libraries. References span gotchas, variables, components, text styles, and design-system conventions.5.6kinstalls2Figma Generate DesignThe figma-generate-design skill Use this skill alongside figma-use when the task involves translating an application page view or multi-section layout into Figma Triggers write to Figma create in Figma from code push page to Figma take this app page and build it in Figma create a screen build a landing page in Figma update the Figma screen to match code convert this modal dialog drawer panel to Figma This is the preferred workflow skill whenever the user wants to build or update a full page modal dialog drawer sidebar panel or any composed multi-section view in Figma from code or a description Discovers design system components variables and styles from Code Connect files existing screens and library search then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values Build Update Screens and Views from Design System Use this skill to create or update screens views and multi-section UI containers in Figma by reusing the published design system components variables and styles rather than drawing4kinstalls3Figma Generate Libraryfigma-generate-library builds professional-grade Figma design systems that match codebases across discovery, foundations, file structure, components, and integration QA. Phase zero analyzes code tokens, inspects the Figma file, searches subscribed libraries, and locks v1 scope before any writes. Phase one creates variable collections, primitive and semantic tokens, scopes, code syntax, effect styles, and typography with mandatory user checkpoints. Phase two creates page skeletons and foundations documentation. Phase three builds one component at a time with auto-layout, variant grids, properties, documentation, and screenshot validation. Phase four finalizes Code Connect, accessibility audits, naming audits, and unresolved binding checks. Critical rules require variables before components, one page per component by default, bind fills and spacing to variables, and never parallelize use_figma mutations. The skill complements figma-use for Plugin API syntax and expects twenty to one hundred plus sequential calls.2.7kinstalls4Figma Create New FileThe figma-create-new-file skill is a mandatory prerequisite before every create_new_file MCP tool call in Figma workflows. It accepts optional editorType and fileName arguments, defaulting to design and Untitled when omitted. Step one resolves planKey via whoami when the user has not supplied one, auto-selecting a single plan or prompting when multiple teams exist. Step two calls create_new_file with planKey, fileName, and editorType values design, figjam, or slides. The tool returns file_key and file_url for the drafts folder entry, which downstream use_figma scripts consume. Slides files start with an empty grid and zero slides, so scripts must call createSlide first or guard empty grid reads. The skill links to figma-use and figma-use-slides references for post-creation editing. Never invoke create_new_file without loading this skill first per the encoded contract.2.3kinstalls5Figma Code ConnectCreate Code Connect template files figma ts that map Figma components to code snippets Given a Figma URL follow the steps below to create a template Note This project may also contain parser based figma tsx files using figma connect published via CLI This skill covers templates files only figma ts files that use the MCP tools to fetch component context from Figma Figma MCP server must be connected verify that Figma MCP tools e g get_code_connect_suggestions are available before proceeding If not guide the user to enable the Figma MCP server and restart their MCP client Components must be published Code Connect only works with components published to a Figma team library If a component is not published inform the user and stop Organization or Enterprise plan required Code Connect is not available on Free or Professional plans URL must include node id the Figma URL must contain the node id query parameter TypeScript types for editor autocomplete and type checking in figma ts files figma code connect figma2.2kinstalls6Figma Generate DiagramThe figma-generate-diagram skill is a mandatory prerequisite agents must load before every generate_diagram tool call in Figma MCP workflows. Skipping it causes preventable rendering failures and low-quality diagram output. It documents diagram constraints, layout expectations, and prompt patterns that produce valid FigJam or Figma diagram nodes. Agents never call generate_diagram directly without loading this skill first per explicit SKILL.md requirements. MANDATORY load before every generate_diagram MCP call. Prevents rendering failures and low-quality diagrams. Diagram constraints and layout expectations for Figma. Required prerequisite skill for generate_diagram tool. Never call generate_diagram without loading this skill. Mandatory prerequisite before every Figma generate_diagram MCP tool call.1.1kinstalls7Figma Use FigjamThe figma-use-figjam skill helps agents use Figma's use_figma MCP tool specifically in FigJam whiteboarding contexts. It complements the foundational figma-use skill with FigJam node types, sticky workflows, connector lines, and board-level operations agents need for workshops and architecture diagrams. Agents load both skills when FigJam sessions require plugin API calls beyond static design files. The skill triggers for FigJam boards, workshops, and collaborative diagramming via MCP. FigJam-specific use_figma MCP tool guidance. Complements foundational figma-use skill context. Sticky notes, connectors, and board operations in FigJam. Workshop and architecture whiteboarding via MCP. Plugin API patterns scoped to FigJam not just design files. Use Figma use_figma MCP tool in FigJam context alongside foundational figma-use skill.1.1kinstalls8Figma Use SlidesThe figma-use-slides skill provides Slides-specific context for Figma use_figma MCP alongside foundational figma-use guidance. Critical rules require skillNames figma-use-slides on calls, appendChild before x/y positioning on slides, treating SLIDE_GRID and SLIDE_ROW as opaque except settable names, avoiding get_metadata on Slides files, and never calling figma.createPage in Slides URLs. Design thinking scales from quick content edits to full new-deck creation with reference-file inheritance. Sections organize horizontal slide rows for presenter navigation. References cover slide-gotchas, lifecycle, grid layout, and design principles. Use when agents generate or reorganize presentation decks in Figma Slides via plugin API scripts.843installs9Figma SwiftuiSwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad - in EITHER direction - translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirro --- name: figma-swiftui description: "SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad - in EITHER direction - translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`.440installs10Generate Project PlanThe generate-project-plan skill runs a multi-step FigJam workflow from PRD input and optional codebase grounding. It loads figma-use once per session, re-loads figma-use-figjam before each use_figma call, and figma-generate-diagram before generate_diagram. Foundation references cover palette, layout, plugin API traps, and codebase grounding rules. A section catalog proposes candidate sections the user selects before per-section deep research and block-shape confirmation for tables, stickies, multi-column text, diagrams, and metadata strips via dedicated block subskills. Steps progress research, section proposal, content confirmation, skeleton creation, fill passes, diagrams, and wrap. Triggered by project plan in FigJam requests or /generate-project-plan with PRD URLs.16installs