Figma Generate Library
Skill Verified ActiveBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
To enable users to systematically build professional-grade Figma design systems that align with their codebase, covering everything from token creation to component variant generation and documentation.
Features
- Builds Figma design systems from codebases
- Automates variable and token creation
- Generates component sets with variants and properties
- Creates documentation pages for foundations and components
- Provides detailed error recovery and idempotency patterns
Use Cases
- Create a new design system in Figma based on a codebase's tokens and components
- Update an existing Figma design system to match code changes
- Generate visual documentation for design tokens (colors, spacing, typography)
- Standardize component creation process with variant matrices and property bindings
Non-Goals
- Directly generating code from Figma designs (that's the role of `figma-use`)
- Managing Figma file permissions or user access
- Performing actions outside the Figma Plugin API sandbox
Installation
/plugin install mcp-server-guide@figma-mcp-server-guideQuality Score
VerifiedSimilar Extensions
Use My Browser
100Use when work depends on the user's live browser session or visible rendered state rather than static fetches, especially for browser debugging contexts or DevTools-selected elements or requests, logged-in dashboards or CMS flows, localhost apps, forms, uploads, downloads, media inspection, DOM or iframe inspection, Shadow DOM, or browser failures that look like soft 404s, auth walls, anti-bot checks, or rate limits.
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Refactor Plan
100Prioritized redesign action plan covering quick wins, medium effort, major rework
Design Intelligence
98Design system bootstrapping and token generation. Takes project context and outputs ready-to-use design tokens, Tailwind config, and CSS variables.
Design System
98Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.
Figma Generate Library
95Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.