Design System Engineering · Personal Case Study

Figma Variables
to Angular Codebase —
zero drift.

A personal workflow for shipping design systems at speed. Every component tracked across five pipeline stages — searchable, commentable, and usable by anyone from a designer doing a handoff to a senior engineer doing code review. One source of truth.

80+

components total

pipeline stages

63%

reuse at 12 months

2.4×

faster onboarding

End-to-end pipeline — every component travels all five stages

Figma Variables

Tokens + Auto-layout

→

Token Studio

JSON export

→

Style Dictionary

CSS vars + TS types

→

Angular / Code

Standalone components

→

Storybook

Living documentation

Components (11)

All ✓ Ready ⚠ Partial ✕ Not started

Button

<ds-button> · .ds-btn · @ds/angular

Figma Token Studio Style Dict Angular Storybook

5/5 ready

▼

Figma

✓ Ready

4 variants, 3 sizes

Token Studio

✓ Ready

6 tokens exported

Style Dict

✓ Ready

CSS vars generated

Angular

✓ Ready

v2.1.0 stable

Storybook

✓ Ready

9 stories live

Pipeline completion5/5

Figma

Token Studio

Style Dictionary

Angular

Storybook

Variants Primary Secondary Destructive Ghost

Sizes Small Medium Large

States Disabled Loading Active

Figma path

Components / Button

@Input names = Figma properties

variant · size · disabled · loading

color/primary/900color/danger/600space/2space/4radius/mdtypography/basefont-weight/medium

Token values — Figma Variable → CSS output

Figma Variable	CSS Property	Value	Match
color/primary/900	--color-primary-900	#e8ff5a	✓
color/danger/600	--color-danger-600	#dd4040	✓
space/2	--space-2	8px	✓
space/4	--space-4	16px	✓
radius/md	--radius-md	8px	✓
font-weight/medium	--font-weight-medium	600	✓

dist/tokens/variables.css (auto-generated)

CSS

/* Auto-generated — do not edit manually */
/* Source: tokens/tokens.json → Style Dictionary build */
:root {
  --color-primary-900: #e8ff5a;  /* color/primary/900 */
  --color-primary-50:  #f9ffe0;  /* color/primary/50  */
  --color-danger-600:  #dd4040;  /* color/danger/600  */
  --space-2: 8px;
  --space-4: 16px;
  --radius-md: 8px;
  --font-weight-medium: 600;
  --text-base: 1rem;
}

Import component Class names only

your.component.ts

TypeScript

import { DsButtonComponent } from '@ds/angular';

@Component({
  standalone: true,
  imports: [DsButtonComponent],
  template: `
    <ds-button variant="primary" size="md"
      [loading]="isLoading" (click)="onSave()">
      Save changes
    </ds-button>

    <ds-button variant="secondary" size="sm">Cancel</ds-button>
    <ds-button variant="destructive" [disabled]="!canDelete">Delete</ds-button>
    <ds-button variant="ghost">Learn more</ds-button>
  `,
}) export class YourComponent {
  isLoading = false;
  canDelete = true;
}

template.html — class-only approach

HTML

<button class="ds-btn ds-btn--primary">Primary</button>
<button class="ds-btn ds-btn--secondary ds-btn--sm">Small</button>
<button class="ds-btn ds-btn--destructive" disabled>Delete</button>
<!-- All spacing + colour from CSS vars —  -->
<!-- var(--space-2), var(--color-primary-900), var(--radius-md) -->

PrimarySecondaryDestructiveGhostSmallLargeLoadingDisabledWithIcon

Open Storybook → Components / Button

Use Controls panel to toggle variant, size, loading, disabled

Copy generated snippet from Docs tab — uses <ds-button> with exact prop names

Comments & change requests3 comments

Thabo M.2d agoChange request· Angular

ds-btn--ghost hover background missing — Figma shows color/primary/50.

👍 2Reply

Lulamile M.1d agoApproved· Angular

Fixed in v2.1.0 — ghost hover now uses var(--color-primary-50). Storybook updated.

✓ 1Reply

Sipho R.5h agoQuestion· Figma

Should we add a full-width variant? Some onboarding flows need width:100%.

💬 3Reply

CommentChange requestQuestion

Input Field

<ds-field> · .ds-input · Reactive Forms compatible

Figma Token Studio Style Dict Angular Storybook

5/5 ready

▼

Figma

✓ Ready

4 states designed

Token Studio

✓ Ready

All tokens exported

Style Dict

✓ Ready

variables.css updated

Angular

✓ Ready

v2.0.3 stable

Storybook

✓ Ready

6 stories live

Pipeline completion5/5

Figma

Angular

Style Dictionary

Default

Email address

you@example.com

We'll never share your email

Focused

Password

••••••••

Error

Username

taken_name

Username already taken

Disabled

Account ID

ACC-00482

color/primary/900color/danger/600space/2space/3radius/md

Reactive Form Class names

reactive-form usage

HTML

<!-- @Input names match Figma property names exactly -->
<ds-field
  label="Email address"
  type="email"
  placeholder="you@example.com"
  [required]="true"
  [formControl]="emailCtrl"
  hint="We never share your email"
  [errorMessages]="{ required: 'Required', email: 'Invalid email' }"
/>

class-only approach

HTML

<input class="ds-input" type="email" placeholder="you@example.com"/>
<input class="ds-input ds-input--error" type="text"/>
<input class="ds-input" type="text" disabled/>

_ds-field.scss (consumes generated vars)

SCSS

.ds-input {
  padding: var(--space-2) var(--space-3);    /* Figma: space/2 space/3 */
  border-radius: var(--radius-md);           /* Figma: radius/md       */
  font-size: var(--text-base);              /* Figma: typography/base */
  border: 1px solid var(--border-mid);
  background: var(--surface-2); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;

  &:focus {
    outline: none;
    border-color: var(--color-primary-900);
    box-shadow: 0 0 0 3px var(--accent-dim);
  }
  &.ds-input--error { border-color: var(--color-danger-600); }
  &:disabled { opacity: .4; cursor: not-allowed; }
}

Comments & change requests1 comment

Nandi K.3d agoIn review· Figma

Textarea variant isn't in Figma yet. Using .ds-input on a <textarea> but resize handle isn't spec'd. Can we add a multiline property?

👍 3Reply

CommentChange requestQuestion

Select / Dropdown

<ds-select> · .ds-select · CVA compatible

Figma Token Studio Style Dict Angular Storybook

5/5 ready

▼

Figma

✓ Ready

Closed + open states

Token Studio

✓ Ready

Tokens exported

Style Dict

✓ Ready

CSS vars generated

Angular

✓ Ready

v1.3.0 stable

Storybook

✓ Ready

4 stories live

Pipeline completion5/5

Figma

Angular

Default

Selected

Disabled

usage.html

HTML

<ds-select
  label="Country"
  placeholder="Select a country…"
  [options]="countryOptions"
  [formControl]="countryCtrl"
/>

<!-- options: Array<{ label: string; value: string }> -->

Badge / Chip

<ds-badge> · .ds-badge · Status + count variants

Figma Token Studio Style Dict Angular Storybook

4/5 ready

▼

Figma

✓ Ready

5 status variants

Token Studio

✓ Ready

Tokens exported

Style Dict

✓ Ready

CSS vars generated

Angular

⚠ In review

v0.9.0-beta

Storybook

✕ Not started

Backlog sprint 8

Pipeline completion4/5

Figma

Angular

Status Active Pending Error Info Draft

Count 4 New v1.2.0

usage — class names (stable)

HTML

<!-- Stable: class-name approach using generated CSS vars -->
<span class="ds-badge ds-badge--success">Active</span>
<span class="ds-badge ds-badge--warning">Pending</span>
<span class="ds-badge ds-badge--danger">Error</span>
<span class="ds-badge ds-badge--info">Info</span>
<span class="ds-badge">Neutral</span>

Comments & change requests1 comment

Jana D.1d agoChange request· Style Dictionary

Warning variant uses --color-warning-500 in beta but Figma shows color/warning/600. Needs correction to stay consistent.

👍 4Reply

CommentChange requestQuestion

Card

<ds-card> · .ds-card · Default / Elevated / Outlined

Figma Token Studio Style Dict Angular Storybook

4/5 ready

▼

Figma

✓ Ready

3 variants designed

Token Studio

✓ Ready

Tokens exported

Style Dict

✓ Ready

CSS vars ready

Angular

✓ Ready

v1.2.0 stable

Storybook

⚠ In review

PR #51 open

Pipeline completion4/5

Figma

Angular

Default Card

Used for content grouping with a subtle surface treatment.

View Dismiss

Elevated Card

Used for featured content that needs visual hierarchy.

Open

usage.html

HTML

<ds-card variant="elevated">
  <ds-card-header>Card title</ds-card-header>
  <ds-card-body>Content goes here</ds-card-body>
  <ds-card-footer>
    <ds-button variant="primary" size="sm">Action</ds-button>
  </ds-card-footer>
</ds-card>

Modal / Dialog

<ds-modal> · Angular CDK overlay

Figma Token Studio Style Dict Angular Storybook

3/5 ready

▼

Figma

✓ Ready

3 sizes, overlay

Token Studio

✓ Ready

Tokens exported

Style Dict

⚠ In review

PR #58 open

Angular

✕ Not started

Blocked by Style Dict

Storybook

✕ Not started

Blocked upstream

Pipeline completion3/5

Figma

Angular plan

planned API (subject to change)

TypeScript

// Planned service-based API — do not use yet
const ref = this.modalService.open(ConfirmComponent, {
  size: 'md',
  data: { message: 'Delete this project?' }
});
ref.afterClosed().subscribe(result => { /* handle result */ });

Alert / Toast

<ds-alert> · <ds-toast> · success/warning/error/info

Figma Token Studio Style Dict Angular Storybook

3/5 ready

▼

Figma

✓ Ready

4 states designed

Token Studio

✓ Ready

Tokens exported

Style Dict

✓ Ready

CSS vars ready

Angular

✕ Not started

Sprint 9 planned

Storybook

✕ Not started

Blocked upstream

Pipeline completion3/5

Figma

✓

Changes saved Your project settings have been updated.

⚠

Account expiring Your trial ends in 3 days. Upgrade to continue.

Failed to save Please check your connection and try again.

ℹ

Maintenance scheduled The platform will be offline from 02:00–04:00 SAST.

Checkbox / Radio / Toggle

<ds-checkbox> · <ds-radio> · <ds-toggle>

Figma Token Studio Style Dict Angular Storybook

2/5 ready

▼

Figma

✓ Ready

All 3 controls designed

Token Studio

✓ Ready

Tokens exported

Style Dict

✕ Not started

Backlog sprint 9

Angular

✕ Not started

Blocked upstream

Storybook

✕ Not started

Blocked upstream

Pipeline completion2/5

Figma

Checkbox

Checked

Unchecked

Disabled

Radio

Selected

Unselected

Toggle

Off

Avatar

<ds-avatar> · <ds-avatar-group> · Image + initials

Figma Token Studio Style Dict Angular Storybook

2/5 ready

▼

Figma

✓ Ready

sm/md/lg + group

Token Studio

✓ Ready

Size tokens exported

Style Dict

✕ Not started

Sprint 9 backlog

Angular

✕ Not started

Blocked upstream

Storybook

✕ Not started

Blocked upstream

Pipeline completion2/5

Figma

Sizes

Group

Data Table

<ds-table> · .ds-table · Sortable / Paginated

Figma Token Studio Style Dict Angular Storybook

Not started

▼

Figma

✕ Not started

Token Studio

✕ Not started

Style Dict

✕ Not started

Angular

✕ Not started

Storybook

✕ Not started

Pipeline completion0/5

What will be built

Name	Status	Role	Last active
Lulamile M.	Active	Senior Designer	Just now
Thabo M.	Active	Frontend Dev	2h ago
Nandi K.	Away	Product Manager	1d ago
Sipho R.	Inactive	QA Engineer	3d ago

Sortable columnsRow selectionPaginationColumn resizeEmpty stateLoading skeleton

Comments & change requests1 comment

Palesa W.1w agoChange request

Reporting dashboard urgently needs a data table. Currently using bespoke <table> with inline styles that matches nothing in the system. Can we prioritise Sprint 8?

👍 7Reply

CommentChange requestQuestion

Tabs

<ds-tabs> · <ds-tab> · Horizontal / Vertical / Pill

Figma Token Studio Style Dict Angular Storybook

Not started

▼

Figma

✕ Not started

Token Studio

✕ Not started

Style Dict

✕ Not started

Angular

✕ Not started

Storybook

✕ Not started

Pipeline completion0/5

Design target

Overview

Analytics

Settings

Members

Tab panel content area — this is what will be built.

Token Map

Figma Variable
→ CSS Custom Property

Every name travels unchanged through the pipeline. Forward-slash separators in Figma become hyphens in CSS. Nothing else changes. One rule, zero exceptions.

Naming rule: color/primary/900 → --color-primary-900 (/ becomes -)

Rule

Figma Variable       Token Studio JSON        Style Dictionary CSS
color/primary/900 → "color.primary.900" → --color-primary-900: #e8ff5a;
space/4           → "space.4"           → --space-4: 16px;
radius/md         → "radius.md"         → --radius-md: 8px;
typography/sm     → "typography.sm"     → --text-sm: 0.875rem;

Figma Variable	CSS Custom Property	Value	Used by
color/primary/900	--color-primary-900	#e8ff5a	Button, Field, Badge, Card, Table
color/primary/50	--color-primary-50	#f9ffe0	Button:ghost hover, Field:focus bg
color/danger/600	--color-danger-600	#dd4040	Button:destructive, Field:error, Alert:error
color/success/600	--color-success-600	#4ade80	Badge:success, Alert:success
color/warning/600	--color-warning-600	#fbbf24	Badge:warning, Alert:warning
color/info/600	--color-info-600	#60a5fa	Badge:info, Alert:info
space/1	--space-1	4px	Button:sm, Checkbox gap
space/2	--space-2	8px	Button padding-y, Field padding-y
space/3	--space-3	12px	Field padding-x, Button:sm padding-x
space/4	--space-4	16px	Button padding-x, Card padding
space/5	--space-5	20px	Card padding, Modal padding
space/6	--space-6	24px	Button:lg padding-x, Modal padding
radius/sm	--radius-sm	4px	Badge, Tag, Code snippet
radius/md	--radius-md	8px	Button, Field, Checkbox, Select
radius/lg	--radius-lg	12px	Card, Modal, Tooltip
radius/xl	--radius-xl	16px	Card:featured, Dialog
radius/full	--radius-full	9999px	Badge pill, Chip, Avatar, Toggle
typography/size/xs	--text-xs	0.75rem / 12px	Label tags, Meta text
typography/size/sm	--text-sm	0.875rem / 14px	Label, Hint, Badge text
typography/size/base	--text-base	1rem / 16px	Button, Field, Body text
typography/size/lg	--text-lg	1.125rem / 18px	Button:lg, Heading:sm
font-weight/regular	--font-weight-regular	400	Body, Hints
font-weight/medium	--font-weight-medium	600	Button, Label, Badge
font-weight/bold	--font-weight-bold	700	Heading, Display text
shadow/sm	--shadow-sm	0 1px 4px rgba(0,0,0,.2)	Card:default, Tooltip
shadow/md	--shadow-md	0 4px 16px rgba(0,0,0,.3)	Card:elevated, Select dropdown
shadow/lg	--shadow-lg	0 8px 32px rgba(0,0,0,.4)	Modal, Dialog overlay
motion/duration/fast	--duration-fast	150ms	Button hover, Toggle
motion/duration/base	--duration-base	220ms	Card hover, Field focus
motion/easing/ease-out	--ease-out	cubic-bezier(.22,1,.36,1)	Modal enter, Toast

End-to-End Process

How a component
goes from Figma
to shipped code.

Five stages. One rule per stage. Nothing moves forward until the current stage is signed off. Names never change between stages — that's the entire system.

Figma Variables

Design source of truth

Design every component with Auto-layout and Figma Variables. Name all component properties to exactly match the planned Angular @Input names — this is the contract. Every spacing and colour annotation uses a token name (space/4, not 16px). Gate: design lead review and sign-off on all states.

Auto-layoutComponent propertiesToken annotations4+ states minimumWCAG contrast check

Token Studio

JSON export

Export Figma Variables to structured JSON using the Tokens Studio plugin. The JSON key path mirrors the Figma variable path exactly — color/primary/900 becomes color.primary.900 in JSON. Gate: PR review on tokens/tokens.json. Zero manual edits allowed.

tokens.jsonPR reviewNo manual editsGit-tracked

Style Dictionary

CSS + TypeScript transform

Style Dictionary runs in CI on every token commit. One transform rule: dots become hyphens. Output: variables.css (CSS custom properties) and tokens.ts (TypeScript constants). Gate: automated test confirms all expected variables are present with correct values. No manual CSS writing.

CI pipelinevariables.csstokens.tsAutomated testsZero manual CSS

Angular / Codebase

Standalone component build

Angular 17 standalone component consuming the generated CSS variables. Selector format: ds-{name}. Every @Input name matches the exact Figma component property name. SCSS uses only token variables — no hardcoded values ever. Gate: code review + axe-core accessibility check in CI + semantic versioning.

Angular 17 standaloneARIA embeddedaxe-core CISemvernpm publish

Storybook

Living documentation

Storybook story path matches Figma component path exactly. Every variant has a dedicated story. Controls knobs mirror @Input names. Compodoc auto-generates the prop table from TypeScript. A component is only marked stable once all five stages are green in this tracker. Gate: design sign-off comparing Storybook output vs Figma spec.

Storybook 7CompodocDesign sign-offPath = Figma pathDeploy on merge

Figma Variablesto Angular Codebase —zero drift.

Components (11)

Figma Variable→ CSS Custom Property

How a componentgoes from Figmato shipped code.

Figma Variables
to Angular Codebase —
zero drift.

Figma Variable
→ CSS Custom Property

How a component
goes from Figma
to shipped code.