figma-generate-library

Orchestrate a multi-phase design-system workflow from code tokens to Figma components.

Updated Apr 30, 2026

Search Tags:#automation #figma #plugin #workflows #design-system #tokenization #code-connect

Ready to run

npx skills add https://github.com/lalaABC/waprcn --skill figma-generate-library-lalaabc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/lalaABC/waprcn/tree/main/resources/bundled/mcp_skills/figma/figma-generate-library
Command: npx skills add https://github.com/lalaABC/waprcn --skill figma-generate-library-lalaabc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Builds and maintains a complete design system inside Figma by coordinating a multi-phase workflow that translates code tokens into visual components, ensuring alignment between the codebase and the design file.

Core Features & Use Cases

End-to-end orchestration across discovery, token creation, foundations, components, and QA with explicit human checkpoints.
Code-to-design integration through semantic tokens, variable bindings, and Code Connect mappings to keep visuals in sync with code.
Robust state management with a persistent run ledger, idempotent creation, and resume capabilities for long-running builds.

Quick Start

To begin, run discovery to analyze the codebase and Figma, approve the plan, and let the agent execute Phases 1–4 sequentially.

Frequently Asked Questions about figma-generate-library

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I connect code design tokens to Figma components?▼

An end-to-end design-system workflow connects code tokens to Figma components by running discovery, token creation, foundations, components, and QA phases sequentially with strict checkpoints and state persistence.

What is the best way to build a complete design system in Figma from code?▼

The best way to build a complete design system in Figma from code is to run a discovery phase to analyze the codebase, approve the generated plan, and let the agent execute token creation, foundations, components, and QA phases sequentially.

Can I resume a long-running design system build in Figma if it gets interrupted?▼

Yes, you can resume a long-running design-system build in Figma because the workflow uses a persistent run ledger, enforces idempotent creation, and supports safe cleanup to recover and continue interrupted builds without duplicating components.

Does this Figma design system workflow require external services to operate?▼

No, this Figma design system workflow does not require external services to operate; it relies entirely on included scripts and references to execute discovery, token creation, foundations, components, and Code Connect integration.

How do Code Connect mappings keep Figma visuals in sync with my codebase?▼

Code Connect mappings keep Figma visuals in sync with your codebase by binding semantic design tokens directly to Figma components, creating a single source of truth that updates visual elements whenever the underlying code tokens change.