skills.rest
IgniteUI
IgniteUIOFFICIAL
Explore all skills by this author →
WebsiteGitHub

igniteui-angular-figma-to-app

Convert Figma designs built with Indigo.Design UI Kits into Ignite UI Angular applications.

602|161|Updated Feb 11, 2016
Search Tags:#mcp#Angular#Figma#design-to-code#themING#component mapping#Ignite UI
One-click install
npx skills add https://github.com/IgniteUI/igniteui-angular --skill igniteui-angular-figma-to-app
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: igniteui-angular-figma-to-app
Source: https://github.com/IgniteUI/igniteui-angular/tree/main/skills/igniteui-angular-figma-to-app
Command: npx skills add https://github.com/IgniteUI/igniteui-angular --skill igniteui-angular-figma-to-app

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Translating Figma design screens into working Angular code by hand is slow and error-prone, especially when matching component selectors, theme tokens, and layout surfaces to a component library. This Skill automates that translation for designs built with the Indigo.Design UI Kits, where every Figma component maps 1:1 to an Ignite UI for Angular control.

Core Features & Use Cases

  • Design-to-Component Mapping: Reads Figma artboards via the Figma MCP, decomposes them into Ignite UI Angular components using a component map, and fetches exact selectors and inputs from the Ignite UI CLI MCP docs.
  • Theme Generation: Converts Figma variables (colors, typography, elevations) into Ignite UI Sass themes via the Ignite UI Theming MCP, detecting the design system variant (Material, Fluent, Bootstrap, Indigo) and light/dark mode.
  • Asset Extraction & Visual Validation: Extracts image assets through a four-tier Fidelity strategy (REST API, localhost URLs, screenshots) and validates the running app against reference screenshots with the Playwright MCP.
  • Use Case: A designer shares a Figma URL for a dashboard built with the Indigo.Design UI Kit for Material. The Skill scaffolds or detects an Angular project, extracts design tokens and assets, generates themed components, and iterates until the rendered app matches the Figma screenshots.

Quick Start

Implement this Figma design as an Angular app using the shared Figma URL and my Ignite UI Angular project.

Frequently Asked Questions about igniteui-angular-figma-to-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Figma design to an Angular app with Ignite UI?▼

Share the Figma URL and the Skill runs a five-phase workflow: explore the design via the Figma MCP, map layers to Ignite UI components, generate a Sass theme from Figma variables, implement the Angular views, and validate visually with Playwright against reference screenshots.

What Figma component libraries does this workflow support?▼

It supports the Indigo.Design UI Kits, which come in four design-system variants: Material, Fluent, Bootstrap, and Indigo, each with light and dark themes. Every kit component instance maps 1:1 to an Ignite UI for Angular control.

Which MCP servers are required for Figma to Angular conversion?▼

Four servers are required: Figma for design data, Ignite UI CLI for component documentation, Ignite UI Theming for palette and component styling, and Playwright for visual validation. Running npx -y igniteui-cli ai-config configures the two Ignite UI servers.

Can it scaffold a new Angular project if none exists?▼

Yes. If no valid Ignite UI Angular project is found, it offers to scaffold one with npx -y igniteui-cli new using the empty or side-nav template, which pre-configures theming and the Ignite UI CLI MCP server.

How are Figma design tokens mapped to Ignite UI themes?▼

Figma variables like color/primary/500, color/surface, and typography/font-family are extracted once per file and mapped to theming_create_palette and theming_create_theme inputs. Spacing and sizing pixel values are intentionally not mapped, since Ignite UI uses density enums and multipliers instead.

What are the limitations of Figma MCP usage in this workflow?▼

Figma MCP calls count against plan quotas, and Starter plans allow only about six calls per month, so a full session can exceed the quota. The Figma MCP is also session-bound, requiring the user to select each artboard in the desktop app before screenshots or design context can be captured.

Related Skills

Explore More Software Engineering Skills→
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
IgniteUIIgniteUI
601

igniteui-angular-generate-from-image-design

Convert design images into Angular views using Ignite UI components.

Official
Advanced
IgniteUIIgniteUI
47

igniteui-angular-grids

Implement Ignite UI for Angular data grids with sorting, filtering, and editing.

Official
Advanced
cromesdkcromesdk

figma-make-angular20-tailwind4-implementation

Implement Figma Make UI designs into Angular 20 and Tailwind CSS v4 projects.

Official
Advanced