skills.rest
d0d012
d0d012COMMUNITY
Explore all skills by this author →
GitHub

figma-design

Extract tokens, styles, and constraints from Figma design files.

9|Updated Apr 11, 2026
Search Tags:#workflow#figma#tokens#design-system#code-generation#styles#component-instances
One-click install
npx skills add https://github.com/d0d012/claude-trim --skill figma-design-d0d012
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-design
Source: https://github.com/d0d012/claude-trim/tree/main/testdata/demo/plugins/figma-plugin/skills/figma-design
Command: npx skills add https://github.com/d0d012/claude-trim --skill figma-design-d0d012

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inspect Figma designs, extract tokens, generate component code, and sync design decisions to your codebase.

Core Features & Use Cases

  • Load design system components, tokens, and styles from a target Figma file using the designated workflows.
  • Discover and map components, variables, and styles across libraries to produce code-ready artifacts.
  • Generate component instances and style bindings that reflect the design system in code, enabling rapid UI implementation.

Quick Start

Load your Figma file and begin building a screen using the design system components and tokens.

Frequently Asked Questions about figma-design

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

FAQPage Schema
How do I convert Figma designs to code-ready components?▼

Extracting Figma design tokens, variables, and styles requires loading your design system rules via a tool like figma-use, which identifies components and applies bound variables to reproduce the UI accurately in code.

How do I extract design tokens from a Figma file?▼

Extracting Figma design tokens, variables, and styles requires loading your design system rules via a tool like figma-use, which identifies components and applies bound variables to reproduce the UI accurately in code.

Do I need a published Figma library to generate component instances?▼

Yes, you need a published Figma library to map components, variables, and styles across libraries, which is required to produce code-ready artifacts and generate accurate component instances.

Can I sync Figma text and effect styles directly into my codebase?▼

Yes, you can sync Figma text and effect styles into your codebase by applying bound variables and extracted styles to generate component instances that reflect the design system constraints in code.

What is the best way to map Figma variables across multiple design libraries?▼

The best way to map Figma variables across libraries is to load the design system rules to discover and map components, variables, and styles, producing code-ready artifacts for UI teams.

Why are my Figma style bindings not reflecting in the generated code?▼

Figma style bindings may not reflect in generated code if the design system rules were not loaded via figma-use beforehand, preventing the accurate extraction and application of bound variables and text styles.

Related Skills

Explore More Design & Creative Skills→
warpdotdevwarpdotdev
64.1k

figma-generate-design

Automates creation and updating of full-page screens in Figma using published design system components and tokens.

Official
Advanced
Eva813Eva813
2

figma-implement-design

Translate Figma designs into UI code with design system tokens.

Community
Advanced
ahandselahandsel
1

figma-generate-design

Generate Figma screens from code and UI descriptions using design system components.

Community
Advanced
devkenidevkeni
1

figma-implement-design

Translate Figma designs into frontend code using Figma MCP workflows and design tokens.

Community
Advanced