Setup & Installation
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-library
https://github.com/figma/mcp-server-guide/tree/main/skills/figma-generate-library
View on GitHubWhat This Skill Does
Builds or updates a design system in Figma by working through a structured sequence: discovery, variable collections, component libraries, and validation. It bridges the gap between a codebase and a Figma file by creating tokens, semantic variables, and components that reflect what's actually in the code.
Manually wiring variables to components and keeping them in sync with code is error-prone and slow; this skill enforces the correct build order and binding rules so the Figma file stays accurate.
When to use it
- Generating a Figma variable collection from CSS or Tailwind tokens
- Rebuilding a component library to match a recent design system refactor
- Setting up light and dark theme variables tied to semantic tokens
- Auditing a Figma file for naming inconsistencies against code conventions
- Creating component documentation pages from an existing codebase