·figma-to-ids
*

figma-to-ids

Translate Figma design properties and structures into IDS (Iress Design System) component implementations. This skill helps AI agents interpret Figma design metadata (from tools like Figma MCP or exported design specs) and produce accurate IDS code.

13Installs·6Trend·@iress

Installation

$npx skills add https://github.com/iress/design-system --skill figma-to-ids

How to Install figma-to-ids

Quickly install figma-to-ids AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/iress/design-system --skill figma-to-ids
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: iress/design-system.

SKILL.md

View raw

Translate Figma design properties and structures into IDS (Iress Design System) component implementations. This skill helps AI agents interpret Figma design metadata (from tools like Figma MCP or exported design specs) and produce accurate IDS code.

| Auto-layout (vertical) | IressStack | Default direction is vertical | | Auto-layout (horizontal) | IressInline | Horizontal flow with wrapping | | Auto-layout gap | gap prop | Map px to spacing token (see below) | | Auto-layout padding | p, px, py props | Map px to spacing token |

| Auto-layout alignment | horizontalAlign / verticalAlign | Maps to start, center, end | | Grid layout | IressRow + IressCol | Use span prop for column widths |

Translate Figma design properties and structures into IDS (Iress Design System) component implementations. This skill helps AI agents interpret Figma design metadata (from tools like Figma MCP or exported design specs) and produce accurate IDS code. Source: iress/design-system.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/iress/design-system --skill figma-to-ids
Category
*Creative Media
Verified
First Seen
2026-03-10
Updated
2026-03-11

Browse more skills from iress/design-system

Quick answers

What is figma-to-ids?

Translate Figma design properties and structures into IDS (Iress Design System) component implementations. This skill helps AI agents interpret Figma design metadata (from tools like Figma MCP or exported design specs) and produce accurate IDS code. Source: iress/design-system.

How do I install figma-to-ids?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/iress/design-system --skill figma-to-ids Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/iress/design-system

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-03-10