figma-generate-library

Generate a Figma component library from code tokens across sequential phases.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/winetree94/dotfiles --skill figma-generate-library-winetree94
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/winetree94/dotfiles/tree/main/default/.agents/skills/figma-generate-library
Command: npx skills add https://github.com/winetree94/dotfiles --skill figma-generate-library-winetree94

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill automates end-to-end design-system development by bridging code tokens with Figma tokens, enabling teams to keep design and code in sync across tokens, components, and documentation.

Core Features & Use Cases

  • Build or update a professional design system in Figma from a codebase. This skill orchestrates multi-phase workflows across 20–100+ use_figma calls, enforcing quality patterns and mandatory user checkpoints between phases.
  • Integrates token discovery, foundations setup (tokens, scales, styles), page/file structure, component creation with variant matrices, documentation, accessibility checks, and Code Connect mappings, all while maintaining an explicit phase sequence and idempotent state ledger.
  • Requires loading the figma-use skill alongside this one, and emphasizes deterministic, non-parallel use_figma calls, phase-by-phase approvals, and robust state management for resumability.

Quick Start

Initialize the workflow by running discovery, lock scope, and then proceed through Phases 1–4 with user checkpoints.

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 generating a Figma component library from code tokens?

To automate generating a Figma component library from code tokens, you can use an orchestrated workflow that bridges codebases with Figma. This approach manages token discovery, variant matrices, and Code Connect mappings while enforcing sequential phase execution to minimize drift.

What is the best way to keep Figma design tokens and code in sync?

The best way to keep Figma design tokens and code in sync involves automating end-to-end design-system development with mandatory checkpoints. This process bridges code tokens with Figma tokens, ensuring reproducible updates across components and documentation.

How does a multi-phase workflow handle Figma design system creation at scale?

A multi-phase workflow handles Figma design system creation at scale by orchestrating 20 to 100 or more deterministic Figma calls. It enforces phase-specific tooling constraints, idempotent creation, and robust state management to maintain resumability across large component libraries.

Do I need to manually approve changes during automated Figma design system development?

Yes, you need to manually approve changes during automated Figma design system development. The workflow enforces mandatory user checkpoints between sequential phases, from initial discovery through QA, to lock scope and ensure quality patterns before proceeding.

Can I use parallel API calls to speed up Figma component generation?

No, you cannot use parallel API calls to speed up Figma component generation. The workflow requires deterministic, non-parallel Figma calls to enforce strict sequential execution, minimize drift, and maintain an idempotent state ledger for reproducibility.

What limitations exist when bridging code tokens with Figma for design systems?

Limitations when bridging code tokens with Figma include strict sequential phase execution and mandatory user approvals between phases. This non-parallel, checkpoint-driven approach prioritizes minimizing drift and ensuring reproducibility over rapid, unattended automation.