figma-generate-library

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

2|Updated Mar 29, 2026

Search Tags:#automation #figma #tokens #design-system #ui-components #code-connect

Ready to run

npx skills add https://github.com/NagyVikt/codex-plugins --skill figma-generate-library-nagyvikt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/NagyVikt/codex-plugins/tree/main/plugins/figma/skills/figma-generate-library
Command: npx skills add https://github.com/NagyVikt/codex-plugins --skill figma-generate-library-nagyvikt

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill solves the fragmentation between codebase and design by orchestrating the creation of professional-grade design systems in Figma that remain perfectly synced with your code.

Core Features & Use Cases

Multi-Phase Orchestration: Manages complex, multi-step workflows (tokens, foundations, components) to prevent structural failures.
Code-Design Reconciliation: Enforces variable-bound properties and Code Connect mappings to ensure Figma designs match production code.
Use Case: Use this skill to build a complete design system from scratch, starting with token extraction from your CSS variables, moving to variable collection setup, and finishing with a fully documented, variant-rich component library.

Quick Start

Load the figma-generate-library skill and begin the discovery phase to analyze the current codebase and Figma file for design system gaps.

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 Figma variables with codebase tokens for a design system?▼

To sync Figma variables with codebase tokens, this skill maps CSS variables and codebase components to Figma variables and variant sets. It enforces variable-bound properties and Code Connect mappings to ensure designs match production code.

What is the best way to build a Figma design system from existing CSS variables?▼

The best way to build a Figma design system from CSS variables is through a multi-phase orchestration: extracting tokens, setting up variable collections, and creating a variant-rich component library with mandatory user validation checkpoints.

Can I use this skill to map code components to Figma variant sets?▼

Yes, you can map code components to Figma variant sets. The skill orchestrates component creation phases, enforcing Code Connect mappings and variable-bound properties to maintain strict synchronization between your UI components and Figma.

Does this design system orchestration process require sequential execution?▼

Yes, building design systems requires sequential execution of discovery, foundation, structure, and component creation phases. This multi-phase orchestration prevents structural failures and includes mandatory user validation checkpoints between each phase.

How does Code Connect reconciliation work between Figma and a codebase?▼

Code Connect reconciliation works by mapping codebase tokens and UI components directly to Figma variables and variant sets. This enforces variable-bound properties, ensuring your Figma designs remain perfectly synced with your production code foundations.

When should I use an orchestrated workflow for Figma design system creation?▼

You should use an orchestrated workflow for Figma design system creation when handling complex UI development workflows requiring strict synchronization between design foundations and production code, preventing fragmentation between your codebase and design.