skills.rest
artosetrov
artosetrovCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-library

Orchestrate token creation and component wiring for Figma design systems from a codebase.

Updated Mar 5, 2026
Search Tags:#automation#components#figma#tokens#design-system#code-connect
One-click install
npx skills add https://github.com/artosetrov/iron-fist-arena-backend --skill figma-generate-library-artosetrov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/artosetrov/iron-fist-arena-backend/tree/main/.claude/skills/figma-generate-library
Command: npx skills add https://github.com/artosetrov/iron-fist-arena-backend --skill figma-generate-library-artosetrov

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 workflows in Figma by orchestrating token, component, and documentation generation directly from a codebase. It enables teams to align token taxonomy, component libraries, and MCP-level workflows, reducing manual handoffs and drift between design and development.

Core Features & Use Cases

  • Orchestrates token creation (primitives, semantic aliases, scopes) and component wiring following a strict phase-based process to ensure consistent results.
  • Enables resumable builds with run-level tagging, idempotent creation, and state persistence to recover from partial runs.
  • Coordinates multi-phase workflows (Discovery, Foundations, File Structure, Components, Integration + QA) and optional Code Connect mappings to keep design up-to-date with code.
  • Uses the included scripts and references to drive token and component generation, foundations documentation, and optional documentation frames.

Quick Start

Run Phase 0 to discover, lock the plan, and prepare the workspace, then execute Phases 1–4 with mandatory 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 generate a Figma design system from a codebase automatically?▼

To generate a Figma design system from a codebase, this Skill orchestrates token creation, component wiring, and documentation generation through a strict phase-based process directly from your code.

What is the best way to sync Figma components and tokens with code?▼

The best way to sync Figma components and tokens with code is using an orchestrated workflow that applies token taxonomy, component libraries, and optional Code Connect mappings to eliminate manual handoffs and design drift.

Can I resume a partial Figma component generation run if it fails midway?▼

Yes, you can resume partial Figma component generation runs because the workflow supports resumable builds with run-level tagging, idempotent creation, and a portable state ledger to recover from interruptions.

How does MCP-based workflow integration work for Figma design tokens?▼

MCP-based workflow integration for Figma design tokens works by orchestrating token creation, component wiring, and documentation generation directly from your codebase across structured phases with mandatory user checkpoints.

What are the prerequisites for orchestrating Figma design systems from code?▼

The prerequisite for orchestrating Figma design systems from code is having valid SKILL.md frontmatter to enforce preconditions, followed by executing Phase 0 to discover, lock the plan, and prepare the workspace.

Does Figma design system automation support idempotent tagging for large component libraries?▼

Yes, Figma design system automation supports idempotent tagging for large component libraries, ensuring consistent results and preventing duplicate component creation during multi-phase generation workflows.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
89jobrien89jobrien

figma-generate-library

Coordinates phased creation of tokens, components, styles, and Code Connect mappings in Figma from codebase inputs.

Community
Advanced
idontcarlidontcarl

figma-code-connect-components

Identify unmapped Figma components and locate matching code components for Code Connect mappings.

Community
Advanced
pathtoresiliencebvpathtoresiliencebv

figma-generate-library

Generate Figma design systems from code with multi-phase workflows.

Community
Advanced