skills.rest
ndriyo
ndriyoCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-library

Automate Figma design system setup with tokens, styles, components, and documentation.

Updated Aug 27, 2026
Search Tags:#automation#design system#workflow orchestration#tokens#Figma#component libraries
One-click install
npx skills add https://github.com/ndriyo/primepm --skill figma-generate-library-ndriyo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/ndriyo/primepm/tree/main/.agents/skills/figma-generate-library
Command: npx skills add https://github.com/ndriyo/primepm --skill figma-generate-library-ndriyo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires scripts/inspectFileStructure.js, scripts/createVariableCollection.js, scripts/createSemanticTokens.js, scripts/createComponentWithVariants.js, scripts/createDocumentationPage.js, scripts/createColorSwatch.js, scripts/createTypographySection.js, scripts/createSpacingSection.js, scripts/createShadowSection.js, scripts/createRadiusCard.js, scripts/createComponentDocFrame.js, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation, management, and maintenance of design systems within Figma, ensuring consistency and efficiency across teams.

Core Features & Use Cases

  • Workflow Orchestration: Guides multi-phase design system builds from discovery to QA, reducing manual errors.
  • Automated Asset Creation: Generates tokens, components, styles, and pages aligned with industry standards such as Material 3 and Polaris.
  • Reuse & Collaboration: Reuses existing design assets via search_design_system, facilitating collaboration and version control.
  • Error Recovery & Idempotency: Implements cleanup scripts and check-before-create patterns to recover from partial failures.
  • Component Variants & Documentation: Creates variant grids, component properties, and documentation pages for easy developer handoff.
  • Extensibility: Supports linking code components with Code Connect, binding variables, and creating a comprehensive design token architecture.

Quick Start

To initiate a design system build, run the createFoundation phase, then proceed to create components using the provided scripts to ensure consistency and repeatability.

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?▼

You can automate design system creation in Figma by running multi-phase workflow scripts that generate tokens, components, styles, and documentation pages. This approach reduces manual errors by guiding the build process from discovery through QA.

What is the best way to generate Figma component variants and documentation?▼

Generating Figma component variants and documentation involves using targeted scripts to create variant grids, component properties, and documentation frames. This ensures consistent developer handoff and system standardization across your library.

Does this workflow support industry standards like Material 3 and Polaris?▼

Yes, the workflow supports industry standards like Material 3 and Polaris. It automates the creation of design tokens, styles, and components aligned with these specific frameworks to ensure your library meets established guidelines.

Can I reuse existing design assets when building a Figma component library?▼

You can reuse existing design assets during your Figma component library build by utilizing search functions to find and incorporate current elements. This facilitates collaboration and version control without starting from scratch.

How do I handle partial failures or errors during Figma design system setup?▼

Handling partial failures during Figma design system setup requires using built-in cleanup scripts and check-before-create patterns. This error recovery mechanism ensures idempotency and safely restores the system state after interruptions.

What do I need to link code components with Figma variables and tokens?▼

Linking code components with Figma variables requires using Code Connect to bind variables and establish a comprehensive design token architecture. This extensibility bridges the gap between design assets and code integration workflows.

Related Skills

Explore More Design & Creative Skills→
Pythagora-ioPythagora-io
9

figma

Extract structure, components, styles, and assets from Figma files via the REST API.

Official
Intermediate
vneseyoungstervneseyoungster
27

figma-analyzer

Extract design assets, metadata, and tokens from Figma files.

Community
Advanced
OKHP3OKHP3
2

okhp3-foundry-repo-creator

Convert AI-driven assets and ideas into standardized GitHub repositories.

Community
Advanced
rakibulismrakibulism
2

figma-generate-library

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

Community
Advanced