skills.rest
eFounders
eFoundersOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ds-figma

Generate or refresh Figma design system components from a codebase.

Updated Jun 17, 2026
Search Tags:#design system#component generation#Figma#codebase synchronization#code-driven design
One-click install
npx skills add https://github.com/eFounders/design-system-template --skill ds-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ds-figma
Source: https://github.com/eFounders/design-system-template/tree/main/skills/ds-figma
Command: npx skills add https://github.com/eFounders/design-system-template --skill ds-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-api, and includes scripts (resource) components.

What problem does it solve?

The ds-figma Skill addresses the need for maintaining a consistent and up-to-date Figma design system that mirrors a project's codebase, ensuring that visual design remains in sync with the source of truth.

Core Features & Use Cases

  • Code-Driven Design: Automatically generates or updates Figma components based on the code, ensuring visual consistency.
  • Legacy DS Replacement: Generates a new Figma library without merging with an existing one, preventing duplicates and broken links.
  • Component Linking: Ensures each Figma component corresponds to its real code component, with the option to flag gaps for future addition.

Quick Start

Run 'ds-figma' to generate or refresh your Figma design system from your codebase.

Frequently Asked Questions about ds-figma

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

FAQPage Schema
How do I generate a Figma design system from my codebase?▼

To generate a Figma design system from your codebase, you use code-driven design automation that maps source code components to Figma, ensuring visual consistency. This requires Figma API access and relevant codebase information for accurate component mapping.

What is code-driven design synchronization in Figma?▼

Code-driven design synchronization aligns your visual design with your source code, treating the codebase as the source of truth. It automatically generates or updates Figma components to mirror your project's code, preventing visual drift.

Do I need Figma API access to sync components with my codebase?▼

Yes, you need Figma API access to sync components with your codebase. The API provides the necessary bridge for component generation and linking, allowing the system to map your source code directly to Figma components.

Can I replace a legacy Figma design system without creating duplicates?▼

Yes, you can replace a legacy Figma design system without creating duplicates. The tool generates a new Figma library independently rather than merging with an existing one, which prevents duplicates and avoids broken component links.

How does component linking work when refreshing a Figma library from code?▼

When refreshing a Figma library from code, component linking ensures each Figma component corresponds to its real code component. It flags gaps where code components lack Figma equivalents, marking them for future addition.

Related Skills

Explore More Design & Creative Skills→
alexandephiliaalexandephilia

codebase-context

Index project codebases to generate stack, structure, and component inventories.

Community
Intermediate
PMDevSolutionsPMDevSolutions
7

export-design-system

Convert generated design assets into publishable pnpm workspaces with Changesets versioning support.

Official
Advanced
MesteriisMesteriis

code-to-figma

Synchronize UI code with Figma via component mapping and token propagation.

Community
Intermediate
wiltaylorwiltaylor

edit-figma-design

Convert natural language descriptions into Figma designs aligned with design systems.

Community
Intermediate