skills.rest
ryan-nguyen-01
ryan-nguyen-01COMMUNITY
Explore all skills by this author →
GitHub

skill-ui-figma

Extract design tokens and translate Figma designs into CSS-ready components.

4|Updated Mar 31, 2026
Search Tags:#css#figma#handoff#tokens#design-to-code#design-tokens#component-mapping
One-click install
npx skills add https://github.com/ryan-nguyen-01/agent-platform --skill skill-ui-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-ui-figma
Source: https://github.com/ryan-nguyen-01/agent-platform/tree/main/.claude/skills/skill-ui-figma
Command: npx skills add https://github.com/ryan-nguyen-01/agent-platform --skill skill-ui-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate Figma designs into code-ready components by automating token extraction, component mapping, and CSS generation.

Core Features & Use Cases

  • Extract design tokens (colors, typography, spacing) from Figma
  • Map Figma components to code components across UI libraries
  • Translate Auto Layout to CSS (flexbox/grid) and support responsive variants
  • Provide a streamlined handoff workflow between designers and developers

Quick Start

Provide a Figma URL to start extracting tokens, mapping components, and generating CSS-ready outputs.

Frequently Asked Questions about skill-ui-figma

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

FAQPage Schema
How do I extract design tokens from Figma for CSS?▼

Extract design tokens from Figma by providing a Figma URL to automatically pull colors, typography, and spacing variables. This process translates visual properties into structured design tokens ready for CSS generation.

What is the best way to translate Figma Auto Layout to CSS?▼

The best way to translate Figma Auto Layout to CSS is by mapping flexbox and grid properties directly from the design structure. This conversion supports responsive variants to ensure components adapt correctly across viewport sizes.

How do I map Figma components to code components?▼

Map Figma components to code components by matching design elements to existing UI library structures. This component mapping ensures that visual designs translate accurately into functional, code-ready UI elements across web and mobile platforms.

Can I use this Figma design-to-code workflow for mobile platforms?▼

Yes, you can use this Figma design-to-code workflow for mobile platforms. The token extraction and component mapping processes apply across both web and mobile environments, ensuring consistent design translation.

Do I need a specific Figma URL to start the design handoff?▼

Yes, you need to provide a specific Figma URL to start the design handoff. Supplying the link allows the system to access the file, extract tokens, map components, and generate CSS-ready outputs.

Related Skills

Explore More Design & Creative Skills→
allofmengallofmeng
12

implement-design

Translate Figma designs into UI code using design tokens and MCP context.

Community
Advanced
CallMeLuigiv2CallMeLuigiv2

tailwind-css-patterns

Implement Tailwind CSS utility-first patterns for responsive layouts and components.

Community
Intermediate
markus41markus41
18

css-generation

Generate CSS variables, Tailwind configurations, and styled-components themes from design tokens.

Community
Intermediate
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate