Figma

Collaborative interface design tool

9 skills

A guide on how to use the Figma MCP server

checked 4d ago
Generate a design system from your code
Reads your codebase and builds a production-grade Figma library with variables, tokens, themed components, and variant sets that stay in sync with your source of truth.
Design / systems-handoffbundlefor-designers
·1.5k0
checked 4d ago
Sketch a diagram straight into Figma
Converts a text description of a flowchart, architecture diagram, or wireframe into a Figma file with grouped shapes, labels, and connectors that you can edit.
Design / craft-polishatomicfor-designers
·1.5k0
checked 4d ago
Set up Claude to edit your Figma files
Authenticates Claude with your Figma workspace and loads your design system so Claude can read frames, components, and assets without errors.
Design / systems-handoffmetafor-designers
·1.5k0
checked 4d ago
figma-use-slides
This 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.
·1.5k0
checked 4d ago
Start a new Figma design file
Creates a blank Figma canvas and links it back to you. Pick the file type — design, FigJam, or Slides — and name it in one step.
Design / craft-polishatomicfor-designers
·1.5k0
checked 4d ago
Turn a PRD into a living FigJam roadmap
Reads your PRD and codebase, interviews you on scope and risk, then builds a structured FigJam board with research notes, milestones, and task cards organized by phase.
Product / specificationbundlefor-pms
·1.5k0
checked 4d ago
Snapshot an app screen into Figma
Reads a live page, screenshot, or code and builds a full-fidelity Figma frame with components, text, spacing, and colors mapped—ready to hand off or iterate.
Design / systems-handoffatomicfor-designers
·1.5k0
checked 4d ago
Sync a FigJam board into your workflow
Reads a FigJam board—sticky notes, votes, connections—and extracts the consensus, decisions, and next steps in a format you can act on.
Engineering / workflow-sprint-structureatomicfor-ops
·1.5k0
checked 4d ago
Link your Figma components to live code
Reads your Figma components and codebase, then writes and maintains the .figma.ts files that keep design and code in sync—so devs see the real component when reviewing designs.
Design / systems-handofffor-designersfor-engineers
·1.5k0