The full-stack creative canvas
Figma publishes skills that help AI agents turn Figma designs into application code, including implementing motion and animation, building pages and components from designs, and generating design systems with variables, tokens and component libraries from a codebase. Its skills also cover creating new Figma design, FigJam and Slides files, generating diagrams such as flowcharts and architecture views, and working with Figma's MCP tools. Taken together, the work centers on moving reliably between code and Figma in both directions.
Mcp Server Guide
23 skills · 2,157 stars
Figma Code Connect Creates and maintains Figma Code Connect template files that map Figma components to code snippets.
Figma Code Workflows Import or upload local HTML or project files into Figma, choose editable Design frames, runnable…
Figma Create New File Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file.
Figma Design To Code **MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` F…
Figma Generate Design Use this skill alongside figma-use when the task involves translating an application page, view,…
Figma Generate Design Use this skill alongside figma-use when the task involves translating an application page, view,…
Figma Generate Diagram MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call.
Figma Generate Library Build or update a professional-grade design system in Figma from a codebase.
Figma Generate Library Build or update a professional-grade design system in Figma from a codebase.
Figma Generative Plugins **MANDATORY prerequisite** — load this skill before calling `create_generative_plugin` or `update…
Figma Implement Motion Translates Figma motion and animations into production-ready application code.
Figma Implement Motion Translates Figma motion and animations into production-ready application code.
Figma Shaders **MANDATORY prerequisite** — load this skill before calling `create_shader` or `update_shader`.
Figma Spec This skill is required to create, read, edit, review, or comment on Figma specs.
Figma Swiftui SwiftUI ↔ Figma translation.
Figma Use **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call.
Figma Use **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call.
Figma Use Figjam This skill helps agents use Figma's use_figma MCP tool in the FigJam context.
Figma Use Motion Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyfra…
Figma Use Motion Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyfra…
Figma Use Slides This skill helps agents use Figma's use_figma MCP tool in the Slides context.
Generate Project Plan Generate a FigJam project plan board from a PRD plus codebase context.
Video Interaction Mapper This skill should be used when the user asks to analyze a UI screen recording and map interaction…