How do I capture an Angular component at a specific state (loading, error, success)?

Use the Angular DevTools browser extension to inspect and modify component state. You can change @Input values, Observable streams, or NgRx/Signal store values to put the component in the desired state. Once the component renders the state you want, copy the outerHTML from the browser's Elements panel and import it into html2design.

Angular to Figma — Convert Components to Figma Designs

Q: How do I convert an Angular component to Figma?

Run your Angular app with ng serve. Navigate to the component in your browser, open DevTools (F12), find the component's host element in the Elements panel, right-click → Copy → Copy outerHTML, then paste the HTML into the html2design Figma plugin. The plugin generates native Figma layers from the rendered HTML, including all styles Angular's ViewEncapsulation has already resolved.

Q: Does Angular ViewEncapsulation affect the Figma import?

No. Angular's default ViewEncapsulation.Emulated adds unique _nghost and _ngcontent attributes to scope component styles. The browser resolves these to computed CSS values before the html2design plugin reads the markup. The plugin reads computed styles, not source stylesheets, so encapsulated styles appear correctly in Figma regardless of the encapsulation mode.

Q: Can I convert Angular Material components to Figma?

Yes. Angular Material components render as standard HTML elements with computed CSS. Open the component in your browser, copy the rendered HTML from DevTools, and paste into html2design. Material's design tokens and theme colors are resolved by the browser and reflected in the Figma fills and typography.

Angular to Figma —
No Extension Needed

Converting Angular components to Figma means running ng serve, opening the component in your browser, and copying the rendered HTML into the html2design plugin. Angular's ViewEncapsulation, Material themes, and Signal-based state are all resolved by the browser before the plugin reads a single character — so Figma gets the real thing.

What is "Angular to Figma"?

"Angular to Figma" describes the process of exporting a rendered Angular component — including its encapsulated styles, Material Design tokens, and component-bound data — into a native Figma design that can be edited, annotated, and used as a designer handoff spec. The html2design Figma plugin enables this by accepting raw HTML from your browser's DevTools and generating editable Figma frames from the computed output.

Angular's component architecture is famously opinionated: its default ViewEncapsulation.Emulated mode scopes styles to individual components using generated attributes. This is handled entirely by the browser — by the time you copy the rendered HTML from DevTools, Angular has already applied and resolved every encapsulated style rule. Paste that HTML into html2design and Figma receives a pixel-accurate representation of the component.

The Angular to Figma workflow

Four steps. Works with Angular 14+, standalone components, NgModules, and Angular Material.

Step 01

Serve the Angular app locally

Run ng serve (or npx nx serve for Nx monorepos) and navigate to the route containing the component you want to export. No staging environment or live URL needed.

If the component depends on NgRx store state, Angular Signals, or HTTP data, ensure the app is in the correct state before capturing. Use Angular DevTools to inspect and modify component inputs or service values if needed.

Step 02

Copy the component's rendered HTML

Open DevTools (F12) and locate the component's host element in the Elements panel. Angular components render as custom elements (e.g., <app-card>, <mat-button>) with _nghost-* and _ngcontent-* attributes.

Right-click the host element → Copy > Copy outerHTML. For a full-page export, select the <app-root> element or the <main> container.

Step 03

Paste into html2design and generate Figma layers

Open Figma, run the HTML to Figma plugin, paste the copied HTML, and click Generate. The plugin reads the computed styles the browser already calculated — Material theme colors, component-scoped styles, CSS custom properties, and Angular CDK layout utilities are all resolved before the plugin processes the markup.

The output is a native Figma frame with real text layers, accurate fills from your design system, and a layer hierarchy that mirrors your Angular component tree. Not a screenshot — an editable design.

Step 04

Hand off the Figma frame to your designer

Share the Figma frame link with your designer. They can inspect spacing values, adjust colors, leave comments, and iterate — all in Figma's native interface, without ever touching the Angular codebase or running the dev server.

Because the Figma frame was generated from the live component — not a wireframe or a mock — designers work with accurate data. The spacing, font sizes, and colors they see are the same ones the Angular app renders in the browser.

Angular-specific tips for Figma exports

Angular's component architecture has some quirks that affect how components render and how to get the best output.

ViewEncapsulation is transparent to html2design

Angular's ViewEncapsulation.Emulated (the default) scopes styles using generated _nghost-* and _ngcontent-* attributes. ViewEncapsulation.None disables scoping entirely. Both modes work the same way with html2design — the plugin reads computed CSS, which the browser has already resolved regardless of encapsulation mode.

Angular Material: capture after theme is applied

Angular Material applies its design tokens via CSS custom properties on the :root element at runtime. These tokens — colors, typography, density — are resolved by the browser to their actual hex/px values before html2design reads them. Material buttons, cards, dialogs, and form fields all import with accurate colors and spacing as long as you copy from the live rendered page.

Use Angular DevTools to set component state

The Angular DevTools Chrome extension lets you inspect the component tree, view and edit @Input values, and trigger change detection. Use it to put components into specific states — error states, loading states, filled form variants — before capturing the outerHTML for import. This lets you export every visual variant of a component to Figma without changing the source code.

Standalone components work identically to NgModule components

Angular 14+ standalone components have no architectural difference in how they render HTML. Both standalone and NgModule-based components produce the same DOM output when rendered in the browser. The html2design workflow is identical for both: serve locally, copy outerHTML, paste into the plugin.

What lands in Figma from an Angular component

Native Figma objects — not screenshots, not plugin wrappers, not embedded iframes.

Real text layers with Angular-rendered content

Angular's template engine ({{ interpolation }}, pipes, and directives) produces rendered text in the DOM. That text becomes a real Figma text layer with the correct font, size, and weight — not placeholder copy.

Material Design token colors in fills

Angular Material's --mat-* CSS custom properties are resolved to their hex values by the browser. Your primary, accent, and warn palette colors appear as real Figma fill values — no manual color-matching needed.

Component-scoped layout preserved

Angular Layout (Flex-Layout, Angular CDK, or plain CSS) produces computed layout values the browser renders. Padding, margins, flex-gap, grid-template — all read from computed styles and reflected in Figma spacing.

Layer names from HTML structure

Custom element names like app-dashboard-card and class names like .card__header become Figma layer names — making the output easy to navigate and reference.

Frequently asked questions

How do I convert an Angular component to Figma?

Run ng serve, navigate to the component in your browser, copy the host element's outerHTML from DevTools, and paste into html2design in Figma. The plugin generates native Figma layers from the rendered HTML.

Does Angular ViewEncapsulation affect the Figma import?

No. Emulated, None, and ShadowDom encapsulation modes all produce computed CSS values the browser resolves before html2design reads the markup. The plugin only sees computed styles — not Angular's scoping mechanisms.

Can I convert Angular Material components to Figma?

Yes. Material components render standard HTML with CSS custom property tokens resolved to their actual values. Copy the rendered HTML from DevTools and paste into html2design. Material colors, typography, and density settings all land correctly in the Figma output.

How do I capture an Angular component at a specific loading state?

Use Angular DevTools to modify component @Input values or trigger specific states, or manipulate the NgRx/Signal store directly. Once the component renders the state you want to document, copy the outerHTML and import it into html2design.