@figma

figma-code-connect maps figma ui components to typescript code templates via .figma.ts files, extracting component properties and generating snippet exports with dynamic child resolution and exhaustive variant handling.

code-connect-components bridges figma design components to code implementations via code connect, automating component discovery and mapping with manual review gates across multiple frameworks and languages.

figma-use establishes the mandatory prerequisite workflow for executing javascript against figma files via the plugin api. it prescribes skill loading order and tool batching patterns but lacks detailed procedural steps and failure mode coverage.

figma-create-new-file initializes blank figma files in drafts with configurable editor type (design, figjam, slides) and custom naming, serving as mandatory prerequisite for downstream figma operations.

figma-implement-design maps visual designs from figma into working application code, with guardrails to defer specialized tasks (design creation, system rules, code connect) to sibling skills.

a prerequisite skill for figma-generate-diagram tool calls that documents supported mermaid diagram types (flowchart, sequence, state, gantt, er) and explicitly lists unsupported formats to prevent failed rendering.

figma-code-connect-components maps design components to code implementations, but lacks actionable procedure steps, concrete examples, and error handling guidance.

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,…

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to…

Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design",…

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…

create-design-system-rules — an installable skill for AI agents, published by figma/mcp-server-guide.

This 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…