skills.rest
whopointer
whopointerCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-library

Orchestrate multi-phase design system creation in Figma using the Plugin API.

1|Updated Jul 1, 2026
Search Tags:#theming#design system#figma#component library#code integration
One-click install
npx skills add https://github.com/whopointer/enterprise-office-agent --skill figma-generate-library-whopointer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/whopointer/enterprise-office-agent/tree/main/skills/figma-generate-library
Command: npx skills add https://github.com/whopointer/enterprise-office-agent --skill figma-generate-library-whopointer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires openai, pyyaml, python-dotenv, pytest, python-docx, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating comprehensive design systems in Figma that align with code, ensuring consistency and efficiency in design and development workflows.

Core Features & Use Cases

  • Design System Creation: Automates the process of building design systems with multiple phases, including discovery, foundations, file structure, components, and integration.
  • Component Building: Orchestrate multi-phase workflows for creating components with variations, ensuring they match code specifications.
  • Code Connect Setup: Integrates with Code Connect to map Figma components to code for seamless developer experience.
  • Use Case: For a company looking to establish a design system that spans across various products, this Skill can streamline the creation of variables, component libraries, theming, and documentation.

Quick Start

Load the figma-generate-library skill and run the use_figma command with the skillNames: "figma-generate-library" parameter.

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 creation in Figma to align with code?▼

Automate design system creation in Figma by orchestrating multi-phase workflows for discovery, foundations, file structure, and components, ensuring your design system aligns directly with code specifications for consistent development.

What is Code Connect and how does it map Figma components to code?▼

Code Connect maps Figma components to code to provide a seamless developer experience. It integrates directly within the design system orchestration workflow to ensure components match code specifications accurately.

Do I need the Figma Plugin API to build a component library with this approach?▼

Yes, building a component library requires the Figma Plugin API for state management. You also need design system knowledge to orchestrate the complex development workflows effectively.

How do I set up variables and theming for a multi-product design system?▼

Set up variables and theming by running the orchestration phases for foundations and file structure. This streamlines the creation of comprehensive design systems spanning across various products.

What's the best way to ensure Figma component variations match code specifications?▼

The best way to ensure component variations match code is orchestrating multi-phase component building workflows. This enforces quality patterns from real-world design systems during creation.

Related Skills

Explore More Design & Creative Skills→
guhans6guhans6

figma-generate-library

Orchestrate multi-phase workflows to generate Figma design systems from code.

Community
Advanced
phoenicisfphoenicisf

figma-code-connect-components

Create Code Connect mappings between Figma components and code implementations.

Community
Advanced
manutejmanutej
61

figma-design

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

Community
Advanced
Harmeet10000Harmeet10000
7

design-system-patterns

Standardizes tokens, theming, and component APIs for scalable UI foundations across web and mobile.

Community
Advanced