figma-generate-library

Map code-defined design tokens to a Figma design system across phased workflows.

Updated May 25, 2026
One-click install
npx skills add https://github.com/pawan0631/AI_OpenAISkill --skill figma-generate-library-pawan0631
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/pawan0631/AI_OpenAISkill/tree/main/skills/.curated/figma-generate-library
Command: npx skills add https://github.com/pawan0631/AI_OpenAISkill --skill figma-generate-library-pawan0631

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Bridges the gap between code-defined tokens and Figma design systems by orchestrating token creation, component planning, and foundations setup, reducing drift and manual rework.

Core Features & Use Cases

  • Phase-driven workflow spanning discovery, token creation, foundations, components, and QA to maintain alignment between design and code.
  • Automated token binding and code-syntax integration to reflect changes in codebases in Figma.
  • Use Case: Imagine teams publishing or consuming design tokens and components across code and design with consistent naming, variants, and documentation.

Quick Start

Load this skill in your project root to bootstrap a new design system in Figma and generate the initial tokens, pages, and component scaffolding.

Frequently Asked Questions about figma-generate-library

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

FAQPage Schema
How do I sync code-defined design tokens to a Figma design system?▼

You can map code-defined design tokens to Figma by running the phase-driven workflow, which handles discovery, token creation, foundations, and component scaffolding to maintain design system alignment.

What is the workflow for building Figma components from code tokens?▼

Building Figma components from code tokens involves a phase-driven workflow spanning discovery, token creation, foundations, components, and QA, utilizing strict phase gates and a shared state ledger for consistency.

Can I resume a Figma design system generation task after an interruption?▼

Yes, you can safely resume Figma design system generation after interruptions because the workflow uses a shared state ledger and enforces idempotent operations to track progress across phase gates.

Does this approach prevent naming drift between code and Figma components?▼

Yes, automated token binding and code-syntax integration prevent naming drift by reflecting codebase changes directly in Figma, ensuring consistent naming, variants, and documentation across design and code.

How do I bootstrap a new design system in Figma from an existing codebase?▼

Load this skill in your project root to bootstrap a new Figma design system, generating initial tokens, pages, and component scaffolding directly from your code-defined design tokens.

What are the limitations of automating Figma design system generation?▼

A key limitation is the strict adherence to sequential phase gates and sequential use_figma calls; skipping phases or concurrent operations disrupts the shared state ledger and breaks the idempotent workflow.