skills.rest
etylsarin
etylsarinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-design

Extract design tokens and convert Figma designs into React, Vue, or HTML/CSS code.

59|12|Updated Feb 26, 2026
Search Tags:#ui#figma#design-to-code#code-generation#design-tokens#design-systems#component-inspection
One-click install
npx skills add https://github.com/etylsarin/opencastle --skill figma-design-etylsarin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-design
Source: https://github.com/etylsarin/opencastle/tree/main/src/orchestrator/plugins/figma
Command: npx skills add https://github.com/etylsarin/opencastle --skill figma-design-etylsarin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert Figma designs into code by extracting tokens, component specs, and asset export to streamline handoffs and implementation.

Core Features & Use Cases

  • Design-to-code translation for UI components
  • Design token extraction for typography, color, and spacing
  • Component inspection and asset export for design systems and handoffs

Quick Start

Translate a selected Figma frame into code by extracting tokens and mapping components to your UI library.

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 using design tokens?▼

To convert Figma designs to code, the Skill extracts design tokens for typography, color, and spacing, mapping them to your UI library to ensure consistency across implementations.

Can I extract design tokens for a React component from a Figma frame?▼

Yes, you can extract design tokens for React components by inspecting Figma frames and mapping typography, color, and spacing tokens to your design system specifications.

What is the best way to extract design tokens for a Vue design system?▼

The best way to extract design tokens for a Vue design system is by inspecting Figma components to map spacing, typography, and color directly into your code artifacts.

Does the Figma to code conversion work with plain HTML and CSS?▼

Yes, Figma to code conversion supports plain HTML and CSS by extracting component specs and design tokens to streamline the handoff and implementation process.

How do I export Figma assets and component specs for a design system handoff?▼

You can export Figma assets and component specs by inspecting the selected frame to translate its design tokens and structure into consistent code artifacts for handoffs.

Related Skills

Explore More Design & Creative Skills→
ilandahanilandahan
9

atomic-design

Extract Figma design tokens and scaffold atomic UI components.

Community
Advanced
EnztunEnztun

ui-ux-pro-max

Generate UI layouts, UX flows, and design systems for web frameworks.

Community
Advanced
Niksh-HiremathNiksh-Hiremath

normalize

Align frontend UI implementations with design-system tokens and guidelines.

Community
Advanced
oakossoakoss
14

figma-developer

Extract design tokens, icons, and components from Figma via REST API.

Official
Advanced