figma-generate-library

Map design tokens, components, and styles from code into a Figma library.

Updated Mar 28, 2026

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

Ready to run

npx skills add https://github.com/idontcarl/landing-page --skill figma-generate-library

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/idontcarl/landing-page/tree/main/skills/openai-skills/skills/.curated/figma-generate-library
Command: npx skills add https://github.com/idontcarl/landing-page --skill figma-generate-library

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Builds and maintains a scalable design system in Figma from a codebase by mapping tokens, components, and documentation to reduce drift and manual work.

Core Features & Use Cases

Orchestrates token discovery, foundations, and component workflows across multiple phases to produce consistent design systems.
Enforces best practices from leading design systems, including phase checkpoints and semantic aliasing.
Integrates with the figma-use skill for API calls and design guidelines, ensuring predictable results.

Quick Start

Load this skill and follow the phased plan to build or update your Figma design system from code.

Frequently Asked Questions about figma-generate-library

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a Figma design system from code?▼

To build a Figma design system from code, map design tokens, components, and styles using a phased workflow of discovery, foundations, components, and QA with human checkpoints. This ensures proper token binding, page structure, and visual consistency across the generated library.

How do I map design tokens to Figma components?▼

Mapping design tokens to Figma components uses deterministic scripts and references to ensure idempotent node creation and proper state tracking. It applies semantic aliasing and strict sequencing to bind tokens to components, producing consistent visual results across web, Android, and iOS.

Does this design system workflow support iOS and Android code syntax mapping?▼

Yes, the design system workflow supports iOS and Android code syntax mapping. It identifies and maps design tokens, components, and styles from code into a scalable Figma library, applying code syntax mapping for web, Android, and iOS platforms.

What is the best way to sync design tokens between code and Figma?▼

The best way to sync design tokens between code and Figma is using a phase-based workflow with discovery, foundations, components, and QA stages. This approach enforces best practices from leading design systems, including phase checkpoints and semantic aliasing, to reduce drift and manual work.

Can I use this to reduce drift between my codebase and Figma library?▼

Yes, you can use this to reduce drift between your codebase and Figma library. It builds and maintains a scalable design system by mapping tokens, components, and documentation directly from code, enforcing best practices, and providing deterministic results through included scripts and references.

What are the limitations of automated Figma component generation from code?▼

Automated Figma component generation from code requires strict sequencing and human checkpoints at each phase to ensure token binding and visual consistency. While it provides deterministic, idempotent node creation, users must still manually validate state tracking and semantic aliasing during the QA phase.