figma-generate-library

Orchestrate end-to-end Figma design-system workflows across tokens, components, and Code Connect mappings.

3|Updated Mar 28, 2026
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill figma-generate-library-hulusi-tunc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/figma-generate-library-new
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill figma-generate-library-hulusi-tunc

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, coordinating token management, component creation, and Code Connect mappings to reduce manual work and drift across large design systems.

Core Features & Use Cases

  • Orchestrates Phase 0–4 across token collections, variables, components, and QA with idempotent state tracking.
  • Coordinates Code Connect mappings and optional references to sub-resources, ensuring consistent cross-tool handoffs.
  • Supports safe cleanup and resume after partial runs, minimizing wasted work on large design systems.

Quick Start

Load the figma-generate-library-new skill and follow the phase-based plan to scaffold a complete design system in your Figma file.

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 across tokens and components?

Automating Figma design system creation involves orchestrating end-to-end workflows that coordinate token collections, variables, and component generation. This approach applies multi-phase processes spanning discovery, foundations, components, and QA to ensure consistent cross-tool handoffs.

How does Code Connect mapping work when coordinating Figma components with code?

Code Connect mapping synchronizes Figma components with their code counterparts to prevent design-to-code drift. It enforces strict sequencing and code-binding across your design system, ensuring consistent cross-tool handoffs and reducing manual synchronization errors.

Can I safely resume a partially run Figma design system generation process?

Yes, partially run Figma design system generation processes support safe resume and cleanup. The orchestration uses idempotent state tracking across phases, allowing you to restart after interruptions without duplicating work or corrupting existing component foundations.

What is the best way to manage design system drift across Figma and development tools?

Managing design system drift requires enforcing strict sequencing and code-binding across tools. By orchestrating multi-phase workflows with idempotent execution and coordinating token bindings with Code Connect mappings, you safeguard against inconsistencies between design and code.

Does this design system orchestration approach suit large-scale Figma files with many components?

Yes, this orchestration approach is specifically designed for large-scale Figma design systems with multi-phase processes. It applies idempotent execution and safe cleanup to handle extensive component libraries and token collections efficiently without wasting work.

Why does my Figma component generation fail to maintain consistent token binding across phases?

Figma component generation fails token binding when workflows lack strict phase sequencing and idempotent state tracking. Coordinating token collections, variables, and components through a structured discovery-to-QA pipeline ensures consistent binding and prevents drift.