Skill: Figma to IDS Translation

Purpose

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.

Process

1. Analyse Figma structure — Identify frames, auto-layout, and component instances
2. Map components — Match Figma component names/variants to IDS components
3. Extract tokens — Convert Figma design values to IDS design token references
4. Generate code — Produce clean, minimal React/TypeScript with proper IDS imports. Use the fewest components possible — check whether parent components already handle layout before adding IressInline/IressStack wrappers. Never wrap a single child in a layout component.
5. Verify output — Check that all imports resolve, no raw HTML is used where IDS components exist, grid layouts use responsive span values, and no common anti-patterns are present (disabled buttons, slot attributes, redundant textStyle)

Important: IDS v6 is currently in beta. Install with the @beta tag:

npm install @iress-oss/ids-components@beta
npm install @iress-oss/ids-tokens@beta  # if using tokens directly (e.g. cssVars or CSS vars import)