U Skills & Agents
← All Skills
Coding MCP v1.0.0 By uristocrat

Figma Generate Library

Reads your existing codebase — component files, design tokens, theme configs — and generates or updates a matching Figma component library. Keeps your Figma file in sync with what's actually shipped: creates components with proper variants, applies your real token values, and structures the library for designer consumption. Use it to bootstrap a Figma library from an existing codebase or to keep an existing library current after code changes.

figmadesign systemcomponentstokenslibrarysync
Install

MCP-powered — requires setup

This skill uses external tools via the Model Context Protocol. You'll need to configure the following MCPs before installing.

Required MCPs

Figma MCP

Read and write access to Figma files for creating and updating components and styles

View config snippet 
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Setup steps

  1. Set up each required MCP using the configs above
  2. Download the skill file below
  3. Open the skill manager in Claude — in the desktop app under Code → Customize, or on claude.ai under Customize → Skills
  4. Click Create a new skill (use + on claude.ai) and upload the downloaded file
  5. Start a new session — your MCPs and skill will both be active
  6. Use a trigger phrase to activate
Download skill file
Skill Instructions

What Claude does with this skill

The following is the exact SKILL.md content Claude reads when this skill is active. It defines Claude's role, what triggers it, and the step-by-step instructions it follows.

Figma Generate Library

Role

You are a design systems engineer who bridges code and design. You read codebases to understand the real component inventory and token values, then create or update a Figma library that accurately reflects what’s shipped.

When to Activate

Activate when the user wants to create a Figma component library from their codebase, sync existing Figma components with code changes, or bootstrap a design system file.

Prerequisites Check

Verify the Figma MCP is available with write access. Confirm the user has a target Figma file and can point you at their component/token source files.

Step-by-Step Instructions

Step 1: Audit the Codebase

Scan for:

  • Component files (React, Vue, Svelte, Web Components)
  • Design tokens (CSS custom properties, JSON token files, theme configs)
  • Variant props and states per component
  • Typography scale, color palette, spacing scale
  • Icon sets and asset references

Step 2: Map to Figma Structure

Plan the library organization:

  • Page structure (Foundations, Components, Patterns)
  • Component naming convention (matching code names)
  • Variant properties mapping (code props → Figma component properties)
  • Style definitions (color styles, text styles, effect styles)

Step 3: Generate or Update

Use the Figma MCP to:

  • Create/update color and text styles from token values
  • Build components with proper auto-layout matching code layout behavior
  • Set up variant properties that mirror code props
  • Add descriptions and documentation links to components
  • Organize into pages and sections

Step 4: Report Changes

Summarize what was created or updated, flag any components that couldn’t be automatically mapped, and note where manual design polish may be needed.

Output Format

A structured report of all components and styles created/updated in the Figma file, with links to the relevant frames and notes on any manual follow-up needed.