figma-generate-library

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

2|1|Updated May 17, 2026

Search Tags:#design system #figma #component library #variables #variants #code connect

Ready to run

npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-generate-library-rakibulism

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/figma-figma-generate-library
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-generate-library-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps teams turn a codebase into a structured, production-grade Figma design system without guessing token values, component states, or documentation layout.

Core Features & Use Cases

Design token foundations: Create variable collections, primitive tokens, semantic aliases, and code syntax mappings for web and native platforms.
Component library generation: Build components one at a time with auto-layout, variant matrices, component properties, and variable bindings.
Documentation and validation: Create page structures, foundations docs, screenshots, metadata checks, and code connection mappings to keep design and code aligned.
Use case: A design systems team can reconstruct Button, Input, and Card components from code, then validate the resulting library against existing Figma conventions and publish-ready standards.

Quick Start

Use the figma-generate-library skill to analyze the codebase, inspect the existing Figma file, and build the approved design system scope step by step.

Frequently Asked Questions about figma-generate-library

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

FAQPage Schema

How do I generate a Figma component library from an existing codebase?▼

Generate a Figma component library from code by analyzing design tokens, building components step-by-step with auto-layout and variants, and validating with screenshots. This process ensures your library matches production-ready standards without guessing token values.

What are design tokens in Figma and how do variables work?▼

Design tokens in Figma are managed through variable collections, primitive tokens, and semantic aliases. They map code syntax to Figma variables for web and native platforms, ensuring consistent theming across your component library.

How do I set up Figma Code Connect for my component variants?▼

Set up Figma Code Connect by generating metadata that maps component properties and variant matrices to their code implementations. This keeps your Figma components and codebase aligned for production use.

Can I reconstruct a Figma design system directly from my code?▼

Yes, you can reconstruct a Figma design system from code by inspecting your codebase and existing Figma file. The process builds approved foundations and components step by step, applying token analysis and variable bindings.

What is the best way to document Figma design system foundations?▼

Document Figma design system foundations by creating structured page layouts, foundations documentation, and metadata checks. Including screenshot validation ensures your design and code remain accurately reconciled.

Why are my Figma component states not matching my codebase?▼

Figma component states may mismatch your codebase due to missing variable bindings or incomplete variant matrices. Reconcile them by performing code-to-Figma validation workflows and generating Code Connect-ready metadata.