figma-generate-library

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

1|Updated Jan 20, 2026
One-click install
npx skills add https://github.com/elsolal/Skillz-Claude-Codex-And-More --skill figma-generate-library-elsolal
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/elsolal/Skillz-Claude-Codex-And-More/tree/main/.claude/skills/figma-generate-library
Command: npx skills add https://github.com/elsolal/Skillz-Claude-Codex-And-More --skill figma-generate-library-elsolal

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill orchestrates end-to-end Figma MCP design-system workflows, enabling teams to plan, build, and validate tokens, components, and documentation inside a single cohesive process.

Core Features & Use Cases

  • Orchestrates multi-phase workflows across 20–100+ use_figma calls, enforcing phase checkpoints and least-privilege progression.
  • Performs code-to-design alignment by analyzing tokens, creating primitives and semantic color collections, generating components with variants, and linking Code Connect mappings.
  • Includes robust state management, idempotency, and error-recovery to handle partial failures in long-running builds across pages, components, and docs.

Quick Start

Start the phase-0 discovery pass to inventory the repository, then proceed through foundations, components, and QA, with explicit user checkpoints at each phase.

Frequently Asked Questions about figma-generate-library

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

FAQPage Schema
How do I automate Figma design system workflows across multiple phases?

Automate Figma design system workflows by orchestrating multi-phase processes that coordinate token creation, component authoring, and documentation. The workflow enforces phase checkpoints and progresses through foundations, components, and QA with explicit user validation at each stage.

How does code-to-design alignment work with Figma tokens and component variants?

Code-to-design alignment analyzes existing tokens, creates primitive and semantic color collections, generates components with variants, and links Code Connect mappings to ensure design system parity between code repositories and Figma files.

Can I recover from partial failures during long-running Figma component builds?

Recovery from partial failures during long-running Figma builds is supported through idempotent state tracking. The workflow maintains explicit checkpoints across pages, components, and documentation, allowing you to resume interrupted design system generation without duplicating completed work.

What's the best way to manage large-scale Figma design system generation with 100+ operations?

Managing large-scale Figma design system generation requires orchestrating 20–100+ use_figma calls with least-privilege progression. The workflow handles state management and error recovery, coordinating token creation and component authoring across extensive multi-provider ecosystems with rule-based governance.

Does Figma MCP workflow automation support design token management and documentation generation?

Figma MCP workflow automation supports design token management by creating primitives and semantic color collections, then generates linked documentation. It coordinates token creation with component authoring and Code Connect mappings within a single cohesive, idempotent process.

When should I use automated Figma MCP orchestration instead of manual design system updates?

Use automated Figma MCP orchestration when managing complex design systems requiring code-to-design alignment, multi-provider ecosystem coordination, or rule-based governance. Manual updates become impractical when builds span 20–100+ operations with dependencies across tokens, component variants, and documentation.