skills.rest
lalaABC
lalaABCCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/lalaABC/waprcn --skill figma-generate-library-lalaabc
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
artosetrovartosetrov

cc-figma-component

Generate Figma component sets from component contracts and semantic token bindings.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
ncsound919ncsound919

figma-generate-library

Orchestrate multi-phase Figma design-system builds via deterministic MCP workflows.

Community
Advanced
elsolalelsolal
1

figma-generate-library

Orchestrate multi-phase Figma MCP design-system workflows with token and component creation.

Community
Advanced