skills.rest
iress
iressOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-to-ids

Translates Figma designs into React/TypeScript code with IDS components and tokens.

1|4|Updated Oct 8, 2025
Search Tags:#react#figma#tokens#design-system#mapping#ids#translate
One-click install
npx skills add https://github.com/iress/design-system --skill figma-to-ids
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-ids
Source: https://github.com/iress/design-system/tree/main/.agents/skills/figma-to-ids
Command: npx skills add https://github.com/iress/design-system --skill figma-to-ids

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate Figma design properties and structures into IDS component implementations, enabling AI agents to generate IDS-compatible code from design specs.

Core Features & Use Cases

  • Maps Figma components and auto-layout rules to IDS components (IressStack, IressButton, IressField, etc.).
  • Extracts design tokens (colors, spacing, typography) into IDS token references.
  • Generates React/TypeScript code with proper IDS imports and structure for reuse in dashboards and apps.

Quick Start

Translate a given Figma frame into IDS component code using React/TypeScript.

Frequently Asked Questions about figma-to-ids

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

FAQPage Schema
How do I translate Figma designs into React components?▼

To translate Figma designs into React components, map design properties and auto-layout structures to component implementations. This process extracts design tokens like colors and spacing, generating TypeScript code with proper imports for reuse in dashboards and apps.

How do I extract design tokens from Figma for a design system?▼

Extracting design tokens from Figma for a design system involves interpreting design specs to pull colors, spacing, and typography. These extracted tokens are then mapped to token references within your component code to maintain visual consistency.

Can I use Figma auto-layout rules to generate React TypeScript code?▼

Yes, you can use Figma auto-layout rules to generate React TypeScript code by mapping layout structures to designated stack components. This ensures the generated code accurately reflects the spatial relationships defined in the original Figma frame.

Does the Figma to IDS component mapping support exported design data?▼

The Figma to IDS component mapping supports both Figma MCP interpretations and exported design data. It processes these inputs to generate IDS-ready code across a broad set of UI components, applying extracted tokens and structural mappings.

What is the best way to map Figma properties to a design system?▼

The best way to map Figma properties to a design system is to translate frame structures directly into specific component implementations. This approach extracts design tokens and generates structured code with correct imports for immediate integration.

Related Skills

Explore More Design & Creative Skills→
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced
hasnahasna

react

Convert JSON UI specifications into React component trees with type-safe catalogs.

Official
Intermediate
Intense-VisionsIntense-Visions
18

Harness Design System

Organize design tokens, typography, and spacing into a centralized DTCG-compliant system.

Official
Advanced
bRRRITSCOLDbRRRITSCOLD
2

react-component-library

Generate a React component library from design tokens and Figma designs.

Community
Advanced