igniteui-angular-figma-to-app

license	MIT
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).

---

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.

Read references/figma-component-map.md before Phase 2. Read references/design-token-bridge.md before Phase 3. Read references/asset-extraction.md before Phase 1h. Read references/validation-patterns.md before Phase 5.

---

Phase 0 — Prerequisites

Tool naming: this skill writes MCP tool names as <server>_<tool> (e.g. figma_get_metadata, theming_create_theme). The exact name depends on the client — Claude Code exposes them as mcp__<server>__<tool> (e.g. mcp__figma__get_metadata). Match by the tool's base name on whatever server is connected.

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. For igniteui-cli and igniteui-theming, the fastest path is npx -y igniteui-cli ai-config, which configures both. Full setup instructions for all servers are in references/mcp-setup.md. Newly configured MCP servers require an editor/session reload before their tools appear.

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 the MCP configuration for all four required server entries — figma, igniteui-cli, igniteui-theming, and playwright (in .vscode/mcp.json or the client's equivalent). If igniteui-cli or igniteui-theming is missing, run npx -y igniteui-cli ai-config from the project root — it configures both servers and copies the Agent Skills, preserving existing entries. Add missing figma and playwright entries from references/mcp-setup.md. Projects scaffolded with npx igniteui-cli new have igniteui-cli pre-wired but typically lack the other three. A reload is required before newly configured servers' tools appear.
• 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:

   npx -y igniteui-cli new <project-name> --framework=angular --type=igx-ts --template=<empty|side-nav>
   

   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 <project-name>

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:

   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 (indicative, subject to change — verify against the user's current Figma plan: Starter 6 calls/month, Organization 200/day, Enterprise 600/day).

Estimated call budget for a 5-artboard design: figma_get_metadata ×2 + figma_get_screenshot ×5 + figma_get_design_context ×5 + figma_get_variable_defs ×1 + figma_get_code_connect_map ×5 = ~18 calls. Starter plan users will exceed their monthly quota in a single session. Strategies:

1. Call figma_get_variable_defs only once for the root page (variables are file-scoped, not artboard-scoped — calling it per artboard wastes quota on duplicate data).
2. Prioritize figma_get_design_context over additional screenshots if quota is tight.
3. For large files, consider implementing one artboard per monthly budget cycle.

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

IMPORTANT — Figma MCP is session-bound. The figma_get_screenshot tool returns a screenshot of the currently selected node in the Figma desktop app, regardless of any nodeId parameter passed. To capture each artboard, you must ask the user to navigate to it in Figma first.

For each target artboard:

1. Ask the user: "In Figma, please click the [Artboard Name] frame to select it, then confirm."
2. Wait for confirmation, then call:

   figma_get_screenshot({})
   // Store: { artboardName, screenshotFile, width: <from metadata>, height: <from metadata> }
   

3. Repeat for each artboard — do not batch these calls before the user navigates.

After all artboards are captured, confirm the count:

"I have N reference screenshots: [list artboard names]. Proceeding to design context extraction." If any are missing, navigate to that artboard in Figma and recapture before continuing.

Never skip this step. The screenshots are your ground truth for Phase 5 validation.

1d: Extract Design Context

IMPORTANT — Figma MCP is session-bound. The figma_get_design_context tool returns context for the currently selected node in the Figma desktop app. You must ask the user to navigate to each artboard before calling this tool.

Output format: figma_get_design_context returns React + Tailwind CSS code, not structured Angular metadata. The response is explicitly tagged "SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack." Do not copy the React code into Angular files. Instead, read the JSX to extract the information below. Image localhost URLs in the output are session-scoped previews — do not use them as final assets (see Phase 1h and references/asset-extraction.md).

For each target artboard:

1. Ask the user: "In Figma, please click the [Artboard Name] frame to select it, then confirm."

2. Wait for confirmation, then call:

   figma_get_design_context({
     clientLanguages: "typescript",
     clientFrameworks: "angular",
     artifactType: "WEB_PAGE_OR_APP_SCREEN",
     taskType: "CREATE_ARTIFACT"
   })
   

3. From the React+Tailwind output, extract:

   • Component layer names (data-name attributes in the JSX) — match against references/figma-component-map.md
   • Layout structure — flex, grid, gap-*, p-*, w-*, h-* Tailwind classes on container divs
   • Typography — font-['...'], text-[...], font-weight classes
   • Surface colors — bg-[#XXXXXX] classes on container <div> elements that wrap major sections (these become plain <div> wrappers in Angular with background: #XXXXXX)
   • Border/roundness — rounded-[...], border, border-[...] classes on containers and cards
   • Input type variants — look for hidden zero-size nodes (size-[0.5px]) whose data-name contains a component type (e.g. "Date Picker Type", "Combo Input"). These are the Indigo.Design kit's variant indicator nodes — their name encodes which input variant (border/line/box) is active for that component.
   • Chart series colors — for any chart layer, note the fill colors on its series paths
   • Action controls — list every button, icon button, and toolbar action visible in the artboard; this is your authoritative inventory — do not add actions not present in the design
   • Active kit variant — look for library component references whose source file name contains "Material", "Fluent", "Bootstrap", or "Indigo". If not found here, defer to Phase 1e variable names and references/design-token-bridge.md.

4. Record all surface containers in the Surfaces Spec (added to Phase 1g).

1e: Extract Design Tokens

Figma variables are file-scoped, not artboard-scoped. Call figma_get_variable_defs once for the root page node — not once per artboard. Calling it multiple times returns identical data and wastes plan quota.

Call once:

figma_get_variable_defs({})

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: "<artboardId>" })

1g: Build the Decomposition Table

Before writing any code, produce two tables for each artboard.

Table A — Ignite UI Components

| Figma Layer Name | Visual Role | Ignite UI Component | Design Tokens Used | Data Type |