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

Ready to run

npx skills add https://github.com/eFounders/design-system-template --skill ds-figma

💬 Prompt for ChatGPT / Claude Chat▼

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.