skills.rest
ahandsel
ahandselCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-library

Orchestrate Figma design system creation by mapping code tokens to variables and variants.

1|Updated May 21, 2020
Search Tags:#automation#components#figma#tokens#design-system#code-connect
One-click install
npx skills add https://github.com/ahandsel/debugging_log --skill figma-generate-library-ahandsel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/ahandsel/debugging_log/tree/main/skills/figma-generate-library
Command: npx skills add https://github.com/ahandsel/debugging_log --skill figma-generate-library-ahandsel

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill solves the fragmentation between code and design by providing a structured, multi-phase workflow to build or update professional-grade design systems in Figma that remain perfectly synced with your codebase.

Core Features & Use Cases

  • Workflow Orchestration: Manages complex, multi-step builds (20-100+ calls) across foundations, file structure, and component creation.
  • Code-Design Reconciliation: Enforces variable bindings, Code Connect mappings, and token architecture to ensure Figma components match production code.
  • Use Case: Use this skill when you need to build a new component library from scratch or reconcile an existing Figma file with a codebase, ensuring all tokens, variants, and documentation are production-ready.

Quick Start

Load the figma-generate-library skill and initiate the discovery phase to analyze your codebase and Figma file for the design system build.

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 design tokens from my codebase to Figma variables?▼

To sync design tokens to Figma variables, this skill orchestrates a multi-phase workflow mapping code-based tokens to Figma variables and variant sets. It enforces variable bindings to ensure your library matches production code.

What is the best way to build a Figma component library from an existing codebase?▼

The best way to build a Figma component library from code is through a structured workflow spanning foundation setup, file structure creation, and component generation. This skill manages complex builds with strict state management and Code Connect integration.

Can I use Figma Code Connect to map production code to variant sets?▼

Yes, you can use Figma Code Connect to map production code to variant sets. The skill explicitly handles Code Connect mappings during component library generation, ensuring Figma variants remain synced with your codebase components.

Does this Figma automation handle multi-step design system builds with validation?▼

Yes, this Figma automation handles multi-step design system builds by sequentially executing Figma Plugin API calls. It manages 20-100+ calls across phases with strict state management and validation checkpoints to prevent sync errors.

When do I need to orchestrate a multi-phase design system workflow in Figma?▼

You need to orchestrate a multi-phase design system workflow in Figma when building a new component library from scratch or reconciling an existing Figma file with a codebase. This ensures tokens, variants, and documentation are production-ready.

Related Skills

Explore More Design & Creative Skills→
lasswelltlasswellt
1

codebase-map

Analyze a codebase across technology, architecture, quality, and concerns to generate CODEBASE-MAP.md.

Community
Advanced
figmafigma
1.9k

code-connect-components

Map Figma components to code implementations using Code Connect.

Official
Advanced
Kushal9889Kushal9889

figma-use

Manipulate Figma files programmatically via the Plugin API.

Community
Advanced
rakibulismrakibulism
2

figma-generate-library

Generate Figma design systems from code with token analysis and component validation.

Community
Advanced