Figma Plugin Build
Build, typecheck, and validate a Figma plugin project. Runs TypeScript checking, esbuild bundling, and manifest validation. Use when: building a Figma plugin, running /figma-build, checking for errors, or when user says build plugin, check plugin, or validate plugin.
Figma Mastery
Knowledge-base skill about Figma UI/UX workflows — components, variants, auto-layout, prototyping, design systems, Dev Mode, plugins, and the Figma API. Teaches Figma concepts with examples and best practices. Use when: user asks about Figma concepts, says explain Figma, what is auto layout, how do variants work, teach me Figma, Figma architecture, or needs to understand Figma terminology.
Figma Implement
Translate Figma designs into production-ready code. Fetches design context, screenshots, and assets from Figma MCP, then generates code adapted to the project's stack and conventions. Use when: user shares a Figma URL and wants code, says implement design, generate code from Figma, build this component, or wants to turn a Figma frame into working code.
Figma Rules
Generate project-specific design system rules that guide AI agents to produce consistent code when implementing Figma designs. Encodes your project's conventions, tokens, and component patterns. Use when: user says create design rules, generate rules, design system rules, set up design rules, customize design guidelines, or wants consistent Figma-to-code output.
Figma Optimize
Optimize token consumption when working with Figma MCP by delegating data fetching to sub-agents. Processes Figma data in isolated Task agents and returns compact summaries. Use when: working with large Figma files, user says optimize Figma fetch, reduce tokens, sub-agent fetch, large Figma file, or context window is getting full from Figma data.
Figma Inspect
Read-only inspection and analysis of Figma designs — view structure, extract design tokens, take screenshots, get full design context. Use when: user says inspect design, show tokens, what's in this Figma file, show me the design, analyze Figma, extract colors, or wants to understand a Figma file before implementing.
Figma Connect
Connect Figma design components to their code implementations using Figma Code Connect. Maps component nodes in Figma to source files in the codebase. Use when: user says code connect, connect component, map Figma to code, link component to code, create code connect mapping, or wants to maintain design-code consistency.
Figma Browse
Modify Figma designs via the Figma REST API. Supports adding comments, reading file data, and limited write operations. Use when: user wants to modify a Figma file, add comments, read design data via API, or needs programmatic access to Figma beyond MCP tools.
Figma Dev Setup
Install all prerequisites for Figma plugin development and configure MCP servers. Detects OS (Windows/macOS), installs Node.js 22+, pnpm, Git, TypeScript. Configures up to 3 Figma MCP servers: Official Remote (OAuth), Desktop (local), Framelink (REST API). Use when: setting up Figma dev environment, running /figma-setup, first-time setup, or user says install figma tools.
Figma Help
Complete reference for all Figma skills, commands, MCP servers, and workflows. Shows what each tool does, when to use it, and example prompts. Use when: user asks for help, says figma help, asks what commands are available, needs guidance on Figma workflows, or wants to know what MCP servers are available.
Figma Plugin Create
Create a new Figma plugin project from template with proper structure, types, and build config. Generates manifest.json, package.json, tsconfig.json, esbuild config, and source templates. Use when: creating a new Figma plugin, running /figma-new command, scaffolding plugin project, or when user says create figma plugin or new plugin.