From 806dcd98732cdfde985766f3c510eb45119a03bd Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 4 Jun 2026 16:50:24 +0300 Subject: [PATCH 1/6] feat: introduce a skill for figma-to-app implementation --- skills/igniteui-angular-figma-to-app/SKILL.md | 631 ++++++++++++++++++ .../references/asset-extraction.md | 295 ++++++++ .../references/design-token-bridge.md | 292 ++++++++ .../references/figma-component-map.md | 219 ++++++ .../references/mcp-setup.md | 428 ++++++++++++ .../references/validation-patterns.md | 353 ++++++++++ 6 files changed, 2218 insertions(+) create mode 100644 skills/igniteui-angular-figma-to-app/SKILL.md create mode 100644 skills/igniteui-angular-figma-to-app/references/asset-extraction.md create mode 100644 skills/igniteui-angular-figma-to-app/references/design-token-bridge.md create mode 100644 skills/igniteui-angular-figma-to-app/references/figma-component-map.md create mode 100644 skills/igniteui-angular-figma-to-app/references/mcp-setup.md create mode 100644 skills/igniteui-angular-figma-to-app/references/validation-patterns.md diff --git a/skills/igniteui-angular-figma-to-app/SKILL.md b/skills/igniteui-angular-figma-to-app/SKILL.md new file mode 100644 index 00000000000..f3dfa604de4 --- /dev/null +++ b/skills/igniteui-angular-figma-to-app/SKILL.md @@ -0,0 +1,631 @@ +--- +name: igniteui-angular-figma-to-app +description: > + Translate Figma app screens designed using the Indigo.Design UI Kits into production + Angular applications with Ignite UI for Angular. The Indigo.Design UI Kits are Figma + component libraries available in four design-system variants — Material, Fluent, + Bootstrap, and Indigo — each with light and dark themes. Designers build their own + app frames in Figma using these kit libraries, and every kit component instance maps + 1:1 to an Ignite UI Angular control. The active kit variant also determines the + design system used in the Angular theme. Uses the Figma MCP for design data, the + Ignite UI CLI MCP for component docs, the Ignite UI Theming MCP for palette and + component-level styling, and the Playwright MCP for visual validation against the + original Figma design. Triggers on "implement this Figma design", "build from Figma", + "translate Figma to Angular", "implement this artboard", "generate app from Figma", + or when a Figma URL is shared with implementation intent in an Ignite UI Angular context. +user-invocable: true +--- + +# Ignite UI for Angular — Figma to App + +Translate Figma app screens built with the **Indigo.Design UI Kits** into production +Angular applications. Designers create their own frames in Figma using the Indigo.Design +component libraries as shared libraries — these kits come in four design-system variants +(**Material**, **Fluent**, **Bootstrap**, **Indigo**) with light and dark themes each. +Every component instance in the design maps 1:1 to an Ignite UI Angular control, and +the active kit variant directly determines which design system to use in the Angular +theme. + +This skill orchestrates four MCP servers: **Figma** (design data), **Ignite UI CLI** +(component docs), **Ignite UI Theming** (styles), and **Playwright** (visual validation). + +--- + +## MANDATORY AGENT PROTOCOL + +You **must** 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 — never guessed. + +Read [references/figma-component-map.md](references/figma-component-map.md) before Phase 2. +Read [references/design-token-bridge.md](references/design-token-bridge.md) before Phase 3. +Read [references/asset-extraction.md](references/asset-extraction.md) before Phase 1h. +Read [references/validation-patterns.md](references/validation-patterns.md) before Phase 5. + +--- + +## Phase 0 — Prerequisites + +### 0a: Verify All Four MCP Servers + +Run these checks **silently** in parallel. Each verification call is a no-op if the +server is not connected; do not surface raw errors to the user at this point. + +| Server | Verification call | Success signal | +| --------------------- | ---------------------------------------------- | ----------------------------------- | +| **Figma** | `figma_get_metadata` with no `nodeId` | Returns page list or selection info | +| **Ignite UI CLI** | `list_components` with `framework: "angular"` | Returns component list | +| **Ignite UI Theming** | `theming_detect_platform` | Returns platform info | +| **Playwright** | `playwright_browser_navigate` to `about:blank` | Navigates without error | + +If **any server fails**, stop and guide the user through setup **for that server only** +before continuing. Full setup instructions for all servers are in +[references/mcp-setup.md](references/mcp-setup.md). + +### 0b: Detect or Scaffold Angular Project + +Check whether the current working directory contains a valid Angular + Ignite UI project: + +``` +1. Does package.json exist? +2. Does it list "igniteui-angular" OR "@infragistics/igniteui-angular" in dependencies? +3. Is there a src/app/ directory? +``` + +**If a valid project is found:** + +- Note the package layout: `igniteui-angular` (open-source) or `@infragistics/igniteui-angular` (licensed) +- Note the Angular version from `package.json` +- Check whether `.vscode/mcp.json` exists in the project root. If it does not, run + `npx -y igniteui-cli ai-config` from the project root to auto-generate the Ignite UI + CLI MCP server configuration and copy the Agent Skills — this ensures `list_components` + and `get_doc` are wired up before Phase 2. +- Inform the user: "Found existing Ignite UI Angular project. Proceeding with the Figma workflow." + +**If no valid project is found:** +Present this message and wait for the user’s choice: + +> “No Ignite UI Angular project found in the current directory. Would you like me to +> scaffold a new one using the Ignite UI CLI before implementing the Figma design? +> +> `npx -y igniteui-cli new` creates a project pre-configured with Ignite UI Angular, +> theming already applied in `styles.scss`, and the Ignite UI CLI MCP server auto-wired +> into `.vscode/mcp.json`. No global install required. +> +> Alternatively, point me at an existing project directory.” + +If the user confirms scaffolding: + +1. Ask for a project name. If the user has already shared a Figma URL, suggest a name + derived from the Figma file name; otherwise prompt. + +2. Choose the project template based on the artboard structure. Because Phase 1 has + not run yet, use the lightest signal available: + + | Signal | Template to use | + | -------------------------------------------------------------------- | ------------------------------------------------ | + | User mentions a sidebar, navigation drawer, or multiple routed views | `side-nav` | + | No strong signal — default | `empty` (routing + home page; easiest to extend) | + +3. Create the project: + + ```bash + npx -y igniteui-cli new --framework=angular --type=igx-ts --template= + ``` + + This produces a standard Angular workspace fully compatible with `ng` commands, + and additionally: + - Installs and configures `igniteui-angular` with a default theme in `styles.scss` + - Generates `.vscode/mcp.json` with the Ignite UI CLI MCP server entry already set + - Copies Ignite UI Agent Skills to `.claude/skills/` + +4. `cd ` + +5. Open the auto-generated `.vscode/mcp.json` and **append** the Figma, Ignite UI + Theming, and Playwright server entries from `references/mcp-setup.md`. The Ignite + UI CLI entry is already present — do not duplicate it. + +6. Confirm the project starts cleanly: + ```bash + npm start + ``` + Then continue to Phase 1. + +--- + +## Phase 1 — Figma Design Exploration + +**Goal:** understand the full design structure and capture all data needed for +implementation and validation before writing any code. + +> **Rate-limit awareness:** Figma MCP calls count against plan quotas. Use +> `figma_get_metadata` first to discover structure cheaply, then call +> `figma_get_design_context` only for the artboards you will implement. + +### 1a: Discover Pages and Artboards + +Call `figma_get_metadata` with no `nodeId`. This returns the top-level page list. +Then call `figma_get_metadata` again for each page that looks relevant to get its +artboard tree. + +> If the user already shared a Figma URL, extract the `nodeId` from it: +> URL format: `https://figma.com/design/:fileKey/:name?node-id=1-2` → nodeId = `1:2` +> (replace `-` with `:`) + +### 1b: Select Target Artboards + +If there are multiple pages or artboards, show the user a list: + +> "I found these artboards in your Figma file: +> +> - Page 1: [list artboard names + node IDs] +> - Page 2: [list artboard names + node IDs] +> +> Which artboards should I implement? (You can say 'all' or list specific names.)" + +Wait for confirmation before proceeding. + +### 1c: Capture Reference Screenshots + +For each target artboard, call `figma_get_screenshot` and **save the screenshot and its +artboard dimensions** — you will compare against these in Phase 5. + +``` +figma_get_screenshot({ nodeId: "" }) +// Store: { nodeId, screenshot, width: , height: } +``` + +> Never skip this step. The screenshots are your ground truth for Phase 5 validation. + +### 1d: Extract Design Context + +For each target artboard, call `figma_get_design_context`: + +``` +figma_get_design_context({ + nodeId: "", + clientLanguages: "typescript", + clientFrameworks: "angular", + artifactType: "WEB_PAGE_OR_APP_SCREEN", + taskType: "CREATE_ARTIFACT" +}) +``` + +From the response, extract: + +- **Component layer names** — match against `references/figma-component-map.md` +- **Layout structure** — frame type (auto-layout vs fixed), direction, gap, padding +- **Typography** — font family, weights, sizes used in the design +- **Color values** — used fills, strokes, backgrounds in this artboard +- **Active kit variant** — look for library component references whose source file name + contains "Material", "Fluent", "Bootstrap", or "Indigo". This determines the + `designSystem` value for Phase 3 theming. If it cannot be determined here, defer + to Step 1e variable names and the visual heuristics in + [references/design-token-bridge.md](references/design-token-bridge.md). + +### 1e: Extract Design Tokens + +For each target artboard, call `figma_get_variable_defs`: + +``` +figma_get_variable_defs({ nodeId: "" }) +``` + +The response contains a map of variable names to values, e.g.: + +``` +"color/primary/500": "#6200EE" +"color/surface": "#FFFFFF" +"typography/body/font-family": "Roboto" +``` + +Use `references/design-token-bridge.md` to map color and typography variables to Ignite +UI theming inputs in Phase 3. Do **not** attempt to map Figma spacing or sizing values +— see `references/design-token-bridge.md § Spacing, Sizing, and Roundness` for why. + +### 1f: Check for Existing Code Connect Mappings + +Call `figma_get_code_connect_map` for each artboard. If mappings exist, they confirm +which Ignite UI Angular components correspond to which Figma nodes — use these to +validate or augment your component mapping in Phase 2. + +``` +figma_get_code_connect_map({ nodeId: "" }) +``` + +### 1g: Build the Decomposition Table + +Before writing any code, produce a decomposition table for **each artboard**: + +| Figma Layer Name | Visual Role | Ignite UI Component | Design Tokens Used | Data Type | +| -------------------------- | ------------------ | ----------------------- | ------------------- | --------------- | +| _e.g._ `_NavBar` | Top navigation bar | `IgxNavbarComponent` | `color/primary/500` | n/a | +| _e.g._ `_Grid/Default` | Data table | `IgxGridComponent` | `color/surface` | Tabular records | +| _e.g._ `_Button/Contained` | Primary CTA | `igxButton="contained"` | `color/primary/500` | n/a | + +Fallback to plain semantic HTML only when no Ignite UI component can match the layer +after consulting `references/figma-component-map.md`. Document the reason inline. + +Present the decomposition table to the user for review before proceeding. + +### 1h: Extract Image Assets + +Read [references/asset-extraction.md](references/asset-extraction.md) in full before +running any extraction. + +From the decomposition table, identify every layer that is a **static image asset** +(photo, background image, logo, custom icon, illustration) rather than an Ignite UI +component. Do **not** extract Indigo.Design UI Kit component instances — those become +Angular components. + +**Detection signals:** layer names containing `image`, `photo`, `hero`, `banner`, +`thumbnail`, `logo`, `illustration`, `bg`, `background`; large RECTANGLE nodes in +hero/banner positions; VECTOR/GROUP nodes for logos and custom icons. + +**Choose the extraction method based on asset type — always at the highest fidelity.** +Speed is not a criterion here; asset extraction is a one-time operation per build. + +| Asset type | Method | Reference section | +| ------------------------------------------------------------------ | ------------------------------------------------------------ | -------------------------------- | +| Image fill — photo, texture, raster uploaded to Figma | REST API `/v1/files/:key/images` → original source file | `asset-extraction.md § Method A` | +| Vector asset — logo, icon, illustration drawn in Figma | REST API `/v1/images/:key?format=svg&svg_outline_text=false` | `asset-extraction.md § Method B` | +| Raster node export — complex composition with no single `imageRef` | REST API `/v1/images/:key?format=png&scale=2` | `asset-extraction.md § Method B` | + +> **Do not use `figma_get_screenshot` or localhost URLs from `figma_get_design_context` +> as final assets.** Both produce lower-quality output (1× screen captures or +> session-scoped renderer URLs). See `asset-extraction.md § What NOT to use`. + +The Figma access token used for the MCP server is the same token required for all REST +API calls (`X-Figma-Token` header). Extract the file key from the Figma URL: +`https://figma.com/design/:fileKey/...` → `fileKey`. + +After downloading, save assets to: + +- `src/assets/images/` — raster images (PNG, JPG) +- `src/assets/icons/` — SVG icons and logos + +Build a concise asset manifest (see `asset-extraction.md § Build an Asset Manifest`) +so the implementation phase uses consistent paths. + +--- + +## Phase 2 — Component Discovery (Ignite UI CLI MCP) + +**Goal:** look up exact Angular selectors, inputs, outputs, and usage patterns for every +component identified in Phase 1. Never generate component code from memory. + +### 2a: Read the Component Map + +Read [references/figma-component-map.md](references/figma-component-map.md) in full. +Find the row for each Figma layer name from your Phase 1 decomposition table. +Each row gives you: + +- The Ignite UI Angular selector +- The `get_doc` key to call +- Key inputs and variants to configure + +### 2b: Fetch Component Docs + +For every component family you will use, call `get_doc`: + +``` +list_components({ framework: "angular" }) // once, to discover doc names +get_doc({ framework: "angular", name: "" }) // per component family +``` + +Call all `get_doc` requests **in a single parallel batch** — never sequentially. +Do **not** write any component code until you have read its doc. + +### 2c: Search for Feature Docs + +Use `search_docs` for feature-level questions raised by the artboard, for example: + +``` +search_docs({ framework: "angular", query: "row editing" }) +search_docs({ framework: "angular", query: "virtual scrolling" }) +search_docs({ framework: "angular", query: "column pinning" }) +``` + +Feature docs are mandatory when the artboard shows grid editing, filtering, sorting, +pinning, or other advanced feature states. + +### 2d: Document the Final Component Plan + +After reading all docs, confirm or revise the decomposition table from Phase 1g with: + +- Exact selectors (e.g. ``, ``) +- Exact import paths (never imported from the root barrel) +- Required peer modules or provider functions + +Present this updated plan to the user and wait for confirmation before Phase 3. + +--- + +## Phase 3 — Theme Generation (Ignite UI Theming MCP) + +**Goal:** produce Sass theming code that matches the Figma design's visual language +using design tokens extracted in Phase 1e. + +Read [references/design-token-bridge.md](references/design-token-bridge.md) in full +before running any theming tool. + +### 3a: Inspect Existing Theme (Guard) + +Open `src/styles.scss` (or the project's global stylesheet). Look for an active +`@include theme(...)` or `@include palette(...)` call. + +- **Theme found** → do **not** call `theming_create_theme` or `theming_create_palette` + unless the user explicitly asks for a global theme change. Reuse the existing palette. + Skip to step 3d. +- **No theme found** → proceed with 3b. + +### 3b: Resolve Design System + +You don't need to call `theming_detect_platform` to confirm the Angular package layout. We already did that in Phase 0. + +To determine the design system, use this precedence order: + +1. An explicit user request ("make it Material", "use Fluent") +2. An existing theme variant in the project +3. The Figma file's metadata and/or visual language (Material-like shadows → Material; sharp corners + flat surfaces → Bootstrap or Fluent; rounded cards → Indigo) + +Supported values: `material` (default), `bootstrap`, `fluent`, `indigo`. + +### 3c: Generate Global Theme + +Extract the following from Phase 1e variables using +[references/design-token-bridge.md](references/design-token-bridge.md): + +``` +primaryColor ← from "color/primary/500" or "primary/500" +secondaryColor ← from "color/secondary/500" or "secondary/500" +surfaceColor ← from "color/surface" or "surface/default" +fontFamily ← from "typography/font-family" or "typography/body/font-family" +``` + +Then call in order: + +``` +theming_create_palette({ + primaryColor, secondaryColor, surfaceColor, + platform: "angular", + licensed: +}) + +theming_create_elevations({ + preset: "material" // or "indigo" if design system is Indigo +}) + +theming_create_typography({ + fontFamily, + platform: "angular" +}) + +theming_create_theme({ + palette: , + elevations: , + typography: , + variant: "", + designSystem: "", + platform: "angular", + licensed: +}) +``` + +Apply the generated output to `src/styles.scss` as instructed in the tool's response. + +### 3d: Per-Component Token Mapping + +> **Scope:** applies only to core Ignite UI Angular components (grid, navbar, card, +> inputs, chips, list, etc.). Charts, maps, and gauges have no Sass tokens — configure +> those via component inputs only. + +For **every** Ignite UI core component in your plan, run this loop: + +1. `theming_get_component_design_tokens({ component: "" })` + — review all token names, types, and descriptions +2. Go back to the Phase 1e variable map and find Figma variables that correspond to + this component's surfaces (background, text, border, hover state) +3. `theming_create_component_theme({ component: "", platform: "angular", tokens: { } })` +4. Apply the generated `@include tokens()` block to the component's SCSS or to a + scoped block in `styles.scss` + +When a specific component needs a different density or spacing from the global default, +use `theming_set_size` or `theming_set_spacing` with the `component` parameter — this +scopes `--ig-size` or `--ig-spacing` to that component’s selector rather than applying +globally. For compound components, use `scope` with a sub-component selector. Only +apply these globally (`:root`) when the entire app has a clearly distinct density. +Leave `theming_set_roundness` at its default unless the user explicitly requests a +change. Never derive multiplier values from Figma pixel values. +See `references/design-token-bridge.md § Spacing, Sizing, and Roundness`. + +--- + +## Phase 4 — Implementation + +**Goal:** build the Angular view(s) that match the artboard decomposition from Phase 2. + +### Implementation Rules + +1. **Never generate component code without reading its `get_doc` result first** (Phase 2b) +2. **Section by section** — layout → navigation → primary content → secondary → data +3. Follow Angular standalone component conventions and AGENTS.md coding standards +4. Import components from their specific entry points, never from the root barrel +5. Use CSS Grid first to match Figma frame proportions; add Flexbox for sub-regions +6. Apply theming via the SCSS classes and tokens generated in Phase 3 +7. Use typed mock data that matches the design's density and domain +8. Keep layout, spacing, and typography in SCSS files — not inline styles +9. For DV components (charts, maps, gauges), set visual properties via component inputs + as described in [references/figma-component-map.md](references/figma-component-map.md) +10. After implementing each major section, save and check in the browser (if dev server is running) + +### Layout Strategy + +Translate Figma frame dimensions into CSS Grid first: + +```scss +// Artboard: 1440×900px, sidebar 280px, content 1160px +.app-layout { + display: grid; + grid-template-columns: 280px 1fr; + grid-template-rows: 64px 1fr; + min-height: 100vh; +} +``` + +Match desktop proportions before adding responsive breakpoints. + +### Angular Project Structure + +For a new view or page generated from a Figma artboard, create: + +``` +src/app/ + / + .component.ts ← standalone component + .component.html ← template + .component.scss ← styles + component theme overrides +``` + +Register the route in `app.routes.ts` when the project uses routing. + +--- + +## Phase 5 — Visual Validation (Playwright MCP) + +**Goal:** measure and compare the running app against the Figma reference screenshots +from Phase 1c. Use the measurement-driven loop — compare numbers, not impressions. + +Read [references/validation-patterns.md](references/validation-patterns.md) in full +before running any Playwright tool. + +### 5a: Ensure the Dev Server Is Running + +Ask the user for the local dev URL if not already known (default: `http://localhost:4200`). +Navigate to confirm the app is running: + +``` +playwright_browser_navigate({ url: "http://localhost:4200" }) +playwright_browser_console_messages() // check for startup errors +``` + +### 5b: Match Viewport to Artboard Dimensions + +Resize the browser to match the Figma artboard dimensions captured in Phase 1c: + +``` +playwright_browser_resize({ width: , height: }) +playwright_browser_navigate({ url: "" }) // re-navigate after resize +``` + +> **Always re-navigate after resize.** The browser may reset to `about:blank` on +> viewport change. This is a known Playwright MCP pitfall. + +### 5c: Capture and Compare Screenshots + +Take a browser screenshot and compare it visually against the Phase 1c Figma screenshot: + +``` +playwright_browser_take_screenshot({ type: "png" }) +``` + +Do a section-by-section visual comparison: top bar → sidebar → content → footer. + +### 5d: Measure Computed Styles + +For each section with visible differences, use `playwright_browser_evaluate` to extract +exact values. Pass code as a **plain JavaScript string**, not a TypeScript function +reference (see [references/validation-patterns.md](references/validation-patterns.md) +for why and for reusable measurement snippets): + +``` +playwright_browser_evaluate({ + script: ` + const el = document.querySelector(''); + if (!el) return { error: 'not found' }; + const s = getComputedStyle(el); + const r = el.getBoundingClientRect(); + return { + fontSize: s.fontSize, + backgroundColor: s.backgroundColor, + padding: s.padding, + gap: s.gap, + height: r.height, + width: r.width + }; + ` +}) +``` + +Compare the returned values against the Figma spec (from Phase 1d design context). + +### 5e: Classify and Report Mismatches + +| Severity | Category | Example | Action | +| ------------ | --------------- | ----------------------------------------- | --------------------------- | +| **Critical** | Missing element | Button in Figma, absent in code | Auto-fix | +| **Major** | Wrong component | Figma shows dropdown, code has text input | Auto-fix | +| **Minor** | Spacing off | 24px gap in Figma, 16px in code | Auto-fix if straightforward | +| **Cosmetic** | Color shade | `#333` vs `#2d2d2d` | Report only | + +For each mismatch, produce: + +``` +ISSUE: +LOCATION:
+FIGMA: +RENDERED: +SEVERITY: +FIX: +``` + +### 5f: Apply Corrections + +Fix Critical and Major issues immediately. After applying fixes, re-navigate and take a +fresh screenshot to confirm: + +``` +playwright_browser_navigate({ url: "" }) +playwright_browser_take_screenshot({ type: "png" }) +``` + +Repeat the measure → fix → re-verify loop until no Critical or Major issues remain. + +### 5g: Accessibility Snapshot + +Take an accessibility snapshot to verify the structural integrity of the view: + +``` +playwright_browser_snapshot() +``` + +Check that: + +- Interactive elements have accessible labels +- Headings follow a logical hierarchy +- Navigation landmarks are present + +--- + +## Critical Rules + +- **Phase 0 is not optional.** Never skip MCP verification. +- **Phase 2b before code.** Never write a selector you have not read from a doc. +- **Phase 1c screenshots are immutable ground truth.** Never overwrite them; always + compare against the original Figma state. +- **Re-navigate after resize** in Phase 5 to avoid Playwright's browser reset bug. +- **Rate-limit Figma MCP calls.** Use `figma_get_metadata` for discovery, then targeted + `figma_get_design_context` per artboard. Batch screenshot calls. +- **Fail fast on 3 retries.** If the same correction fails three times, stop, report + the issue to the user, and ask for guidance. +- **Never commit `package-lock.json`** or other lock files unintentionally. Ask before + changing any dependency manifest. + +--- + +## Related Skills + +- [`igniteui-angular-components`](../igniteui-angular-components/SKILL.md) — deep reference for non-grid components +- [`igniteui-angular-grids`](../igniteui-angular-grids/SKILL.md) — deep reference for grid, tree-grid, hierarchical-grid, pivot-grid +- [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md) — theming system architecture and advanced palette patterns +- [`igniteui-angular-generate-from-image-design`](../igniteui-angular-generate-from-image-design/SKILL.md) — fallback when no Figma file is available (static image input) diff --git a/skills/igniteui-angular-figma-to-app/references/asset-extraction.md b/skills/igniteui-angular-figma-to-app/references/asset-extraction.md new file mode 100644 index 00000000000..ca7967d35c0 --- /dev/null +++ b/skills/igniteui-angular-figma-to-app/references/asset-extraction.md @@ -0,0 +1,295 @@ +# Asset Extraction from Figma + +> **Part of the [`igniteui-angular-figma-to-app`](../SKILL.md) skill.** +> +> Use this file in Phase 1h to identify and extract image assets from Figma artboards +> before implementation. Read in full before calling any extraction tool. + +--- + +## Two Fundamentally Different Types of Image Assets + +Figma stores images in two distinct ways — understanding the difference is essential for choosing the right extraction method: + +| Type | What it is | Figma signal | Best extraction method | +| ---------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------- | +| **Image fill** | A photo, texture, or raster image dragged/pasted into Figma. Stored as a fill on a RECTANGLE or FRAME node. | Layer has fill of type `IMAGE`; `imageRef` in node data | REST API `/v1/files/:key/images` → original file | +| **Vector asset** | A logo, icon, or illustration drawn in Figma using vector tools. | Node type `VECTOR`, `BOOLEAN_OPERATION`, or `GROUP` of vectors | REST API `/v1/images/:key?format=svg` → clean SVG | + +Do **not** confuse these with Ignite UI component instances — those get implemented as Angular components, not extracted as assets. + +--- + +## Step 1 — Identify Image Nodes + +### Naming patterns to look for in `figma_get_metadata` + +Scan the XML returned by `figma_get_metadata` for layer names matching: + +| Naming pattern | Likely asset type | Action | +| -------------------------------------------------- | ----------------- | ------------------------------------------------------ | +| `_Image`, `_Photo`, `_Picture`, `image`, `photo` | Raster image fill | Extract as PNG | +| `_Hero`, `_Banner`, `_Cover`, `hero`, `banner` | Large raster fill | Extract as PNG (2× scale) | +| `_Thumbnail`, `_Avatar`, `_Illustration` | Raster image fill | Extract as PNG | +| `_Logo`, `_Brand`, `logo`, `brand` | Vector or raster | If vector: extract as SVG; if raster: PNG | +| `_Icon/` prefix (custom icons not in igx-icon set) | Custom SVG icon | Extract as SVG | +| `_Background`, `_Bg`, `bg`, `background` | Large raster fill | Extract as PNG (check if `igx-icon` can replace first) | +| `_Illustration`, `_Art`, `_Pattern` | Vector or raster | Classify before extracting | + +> **Ignore these** — do NOT extract them as image assets: +> +> - Any layer whose name starts with `_Button`, `_Input`, `_Grid`, `_Card`, etc. from +> the Indigo.Design UI Kit (those are component instances → implement as IgxXxx components) +> - `igx-icon` glyph nodes (use `` in Angular instead) +> - Artboard/frame boundaries themselves + +### Size heuristic + +Large rectangles (width > 200px or height > 200px) at key layout positions (hero area, sidebar background, card thumbnail slot) are almost always image fills. + +Small nodes (< 48×48px) named with icon-like names are usually SVG icons. + +### Confirm classification with design context + +For ambiguous nodes, call `figma_get_design_context` on the node and look for: + +- `background-image: url(...)` or `src="..."` in the reference code → image fill +- Inline SVG markup or `` with a `.svg` src → vector asset +- A localhost URL (e.g. `http://localhost:PORT/...`) in the response → image node confirmed; note the node ID for REST API extraction (do **not** use the localhost URL as the asset source) + +--- + +## Step 2 — Always Extract at the Highest Fidelity + +The extraction method is determined by **asset type** — never by speed or convenience. +Asset extraction is a one-time operation per build; sacrificing image quality here means shipping a blurry hero or a rasterized logo into production. + +| Asset type | Method | Why it is the highest fidelity | +| --------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | +| Image fill — photo, texture, or raster image uploaded to Figma | **Method A** — REST API original file (`/v1/files/:key/images`) | Returns the **actual source file** at its native resolution; never a re-render | +| Vector asset — logo, icon, or illustration drawn in Figma with vector tools | **Method B** — REST API SVG export (`/v1/images/:key?format=svg`) | Preserves infinite-scale vector fidelity; CSS-styleable; no rasterization loss | +| Raster node export — complex composition with no single `imageRef` | **Method B** — REST API PNG at 2× (`/v1/images/:key?format=png&scale=2`) | Rendered at double resolution; retina-ready | + +### What NOT to use + +Two MCP shortcuts appear convenient but produce strictly lower-quality output. +**Never use them for final assets.** + +| Method | Why it is insufficient | +| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `figma_get_screenshot` | Produces a 1× screen-capture — not the original file. Vectors are rasterized. May include drop shadows or siblings from the canvas. Use it only as a temporary visual reference for yourself while exploring the design, never as the extracted asset. | +| Localhost URLs from `figma_get_design_context` (e.g. `http://localhost:3845/...`) | Served by the Figma desktop app's in-memory renderer. Expire the moment the Figma app closes. Cannot be committed to the repo. Do not reflect original resolution or format. | + +If `figma_get_design_context` returns a localhost image URL, **use it only to confirm the node identity** — note the node ID, then immediately run Method A or B to get the real asset. Never put a localhost URL in an Angular template or SCSS file. + +--- + +### Method A — REST API: Original Image Fills + +Use this to download the **original raster images** that were uploaded to Figma. +Best for: photos, textures, raster logos — where you want the source file, not a rendering. + +#### Step A — Get all image fill URLs for the file + +```bash +curl -s \ + -H "X-Figma-Token: $FIGMA_TOKEN" \ + "https://api.figma.com/v1/files/$FILE_KEY/images" \ + | tee /tmp/figma_image_fills.json +``` + +Response format: + +```json +{ + "images": { + "abc123def": "https://s3.amazonaws.com/figma-alpha-api/img/...png", + "xyz789ghi": "https://s3.amazonaws.com/figma-alpha-api/img/...jpg" + } +} +``` + +The keys are **image reference IDs** (`imageRef`) — these appear in node fill data. + +#### Step B — Match imageRefs to node IDs + +To know which node uses which imageRef, call the REST API for the specific nodes: + +```bash +curl -s \ + -H "X-Figma-Token: $FIGMA_TOKEN" \ + "https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$NODE_IDS" \ + | tee /tmp/figma_nodes.json +``` + +In the response, look for: + +```json +"fills": [ + { + "type": "IMAGE", + "imageRef": "abc123def", + "scaleMode": "FILL" + } +] +``` + +Match `imageRef` → URL from Step A. + +#### Step C — Download to assets folder + +```bash +# Create the assets directory if it doesn't exist +mkdir -p src/assets/images + +# Download (example for a specific imageRef URL) +IMAGE_URL=$(jq -r '.images["abc123def"]' /tmp/figma_image_fills.json) +curl -sL "$IMAGE_URL" -o src/assets/images/hero-photo.jpg +``` + +> **URL expiry:** image fill URLs expire in **14 days**. Download them during the +> implementation session; do not store the URLs in code. + +--- + +### Method B — REST API: Node Export (any format, any scale) + +Use this to export **any node** as PNG, JPG, SVG, or PDF at any scale. +Best for: SVG icon/logo export, retina-quality PNG, vector illustrations. + +```bash +# Export multiple nodes at once (recommended — batches in one API call) +curl -s \ + -H "X-Figma-Token: $FIGMA_TOKEN" \ + "https://api.figma.com/v1/images/$FILE_KEY?ids=$NODE_IDS&format=png&scale=2&contents_only=true" \ + | tee /tmp/figma_export.json + +# Response: { "images": { "123:456": "https://s3.url...", "789:012": "https://..." } } +# Download each URL to the right path +jq -r '.images | to_entries[] | "\(.key)\t\(.value)"' /tmp/figma_export.json | \ +while IFS=$'\t' read -r nodeId url; do + # Convert nodeId to a safe filename: "123:456" → "node-123-456" + filename="node-$(echo "$nodeId" | tr ':' '-')" + curl -sL "$url" -o "src/assets/images/$filename.png" + echo "Downloaded $nodeId → src/assets/images/$filename.png" +done +``` + +**For SVG export** (logos, icons, illustrations): + +```bash +curl -s \ + -H "X-Figma-Token: $FIGMA_TOKEN" \ + "https://api.figma.com/v1/images/$FILE_KEY?ids=$NODE_IDS&format=svg&svg_outline_text=false&contents_only=true" \ + | tee /tmp/figma_svg_export.json + +# Download and save +jq -r '.images | to_entries[] | "\(.key)\t\(.value)"' /tmp/figma_svg_export.json | \ +while IFS=$'\t' read -r nodeId url; do + filename="node-$(echo "$nodeId" | tr ':' '-')" + curl -sL "$url" -o "src/assets/icons/$filename.svg" + echo "Downloaded $nodeId → src/assets/icons/$filename.svg" +done +``` + +> **Export URL expiry:** rendered export URLs expire in **30 days**. Download immediately. + +**Key parameters for `/v1/images/:key`:** + +| Parameter | Value | When to use | +| ------------------ | ---------------- | ------------------------------------------------------------------------------------ | +| `format` | `png` | Raster images, backgrounds, thumbnails — always pair with `scale=2` | +| `format` | `svg` | Logos, icons, vector illustrations — always the right choice for drawn vectors | +| `format` | `jpg` | Photos where file size matters and no transparency is needed — use `scale=2` | +| `scale` | `2` | **Always use this for PNG and JPG.** Retina-quality; HTML/CSS displays at half size. | +| `scale` | `1` | Only acceptable when the design is explicitly 1× and retina is not a concern. | +| `svg_outline_text` | `false` | Keeps SVG text as `` elements (selectable, smaller file) | +| `svg_outline_text` | `true` (default) | Converts text to paths (exact match to Figma rendering) | +| `contents_only` | `true` (default) | Renders the node in isolation | +| `contents_only` | `false` | Includes overlapping sibling content | + +--- + +## Step 3 — Build an Asset Manifest + +After extraction, maintain an asset manifest so the implementation phase knows exactly where each asset lives. Add it as a comment at the top of the component's SCSS file, or as a `_assets.ts` constant file: + +```typescript +// src/app/dashboard/_assets.ts — generated during Figma asset extraction + +export const DASHBOARD_ASSETS = { + // Figma node 123:456 — "Hero/Background" layer + heroBg: 'assets/images/hero-background.jpg', + + // Figma node 789:012 — "_Logo/Main" layer + logo: 'assets/icons/logo.svg', + + // Figma node 345:678 — "Card/Thumbnail" layer + cardThumbnail: 'assets/images/card-thumbnail.png', +} as const; +``` + +Name files descriptively based on the Figma layer name, not the Figma node ID. + +--- + +## Step 4 — Angular Usage Patterns + +### Static images via `ngOptimizedImage` + +For images where you control the `src` (photos, thumbnails, hero images): + +```html + +Dashboard hero background +``` + +Import `NgOptimizedImage` in the component's `imports` array. + +### Background images via SCSS + +For decorative background images (no alt text needed): + +```scss +.dashboard-hero { + background-image: url('/assets/images/hero-background.jpg'); + background-size: cover; + background-position: center; +} +``` + +### Inline SVG for logos/icons that need CSS control + +```html + +Company logo + + +``` + +### Igx-icon for Ignite UI icons (do NOT use custom assets) + +If the Figma design uses icons from the standard Ignite UI icon set (Material icons): + +```html +settings arrow_forward +``` + +Never extract these as SVG/PNG assets — they are rendered by the `igx-icon` component. + +--- + +## Pitfalls + +| Pitfall | Consequence | Fix | +| -------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------ | +| Using `figma_get_screenshot` as the extracted asset | 1× screen-capture — rasterizes vectors, loses original resolution | Always use Method A or B via the REST API | +| Using localhost URLs from `figma_get_design_context` as assets | Expire when Figma closes; can't be committed | Use localhost URLs only to identify the node ID, then run REST API extraction | +| Extracting Ignite UI component instances as images | Produces a static screenshot instead of an interactive component | Identify layer names from `figma-component-map.md`; those are components, not assets | +| Downloading SVGs with `svg_outline_text=true` (default) | All text converted to paths; larger file; no accessibility | Set `svg_outline_text=false` for logos and icons meant to be used in code | +| Exporting PNG at `scale=1` | Blurry on HiDPI/retina screens | Always use `scale=2`; reference at half size in HTML (`width` / 2) | +| Storing Figma export URLs in source code | URLs expire in 14–30 days; breaks production | Only store the local `src/assets/...` paths in code | +| Naming assets by node ID ("node-123-456.png") | Unmaintainable, breaks if Figma is reorganized | Name by layer purpose: `hero-background.jpg`, `company-logo.svg` | +| Extracting background colors as images | Inflates bundle size, breaks theming | Colors → use CSS custom properties or Ignite UI theming tokens | +| Not creating `src/assets/images/` and `src/assets/icons/` dirs first | `curl` write fails silently or to wrong path | Always run `mkdir -p src/assets/images src/assets/icons` first | +| Large SVGs from complex illustrations | Slow render, large bundle | Consider PNG for illustrations > 50KB SVG; SVG is best for logos/icons | diff --git a/skills/igniteui-angular-figma-to-app/references/design-token-bridge.md b/skills/igniteui-angular-figma-to-app/references/design-token-bridge.md new file mode 100644 index 00000000000..06619ee2c18 --- /dev/null +++ b/skills/igniteui-angular-figma-to-app/references/design-token-bridge.md @@ -0,0 +1,292 @@ +# Figma Variables → Ignite UI Angular Theming Bridge + +> **Part of the [`igniteui-angular-figma-to-app`](../SKILL.md) skill.** +> +> Use this file in Phase 3 to translate Figma variable values (from `figma_get_variable_defs`) +> into Ignite UI Theming MCP inputs. Read this file in full before calling any theming tool. + +--- + +## How the Indigo.Design UI Kits Organize Variables + +The **Indigo.Design UI Kits** are Figma component libraries published by Infragistics. +Designers build their own app frames in Figma using these kits as shared libraries. +The kits come in four design-system variants, each with light and dark themes: + +| Kit variant | Figma library name pattern | Ignite UI `designSystem` | +| ---------------------- | ----------------------------------------------- | ------------------------ | +| Material (most common) | `Indigo.Design UI Kit for Material` | `"material"` | +| Fluent | `Indigo.Design UI Kit for Fluent` | `"fluent"` | +| Bootstrap | `Indigo.Design UI Kit for Bootstrap` | `"bootstrap"` | +| Indigo | `Indigo.Design UI Kit` / `Indigo.Design System` | `"indigo"` | + +**Identifying the active kit variant** is the first task in Phase 3 because it sets +the `designSystem` parameter for `theming_create_theme`. Use these signals in order: + +1. **Library source name** — `figma_get_design_context` and `figma_get_metadata` responses include references to the source library. Look for the library file name in the component instance data (e.g. `"Indigo.Design UI Kit for Material"`). +2. **Variable collection name** — `figma_get_variable_defs` may return collection names that include the design system (e.g. `Material/color/primary`). +3. **Visual heuristics** — see the [Design System Detection table](#design-system-detection-from-figma) below when no library name is available. + +All four kit variants share the same variable naming conventions described below. The Ignite UI theming system uses Figma variable collections that mirror its own token structure: + +``` +Primitives collection → raw palette values (e.g. blue/500 = #6200EE) +Semantic collection → role-based aliases (e.g. color/primary = alias → blue/500) +Component collection → per-component overrides (e.g. button/background = alias → color/primary) +``` + +The `figma_get_variable_defs` response returns a flat map of resolved variable names to values. Use the sections below to identify which variables map to which theming inputs. + +--- + +## Global Palette Mapping + +### Primary Color + +| Figma Variable Pattern | Theming Input | Notes | +| ---------------------- | ------------------------------------------ | --------------------------------------- | +| `color/primary` | `primaryColor` in `theming_create_palette` | Use the resolved hex value | +| `primary/500` | `primaryColor` | The 500 shade is the seed color | +| `Primary/Default` | `primaryColor` | Alternative naming in some kit versions | +| `palette/primary/500` | `primaryColor` | Prefixed naming pattern | + +### Secondary / Accent Color + +| Figma Variable Pattern | Theming Input | Notes | +| ---------------------- | -------------------------------------------- | ---------------------------------- | +| `color/secondary` | `secondaryColor` in `theming_create_palette` | — | +| `secondary/500` | `secondaryColor` | — | +| `Secondary/Default` | `secondaryColor` | — | +| `color/accent` | `secondaryColor` | Some kit variants call it "accent" | + +### Surface / Background Color + +| Figma Variable Pattern | Theming Input | Notes | +| ---------------------- | ------------------------------------------ | ------------------- | +| `color/surface` | `surfaceColor` in `theming_create_palette` | The main background | +| `surface/default` | `surfaceColor` | — | +| `Surface` | `surfaceColor` | — | +| `color/background` | `surfaceColor` | Alternative naming | + +### Gray / Neutral Palette + +The Ignite UI theming system derives the gray scale automatically from the surface color. +You do **not** need to pass gray values to `theming_create_palette` explicitly unless you +need a custom gray family. If the Figma file has explicit gray variables, compare them +against the auto-generated palette after calling `theming_create_palette` and only add +a custom gray override if they differ significantly. + +### Semantic Status Colors + +| Figma Variable Pattern | Theming Input | Notes | +| -------------------------------- | ------------------------------------------ | -------- | +| `color/success` or `success/500` | `successColor` in `theming_create_palette` | Optional | +| `color/warning` or `warning/500` | `warningColor` in `theming_create_palette` | Optional | +| `color/error` or `error/500` | `errorColor` in `theming_create_palette` | Optional | +| `color/info` or `info/500` | `infoColor` in `theming_create_palette` | Optional | + +--- + +## Typography Mapping + +| Figma Variable Pattern | Theming Input | Notes | +| -------------------------------- | --------------------------------------------------- | ------------------------------------- | +| `typography/font-family` | `fontFamily` in `theming_create_typography` | Primary font | +| `typography/body/font-family` | `fontFamily` | Body font family | +| `typography/heading/font-family` | `fontFamily` | Use if heading font differs from body | +| `font/primary` | `fontFamily` | Alternative naming | +| `font/display` | Pass as `displayFontFamily` if the tool supports it | Display/headline font | + +> **Comma-separated font families** must be wrapped in parentheses when used in Sass +> typography mixins: +> +> ```scss +> // BAD — parsed as multiple Sass arguments +> @include typography($font-family: 'Roboto', 'Arial', sans-serif); +> // GOOD +> @include typography( +> $font-family: ( +> 'Roboto', +> 'Arial', +> sans-serif, +> ) +> ); +> ``` + +--- + +## Spacing, Sizing, and Roundness — Do Not Map Directly + +> **These Ignite UI theming tools are NOT equivalent to Figma spacing values.** +> Do not create a mapping between Figma pixel values and these tools. + +`theming_set_spacing` and `theming_set_roundness` accept **multipliers**, not pixel values. Passing a Figma `spacing/md = 16` as `theming_set_spacing({ spacing: 16 })` would produce a 1600% increase over the default — a catastrophic result. + +`theming_set_size` accepts a **density enum** (`small`, `medium`, `large`) — it controls how tightly packed components render, not a pixel measurement. + +### When to touch these tools (sparingly) + +| Tool | Use only when | Never use because | +| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | +| `theming_set_size` | The Figma design clearly and consistently uses a noticeably tighter or looser component density than the design system default — e.g. a data-dense admin UI vs a spacious marketing page | A Figma spacing variable happens to match the name "compact" | +| `theming_set_spacing` | Explicitly requested by the user or required to match a very specific density contract; default (1.0) should be the starting point | A Figma `spacing/*` pixel value looks similar to the multiplier number | +| `theming_set_roundness` | The entire app has a clearly distinct border-radius language from the design system default (e.g. fully squared off vs fully rounded) | A Figma `border-radius/md = 8` maps numerically to the multiplier | + +### The correct adjustment path + +When a specific component needs tighter or looser density or spacing, scope `--ig-size` +and `--ig-spacing` to that component’s selector — not raw CSS overrides, not +`::ng-deep`. Both `theming_set_size` and `theming_set_spacing` accept a `component` +parameter that generates exactly this scoped output: + +``` +// Scoped size for one component type +theming_set_size({ component: "calendar", size: "small", platform: "angular" }) +// → igx-calendar { --ig-size: var(--ig-size-small); } + +// Scoped spacing: 0.75 = 75% of default +theming_set_spacing({ component: "calendar", spacing: 0.75, platform: "angular" }) +// → igx-calendar { --ig-spacing: 0.75; } +``` + +For compound components, scope to a sub-component selector via the `scope` parameter: + +``` +theming_set_size({ scope: "igx-grid-toolbar", size: "small", platform: "angular" }) +``` + +Or set the CSS custom properties directly in SCSS: + +```scss +igx-calendar { + --ig-size: var(--ig-size-small); + --ig-spacing: 0.75; +} +``` + +The Indigo.Design kit’s component proportions are already calibrated for each design +system; start from the defaults and only adjust when there is a clear visual reason. + +--- + +## Light vs Dark Mode Detection + +Detect from the Figma artboard: + +| Figma Signal | Action | +| -------------------------------------------------------- | ---------------------------------------------------------------------- | +| Dark artboard background (`#121212`, `#1a1a1a`, similar) | Use `variant: "dark"` in `theming_create_theme` | +| Light artboard background (`#fff`, `#f5f5f5`, similar) | Use `variant: "light"` in `theming_create_theme` | +| Multiple artboards — one light, one dark | Generate both theme variants with a `prefers-color-scheme` media query | +| `color/mode` variable present | Its value (`light` or `dark`) is the authoritative signal | + +--- + +## Design System Detection from Figma + +| Figma Visual Signal | Likely Design System | `designSystem` Value | +| ------------------------------------------------------------------ | --------------------- | ----------------------- | +| Prominent shadows, rounded cards, ripple effects | Material Design | `"material"` | +| Flat surfaces, sharp corners, Segoe/Inter font | Microsoft Fluent | `"fluent"` | +| Component borders, Bootstrap-like grid | Bootstrap | `"bootstrap"` | +| Heavy use of purple/indigo accents, rounded corners | Infragistics Indigo | `"indigo"` | +| Explicit `$light-material-schema` or similar in Figma descriptions | Match the schema name | Use corresponding value | + +--- + +## Per-Component Token Resolution + +For each Ignite UI Angular component you use, follow this lookup order: + +### Step 1: Discover component tokens + +``` +theming_get_component_design_tokens({ component: "" }) +``` + +The result lists every available token with its name, type, and description. + +### Step 2: Match Figma variables to token names + +The **Indigo.Design UI Kits** use component-level variables that follow the pattern: + +``` +// +``` + +Examples: + +- `button/background` → token `background` in the button component +- `button/foreground` or `button/text-color` → token `foreground-color` +- `chip/background/selected` → token `selected-chip-color` +- `grid/header-background` → token `header-background` +- `navbar/background` → token `background` + +**Lookup process:** + +1. Take the Figma variable name (e.g. `button/background`) +2. Strip the component prefix (`background`) +3. Match it against the token list from `theming_get_component_design_tokens` +4. If no exact match, find the token whose description mentions the same visual role + +### Step 3: Common component token patterns + +| Component | Figma Variable | Likely Token Name | Notes | +| --------- | -------------------------- | ----------------------- | ----------------------- | +| Button | `button/background` | `background` | For `contained` variant | +| Button | `button/foreground` | `foreground-color` | Text color | +| Button | `button/border` | `border-color` | For `outlined` variant | +| Chip | `chip/background` | `background` | Default state | +| Chip | `chip/selected-background` | `selected-chip-color` | — | +| Grid | `grid/header/background` | `header-background` | — | +| Grid | `grid/row/background` | `content-background` | — | +| Grid | `grid/row/hover` | `row-hover-background` | — | +| Navbar | `navbar/background` | `background` | — | +| Input | `input/background` | `box-background` | Box/filled variant | +| Input | `input/border` | `border-color` | Line/border variant | +| Card | `card/background` | `background` | — | +| Card | `card/border` | `border-color` | — | +| List | `list/item/background` | `item-background` | — | +| List | `list/item/hover` | `item-hover-background` | — | +| Dialog | `dialog/background` | `background` | — | + +### Step 4: Generate component theme + +Pass **only tokens that differ from the global theme** to avoid over-specification: + +``` +theming_create_component_theme({ + component: "", + platform: "angular", + licensed: , + tokens: { + "background": "", + "foreground-color": "" + // only include tokens whose value differs from the generated global palette + } +}) +``` + +Apply the result using the `@include tokens()` call returned by the tool. + +--- + +## Variable Resolution Priority + +When multiple Figma variables could map to the same theming input, use this priority: + +1. **Component-scoped variable** (e.g. `button/background`) → per-component token +2. **Semantic role variable** (e.g. `color/primary`) → global palette input +3. **Primitive variable** (e.g. `primary/500`) → global palette seed color +4. **Raw hex/rgb value** (no variable) → extract directly from the design context + +--- + +## What to Skip + +Do **not** call theming tools for: + +- Chart, gauge, and map DV components → configure via component `[input]` bindings only +- Tile Manager and Dock Manager → these are web components with their own CSS custom properties +- Pure layout CSS (margins, grid columns, flex gaps) → write directly in SCSS +- Icon SVG fill colors → use `color` CSS property or the custom `--foreground` CSS property on the `igx-icon` host or its parent diff --git a/skills/igniteui-angular-figma-to-app/references/figma-component-map.md b/skills/igniteui-angular-figma-to-app/references/figma-component-map.md new file mode 100644 index 00000000000..8dc0f836b5e --- /dev/null +++ b/skills/igniteui-angular-figma-to-app/references/figma-component-map.md @@ -0,0 +1,219 @@ +# Indigo.Design UI Kit → Ignite UI Angular Component Map + +> **Part of the [`igniteui-angular-figma-to-app`](../SKILL.md) skill.** +> +> The **Indigo.Design UI Kits** are Figma component libraries (Material, Fluent, Bootstrap, +> Indigo variants) that designers use to build their app screens. Every component instance +> in a design file is drawn from one of these libraries and maps 1:1 to an Ignite UI +> Angular control. +> +> Use this file in Phase 2a to map Figma layer names — as they appear in the kit +> library — to Ignite UI Angular selectors, `get_doc` keys, and key inputs. When a +> layer name is not in this table, call `list_components` then `get_doc` on the closest +> match. + +--- + +## How to Use This File + +1. Find the kit component name (as it appears in the Figma layers panel or the + Indigo.Design kit library) in the **Kit Component Name** column. +2. Read the **Angular Selector** and **IgxXxx Class** for the template. +3. Use the **`get_doc` Key** to call `get_doc({ framework: "angular", name: "" })` + before writing any code. +4. Consult **Key Inputs / Variants** for the properties most commonly configured from + Figma variants. + +> The component names are identical across all four kit variants (Material, Fluent, +> Bootstrap, Indigo). The kit variant determines the theme style, not the component name. + +--- + +## Button Components + +| Kit Component Name | Angular Selector | IgxXxx Class | `get_doc` Key | Key Inputs / Variants | +| -------------------------------------- | ------------------------------------ | ------------------------- | -------------- | ---------------------------------------------------------- | +| `_Button/Flat` | `