Figma Generate Library
Figma MCP skill that builds or updates a professional design system in Figma from a codebase—variables, components, variants, theming, and documentation.
Overview
figma-generate-library (figma/mcp-server-guide) orchestrates multi-phase design-system construction inside Figma: tokens/variables, component libraries with proper variant sets, light/dark theming, foundations docs, and gap reconciliation between code and Figma. Complements figma-generate-design (screens) and implement-design (code from Figma) by going the other direction—code/system → Figma library. Load together with `figma-use`.
Work with LimeDock
Using this skill? LimeDock can wire it into a durable automation you own.
Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.
We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.
Link
Installation guide
Install Figma MCP skills from https://github.com/figma/mcp-server-guide (skills folder) or via your host’s Figma skill pack. Ensure Figma MCP + `figma-use` are available; include `figma-generate-library` in skillNames when calling `use_figma`.
How to use it
Ask to build/update a Figma design system from the codebase. Expect phased checklists (tokens → components → themes → docs). Approve phases when prompted; keep `figma-use` loaded for Plugin API calls.
Example prompts
- “Build a Figma design system library from our Tailwind tokens and Button/Input components.”
- “Update the Figma library with dark-mode variables matching tokens.css.”
- “Generate a proper variant set for Button (size × intent × state) bound to variables.”
- “Reconcile gaps between src/components and our Figma UI kit.”
Use cases and examples
- Bootstrap a Figma library from code tokens
- Add dark mode variables to an existing library
- Generate component variant sets bound to variables
- Reconcile code vs Figma component gaps
- Document foundations pages in Figma
Prerequisites
- Figma MCP with write/plugin capabilities
- figma-use skill loaded alongside
- Codebase with identifiable tokens/components
- Figma file permissions for library edits
Tips
- Follow the phase checklist—don't skip foundations.
- Always pair with figma-use for Plugin API correctness.
- Treat generated libraries as drafts; design QA still required.
- Use after extract-design-system or Theme Factory when tokens start in code.