skills.rest
phoenicisf
phoenicisfCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-library

Coordinate tokens, components, and documentation for Figma design-system builds.

Updated Nov 7, 2025
Search Tags:#automation#figma#state-management#design-systems#token-management#component-assembly
One-click install
npx skills add https://github.com/phoenicisf/forex-analyzer --skill figma-generate-library-phoenicisf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/phoenicisf/forex-analyzer/tree/main/.agents/skills/figma-generate-library
Command: npx skills add https://github.com/phoenicisf/forex-analyzer --skill figma-generate-library-phoenicisf

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The figma-generate-library skill enables end-to-end design-system workflows inside Figma by scaffolding component systems, token management, and documentation, reducing handoff friction and enabling scalable design systems.

Core Features & Use Cases

  • Orchestrates multi-phase design-system workflows across tokens, components, and documentation.
  • Provides idempotent create/update flows with state ledger and run-id tagging for safe recovery and resumability.
  • Integrates with Code Connect to map design elements to code references and automatic context loading for developer handoff.
  • Use cases include building a new design system in Figma, extending an existing library, or migrating tokens to semantic aliases across themes.

Quick Start

Run a complete Figma-based design-system build by bootstrapping with the frontmatter-defined skill, then proceed through discovery, token creation, foundations, component creation, and QA 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 building a complete design system in Figma from scratch?▼

You can automate a complete design system build by orchestrating multi-phase workflows across discovery, token creation, foundations, component assembly, and QA checkpoints. It coordinates tokens and components sequentially to ensure structured execution.

What is the best way to manage design tokens and migrate them to semantic aliases in Figma?▼

Migrating tokens to semantic aliases across themes uses idempotent create and update flows. A local JSON ledger provides persistent state management, ensuring safe recovery and resumability during the token migration process.

Can I map Figma components to code references for developer handoff?▼

Yes, mapping Figma components to code references is supported via Code Connect integration. This enables automatic context loading for developer handoff, reducing friction between design and code workflows.

Does the Figma design system workflow support resumable runs if a session is interrupted?▼

Yes, workflows support resumable runs through run_id tagging and persistent state management via a local JSON ledger. This enforces idempotent operations, allowing safe recovery and continuation from phase checkpoints without data duplication.

How do I extend an existing Figma component library without breaking current design tokens?▼

Extending an existing library uses sequential component creation and foundation updates. The state ledger ensures idempotent runs with run_id tagging, preventing overwriting of existing design tokens during library expansion.

Related Skills

Explore More Design & Creative Skills→
NagyViktNagyVikt
2

figma-generate-library

Orchestrate multi-phase Figma design system construction from codebase tokens and components.

Community
Advanced
figmafigma
1.9k

code-connect-components

Map Figma components to code implementations using Code Connect.

Official
Advanced
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced
terzigoluterzigolu
37

figma-generate-library

Orchestrate Figma design-system generation across token creation, component cloning, and documentation phases.

Community
Advanced