igniteui-wc-figma-to-app
Ignite UI for Web Components — Figma to App
Translate Figma app screens into production Web Components applications built with Ignite UI. The skill accepts designs from three kinds of source. A single file often mixes them, so classify every component separately (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 | The skill normalizes the variant properties to a canonical role, then maps the role. It fits the theme to the closest baseline design system. |
| C | Plain frames, groups, and detached instances | The skill infers the role from structure and visuals, with lower confidence. The user confirms the role. |
Tier A gives the highest fidelity for the least effort. For Tiers B and C, token overrides give high fidelity. Do not hide the remaining anatomy deltas (structural differences between the design's components and Ignite UI's). Record them for the user to approve.
Web Components ≠ Angular. The frameworks share the kits, but not the implementation. The tags are
igc-*. You must register components withdefineComponents(...). Theming is CSS-custom-property-first (Sass is optional). Every component renders in shadow DOM, which changes how you style and how you measure. Each phase identifies these differences.
Required Workflow
Complete all phases in order. Do not skip phases, and do not generate component code from memory. Take every tag name, attribute, slot, and import path from get_doc / get_api_reference results. The reference files of the sibling igniteui-wc-choose-components skill are also a valid source. Never guess these values.