Figma
Figma agent skills and MCPs
37 skills
figma-usefigma7.7K**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to propertiefigma-generate-designfigma5.3KUse 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, figma-generate-libraryfigma3.8KBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, andfigma-create-new-filefigma3KAlways use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.figma-code-connectfigma3KCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.figma-generate-diagramfigma1.7KMANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, depenfigma-use-figjamfigma1.7KThis skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.figma-design-to-codefigma1.7K**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must Nfigma-use-slidesfigma1.4KThis skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.figma-implement-motionfigmaTranslates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.figma-swiftuifigmaSwiftUI ↔ 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 `.xcfigma-use-motionfigmaMotion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.figma-implement-designopenai6.2KTranslates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.figmaopenai5.4KUse the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.figma-create-design-system-rulesopenai2.6KGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.figma-useopenai2.5K**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to propertiefigma-generate-designopenai2.5KUse 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'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discofigma-code-connect-componentsopenai2.4KConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.figma-generate-libraryopenai2.4KBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.figma-create-new-fileopenai2.3KCreate a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)figma-implement-designnexu-io2.6KTranslate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.figma-generate-designnexu-io2.6KBuild or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.figma-create-design-system-rulesnexu-io2.6KGenerate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.figma-usenexu-io2.6KRun Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.figma-generate-librarynexu-io2.5KBuild or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.figma-code-connect-componentsnexu-io2.5KConnect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.figma-create-new-filenexu-io2.5KCreate a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows.understand-figmaegonex-ai1.3KAnalyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.figma-buildawdr74100Build a Figma design from code or a description — the reverse of figma-codegen. Reuses the connected file's existing design system (components, variables, styles) instead of drawing primitives with hardcoded values. Triggers whenever the user wants something created or updated IN Figma from code or a spec — e.g. 'build this in Figma', 'create a Figma design for this', 'push this component/screen to Figma', 'turn this React/Vue into a Figma design', 'recreate this UI in Figma', 'make a Figma versfigma-codegenawdr74100Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a Figma design turned into code — e.g. 'code this design', 'implement this frame', 'build this screen/component', 'turn this Figma into React/Vue', 'convert this design to code' — or wfigma-prototypingdylantarreUse when implementing Disney's 12 animation principles in Figma prototypes and Smart Animatesync-figma-tokenfirebendersSync design tokens between code and Figma variables with strict drift reporting, mandatory approval gate, safe delta apply, and persisted reports.figmahoodiniIntegrate with Figma API for design automation and code generation. Use when extracting design tokens, generating React/CSS code from Figma components, syncing design systems, building Figma plugins, or automating design-to-code workflows. Triggers on Figma API, design tokens, Figma plugin, design-to-code, Figma export, Figma component, Dev Mode.figma-designmanutejFigma workflows, components, auto layout, constraints, prototyping, design systems, and plugin development based on Figma Plugin API documentationfigma-integrationmindrallyGuidelines for integrating Figma designs with development workflows using MCP servers and best practicespp-figmamvanhornEvery Figma endpoint, plus codegen-ready frame extracts, comments audit, orphans finder, tokens diff Trigger phrases: `extract a figma frame for codegen`, `compact figma file context for AI`, `find unresolved figma comments`, `figma stale components`, `diff figma design tokens`, `figma file fingerprint for CI`, `replay figma webhook deliveries`, `where is this figma variable used`, `use figma`, `run figma-pp-cli`.figma-designerzhaono1Analyzes Figma designs into implementation-ready visual evidence, tokens, component specifications, and interaction states for handoff to planning or development.
20 servers
Figmafigma2KThe Figma MCP server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.Figma ContextGLips16KProvides Figma layout information to AI coding agents like Cursor.Cursor Talk to Figmasonnylazuardi7KIntegrates Cursor AI with Figma to read and programmatically modify designs.FigmaMatthewDailey213Interact with Figma files to view, comment on, and analyze designs.FigmaTimHolden150Provides read-only access to Figma files and projects using the Figma API.Figmathirdstrandstudio76Interact with the Figma API to access and manage design files and resources.FigmaJayZeeDesign67Access and interact with Figma files and prototypes directly from AI agents.Figma Contexttercumantanumut40Extract code, assets, and component structures from Figma designs to use within AI workflows.Figma1yhy31Integrate Figma design data with AI coding tools using a local MCP server.Figmakdoronin21Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.Figmaplanetabhi10A local Figma MCP server with full Figma REST API coverage.Figma to React NativekailashAppDev8Convert Figma designs into React Native components.Figma MCP Server with ChunkingArchimedesCrypto5An MCP server for the Figma API, with chunking and pagination to handle large files.Figma Copilotxlzuvekas5Enables AI assistants to interact with and automate Figma designs programmatically.figma-mcp-bridgekolganovr2Write access to a live Figma canvas with auto-framed screenshot feedback and one-call rollback. Zero dependencies, Figma free plan.Figmamohammeduvaiz2Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.Figma → Vue Design SystemboraalapghA Vue 3 component library with automated design token synchronization from Figma.Figmadeepsuthar496Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.Talk to Figmahyun1202A server for integrating with Figma, allowing you to interact with your design files.figma-mcp-govkhanhquiFigma MCP for free users — no rate limits, full read/write, text to designs, designs to code