figma-generate-library

Orchestrate Figma design-system workflows with phased token-to-component alignment.

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill figma-generate-library-pytaichukbohdan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/PytaichukBohdan/figma_board_connection/tree/main/.claude/skills/figma-generate-library
Command: npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill figma-generate-library-pytaichukbohdan

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Orchestrates end-to-end design-system workflows in Figma by aligning code tokens with visual components through phased, checkpoint-driven execution.

Core Features & Use Cases

  • Automates token collection, foundational setup, and component creation across multiple phases
  • Coordinates Code Connect mappings to ensure design-code alignment with live updates
  • Supports discovery, planning, foundations, components, and QA with human checkpoints

Quick Start

Load this skill and initiate Phase 0 discovery to analyze the codebase and existing Figma conventions.

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 creation from code tokens?

You can automate Figma design system creation by aligning code tokens with visual components using a phased, checkpoint-driven workflow. This orchestrates token collection, foundational setup, and component generation while enforcing token-to-component fidelity.

What is the best way to keep Figma components aligned with code tokens?

Keeping Figma components aligned with code tokens requires coordinating Code Connect mappings alongside deterministic mutations. This ensures design-code alignment with live updates across discovery, planning, foundations, components, and QA phases.

Can I resume a Figma design system workflow if it gets interrupted?

Yes, you can resume an interrupted Figma design system workflow. The process uses a persistent state ledger and frontmatter metadata to enforce idempotent, deterministic mutations, enabling both resume and rollback capabilities.

How does phased design system automation work in Figma?

Phased design system automation works by governing end-to-end workflows across phases 0 through 4. It applies strict phase governance to token creation, foundations, component construction, and Code Connect mappings with human checkpoints at each stage.

Do I need to manually check Figma component updates during token binding?

No, manual checks are minimized during token binding. The workflow enforces token-to-component fidelity through automated, deterministic mutations while preserving human checkpoints for validation before proceeding to the next phase.

Why should I use token-to-component fidelity for Figma design systems?

Token-to-component fidelity ensures your Figma design system accurately reflects your codebase. By applying strict phase governance and idempotent mutations, it prevents drift between design and code across component construction and foundational setup.