figma-generate-library

Synchronize code-based design tokens and components with a live Figma design system.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/andebet07-oss/MemoriaShare_C --skill figma-generate-library-andebet07-oss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-library
Source: https://github.com/andebet07-oss/MemoriaShare_C/tree/main/skills/skills-main/.claude-plugin/mcp-server-guide-main/skills/figma-generate-library
Command: npx skills add https://github.com/andebet07-oss/MemoriaShare_C --skill figma-generate-library-andebet07-oss

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill facilitates translating code-based design tokens and components into a cohesive Figma design system, ensuring alignment between implementation and design across the entire lifecycle.

Core Features & Use Cases

  • Token-to-component orchestration across 0–4 phases, including foundations, components, and documentation.
  • End-to-end workflow wiring: token creation, component scaffolding, theming, and Code Connect integration.
  • Safe, idempotent builds with checkpoint-driven progress and recovery using a shared plugin data state ledger.

Quick Start

Start the workflow by loading the Figma MCP skill and beginning Phase 0: Discovery, then follow Phases 1 through 4 in order to build and validate a complete design system in Figma.

Frequently Asked Questions about figma-generate-library

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

FAQPage Schema
How do I synchronize code-based design tokens with a live Figma design system?▼

You can synchronize code-based design tokens with a live Figma design system by using a checkpoint-driven workflow that orchestrates token creation, component scaffolding, and theming deterministically. This ensures alignment between code and design.

What is the best way to wire Figma components using Code Connect?▼

Wiring Figma components with Code Connect is best handled through a phased orchestration workflow that maps code components to Figma. This deterministic process uses a persistent state ledger to ensure safe, idempotent builds and recovery.

How does the checkpoint-driven workflow work for Figma design system generation?▼

The checkpoint-driven workflow operates across Discovery through QA phases, using a persistent state ledger and frontmatter to track progress. This mechanism ensures idempotent builds, allowing safe recovery and deterministic component wiring without repeating completed steps.

Do I need the Figma MCP workflow to orchestrate design tokens and components?▼

Yes, the Figma MCP workflow is required to enable deterministic token creation and component scaffolding. It works in conjunction with frontmatter and a persistent state ledger to ensure safe, idempotent builds and recovery across all phases.

Can I use this workflow to build a complete Figma design system from code?▼

Yes, you can build a complete Figma design system from code by following Phases 0 through 4 in order. This end-to-end workflow covers foundations, components, documentation, theming, and Code Connect integration for full lifecycle alignment.

What are the limitations of automating Figma design system orchestration from code?▼

The main limitation is the strict dependency on the MCP workflow, frontmatter, and a persistent state ledger to ensure idempotent builds. Deviating from the phased Discovery through QA workflow or bypassing the state ledger risks breaking deterministic recovery and safe synchronization.