AI extensions for Figma

Let AI read Figma design context; supported workflows can also write design content back to the canvas.

Connect AI coding agents to Anima Playground, Figma, and your design system.

Use existing brand guidelines with AI. Turn websites, PDFs, and Figma into a .brand runtime.

Figma MCP server and plugin: AI agents read and edit live Figma files, no Figma API token.

Your team's design feedback from Figma, Jira and Notion: ask, search, read, reply, mark done.

Design System Manager for shadcn/ui: tokens, fonts, radius, components, icons, blocks, Figma sync.

Compares a mobile app screen (Android or iOS Simulator) with its Figma design and suggests fixes.

Figma MCP Pack

Figma to pixel-verified code: HTML/React/Tailwind + tokens, then a render + pixel-diff verify loop.

Figma MCP: list frames in a file and fetch one frame's JSON and image safely. 2 tools.

The Figma MCP server brings Figma design context directly into your AI workflow.

MCP server enabling AI assistants to interact with Figma designs via natural language commands

A local MCP server with full Figma REST API coverage.

Parse a Figma file URL. Path discarded.

Let Claude create and edit fully editable vector nodes on the Figma canvas.

MCP server that reads local Figma .fig files, fully offline

Translate HTML prototypes into Figma using your design system's real components and tokens.

Read, edit and export the Figma file open in a local plugin. No REST API, no rate limits.

Search 286 episodes of product management wisdom from top leaders at Figma, Airbnb, Linear.

Builds Figma from your design system: real components and tokens, enforced, learning every build.

Proxy MCP for Playwright, Figma, DevTools, Shopify Dev, Context7 — fewer tokens, caching

Author Rive; convert Lottie, After Effects, Animate and Figma into it; animate AI and pixel art.

Compare Figma designs against live websites and get visual + content QA reports, from inside Claude.

Sync Lightroom, Figma, Dropbox & Canva assets to WordPress and Shopify via natural language.

Export files, access design data, manage projects, comments, and team assets

Validate AI-built front-ends against Figma by tokens and geometry, not pixels.

Offline Figma MCP server: layout, SVG assets, renders and revision diffs from saved .fig files

Use 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.

Use 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.

Connects 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`.

Generates 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.

Create 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)

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'. 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. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

Build 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.

Translates 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`.

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

**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 properties, or inspect file structure programmatically.

Figma designs pulled once into a local vault; AI agents read them offline with no rate limits

Let agents manage your Figma workspace. 102 tools for seats, teams, offboarding, and cleanup.

Local Figma MCP server: frames to Flutter, SwiftUI, React and HTML code, and design in Figma.

Talk to any Figma file with your AI: ask what's in it, change it, or turn it into code.

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

An MCP server that converts Figma designs into React code.

Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back

Give AI agents full read & write access to Figma — 50+ tools for design automation

Figma MCP server in Rust: plugin bridge, no API token, no rate limits, 73 tools.

Figma MCP server for AI agents. 9 tools: design context, variables, screenshots, and FigJam.

LLM-optimized Figma MCP server.

LLM-optimized Figma MCP server.