skills.rest
HellKaiser45
HellKaiser45COMMUNITY
Explore all skills by this author →
GitHub

figma-generate-library

Automate Figma design system creation and synchronization from codebase tokens.

Updated Feb 4, 2026
Search Tags:#automation#figma#design-system#component-library#token-management#code-connect
One-click install
npx skills add https://github.com/HellKaiser45/Podlet --skill figma-generate-library-hellkaiser45
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/HellKaiser45/Podlet/tree/main/.podlet/skills/figma-generate-library
Command: npx skills add https://github.com/HellKaiser45/Podlet --skill figma-generate-library-hellkaiser45

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Build and maintain a cohesive design system in Figma that stays aligned with the codebase, reducing drift between tokens, components, and documentation.

Core Features & Use Cases

  • Orchestrates token creation, aliasing, and binding across primitives and semantic colors.
  • Generates and maintains design system components, pages, and foundations docs to reflect code structure and conventions.
  • Supports Code Connect mappings to link Figma components to code components for Dev Hand-off and automated discovery.

Quick Start

Load the figma-generate-library skill and begin Phase 0 discovery to bootstrap a 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 design system generation in Figma from my codebase?▼

You can automate design system generation by reading codebase token definitions and executing a phase-gated workflow. This process orchestrates token creation, component generation, and foundations documentation to keep your Figma library synchronized with your code.

What is the best way to sync Figma component libraries with code to prevent drift?▼

The best way to prevent drift is using idempotent state tracking across a phase-gated workflow. This aligns tokens, components, and tooling, ensuring your Figma design system accurately reflects codebase conventions without manual synchronization.

Can I map Figma components to code components for automated Dev Hand-off?▼

Yes, you can map Figma components to code components using Code Connect mappings. This links visual components directly to your codebase, enabling automated component discovery and seamless developer hand-off.

How do I manage token aliasing and binding for semantic colors in Figma?▼

Token aliasing and binding for semantic colors are managed by reading primitive definitions from your codebase. The workflow orchestrates token creation across primitives and semantic colors to establish a cohesive foundation.

Does Figma design system automation require subscribing to specific libraries?▼

Yes, the workflow requires subscribing to relevant libraries in Figma. Subscribing to the correct libraries ensures that the generated components and tokens align properly with your existing design system structure.

Related Skills

Explore More Design & Creative Skills→
bRRRITSCOLDbRRRITSCOLD
2

react-component-library

Generate a React component library from design tokens and Figma designs.

Community
Advanced
figmafigma
1.9k

code-connect-components

Map Figma components to code implementations using Code Connect.

Official
Advanced
artosetrovartosetrov

figma-generate-library

Orchestrate token creation and component wiring for Figma design systems from a codebase.

Community
Advanced
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate