# figma → angular
Figma to Angular, standalone components.
Send a Figma file. Ship Angular 17+ standalone components with typed inputs, SCSS or Tailwind, CDK where accessibility calls for it, Storybook stubs optional. Signals for reactive state. AI-assisted first pass, hand-audited pass to ship.
What you get.
- Angular 17+ standalone components (no NgModule ceremony). @Input() typed, @Output() event emitters, ChangeDetectionStrategy.OnPush by default.
- SCSS with BEM-ish naming, or Tailwind if your app runs it. Design tokens mapped to CSS custom properties or Tailwind config.
- Signals for reactive state where they earn their keep. RxJS retained for HTTP + complex streams.
- Angular CDK for accessible dialogs, menus, listboxes, focus trapping. ARIA managed by the CDK primitives.
- Storybook stubs on request (+$149 per component set). Each story documents the input matrix.
- Standalone component set delivered as a Git repo with README, npm scripts, and a demo route.
Real code output.
A real example of what ships. Not a rendered marketing screenshot; the actual source in your repo.
import { Component, ChangeDetectionStrategy, input } from '@angular/core';
@Component({
selector: 'd2h-hero',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<section class="hero">
<p class="hero__eyebrow">{{ eyebrow() }}</p>
<h1 class="hero__title">{{ title() }}</h1>
<p class="hero__lede">{{ lede() }}</p>
</section>
`,
})
export class HeroComponent {
eyebrow = input('design to code');
title = input.required<string>();
lede = input<string>('');
}Tools we use.
AI first pass is thin for Angular; Locofy and Anima target React and Vue harder. We generally hand-code Angular from the Figma, with GitHub Copilot inline as reference. Storybook wiring drafted by Copilot Workspace where the design has 6+ variants.
Turnaround.
| Scope | Turnaround |
|---|---|
| Single component | 5d |
| Component set (5-8 components) | 10d |
| Full Angular route with lazy modules | 14d |
Pricing.
Single Angular component from $449. Component set (5-8) from $1,890. See /pricing/ for the full table.
FAQ.
Angular version?
Angular 17 or 18 by default. Angular 16 on request. Angular 15 or below only if the client is stuck and wants the component to backport cleanly.
Signals or RxJS?
Signals for local reactive state. RxJS retained for HTTP calls, subscriptions to external streams, and complex composition. We do not force-migrate an RxJS codebase to signals.
SCSS or Tailwind?
SCSS by default (Angular convention). Tailwind if your app already uses it; we configure against your existing theme.
Do you write tests?
Karma + Jasmine stubs per component (render, input variations, aria-attribute assertions). Cypress or Playwright end-to-end on request.
Angular Material integration?
Yes. If the design lines up with Material tokens, we consume Material and theme it. If not, we build from scratch with CDK primitives.
NgRx or component signals?
Component-level signals unless the app already runs NgRx. We do not introduce state libraries you did not ask for.
Send a Figma link.
Two-line brief, one Figma URL, one email. Quote back inside 24 hours weekdays. If you have a stack constraint (React version, Tailwind config, existing design tokens), say so up front.