skills.rest
Heartcoolman
HeartcoolmanCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-library

Automates creation of design systems in Figma from a codebase via the API.

88|19|Updated Apr 30, 2026
Search Tags:#design system#Figma#theme management#code-driven design#UI component generation
One-click install
npx skills add https://github.com/Heartcoolman/warp-cn --skill figma-generate-library-heartcoolman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/Heartcoolman/warp-cn/tree/main/resources/bundled/mcp_skills/figma/figma-generate-library
Command: npx skills add https://github.com/Heartcoolman/warp-cn --skill figma-generate-library-heartcoolman

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-api, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of building professional-grade design systems in Figma from a codebase, reducing manual work and ensuring consistency between design and code.

Core Features & Use Cases

  • Design System Creation: Automates the creation of design systems with variables, components, theming, and documentation.
  • Code-Driven Design: Generates design elements based on code properties and ensures design fidelity.
  • Workflow Orchestration: Orchestrates multi-phase workflows across multiple use_figma calls, enforcing quality patterns.
  • Use Case: Imagine you have a complex UI component in your codebase. Use this Skill to automatically generate the corresponding Figma component, with all its variants, in one go.

Quick Start

Use the figma-generate-library skill to create a Figma design system from your codebase.

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 generation from a codebase?▼

You can automate Figma design system generation by using code-driven parameters to create variables, components, and theming, which reduces manual work and ensures consistency between design and code.

What is code-driven design and how does it work with Figma components?▼

Code-driven design generates Figma design elements based directly on code properties, ensuring design fidelity by automatically matching UI component variants from your codebase.

Do I need Figma API access to automate UI component generation?▼

Yes, you need Figma API access to automate design manipulation and state management, as the workflow orchestrates multiple API calls to enforce quality patterns for component generation.

Can I generate Figma variants for complex UI components in one go?▼

Yes, you can generate a Figma component with all its variants in one go by passing your complex UI component properties through the automated workflow orchestration.

What's the best way to keep Figma themes synchronized with my codebase?▼

The best way to synchronize Figma themes with your codebase is automating theme management through code-driven parameters, which applies code properties directly to Figma variables and components.

Are there limitations when using code-driven parameters for Figma documentation generation?▼

Limitations include dependency on the Figma API for design manipulation, meaning workflow orchestration requires valid API access to execute multi-phase generation and state management successfully.

Related Skills

Explore More Software Engineering Skills→
idontcarlidontcarl

figma-implement-design

Convert Figma designs into UI code with design-token integration.

Community
Advanced
manutejmanutej
61

figma-design

Automate Figma design workflows for plugin development and design-system management.

Community
Advanced
kaikunnnnkaikunnnn

design

Map Figma design nodes to Tailwind CSS tokens and component structures.

Community
Advanced
DevPelumiDevPelumi

figma-code-connect

Generate .figma.ts Code Connect templates mapping Figma components to code snippets.

Community
Advanced