igniteui-angular-figma-to-app
Ignite UI for Angular — Figma to App
Translate Figma app screens into production Angular applications built with Ignite UI for Angular. The skill accepts designs from three kinds of source. A single file often mixes them, so every component is classified individually (Phase 1f):
| Tier | Source | How it maps to Ignite UI |
|---|---|---|
| A | The Infragistics Indigo.Design UI Kits (Material, Fluent, Bootstrap, Indigo variants, light and dark) | Directly, by kit layer name. The kit variant is the Ignite UI design system. |
| B | Any other component library: public kits such as Material 3, Fluent 2, Bootstrap, shadcn/ui, Untitled UI, or Ant, and in-house design systems | Variant properties are normalized to a canonical role, then mapped. The theme is fitted to a closest baseline design system. |
| C | Plain frames, groups, and detached instances | The role is inferred from structure and visuals, with lower confidence, and the user confirms it. |
Tier A gives the highest fidelity for the least effort. Tiers B and C reach high fidelity through token overrides, and record the remaining anatomy deltas (structural differences between the design's components and Ignite UI's) for the user to approve instead of hiding them.
This skill orchestrates four MCP servers: Figma (design data), Ignite UI CLI (component docs), Ignite UI Theming (styles), and Playwright (visual validation).
Required Workflow
Complete all phases in order — do not skip phases or generate component code from memory. Every component selector, input name, and import path must come from get_doc results or, where no doc exists in the catalog, from the igniteui-angular-components / igniteui-angular-grids skill reference files — never guessed.