A Figma design system that matches your code.
What it does
Builds or updates a Figma design system that matches a codebase, with tokens, components, and documentation.
When to use it
Use when creating design tokens, component libraries, light and dark themes, foundation documentation, or resolving differences between code and Figma.
How to use it
Give it a codebase and a target Figma file; it builds the design system in phases, asking for approval between phases and after each component.
What you provide
- An existing project
Uses
Good to know
- cannot be undone: Figma
What you need · 2
Requires the Figma MCP server, configured with the streamable HTTP endpoint https://mcp.figma.com/mcp.
Must be loaded for every use_figma call because it supplies the Plugin API syntax rules.
Access · 3
This skill
Figma
Creates and updates Figma libraries (irreversible)
use_figma
Scripts in Figma