Connect Figma Tokens to PrimeNG/Angular Components with Storybook 8 and Chromatic in the Loop

Seen in the field

Each of these projects had design updates landing late in the sprint. Before tokens, we’d hotfix SCSS, miss a AA contrast edge case, and discover a jittery table in production. After tokens + Chromatic, we merged with confidence and zero drama.

• a global entertainment company employee/payments admin: brand updates mid‑quarter

• Charter ads analytics: density shifts for table-heavy views

• a broadcast media network scheduling (VPS): accessibility audits at scale

What we want

The goal is a fast, measurable loop: design pushes tokens; Angular updates CSS variables; Storybook documents states; Chromatic prevents silent regressions; performance budgets keep us honest.

• One source of truth (Figma tokens)

• PrimeNG theming without forking

• Automated a11y + visual guardrails in CI

Lower coordination cost

Your design system becomes an API. Engineers aren’t hunting hard-coded hex values; they’re binding to semantic tokens like --color-brand-600 and --space-100.

• Tokens reduce handoffs to merging a JSON diff

• CSS variables swap at runtime—no rebuild needed

Guardrails that scale

Chromatic review comments replace subjective “looks good?” chats. If the diff is green, you ship. If it’s red, you either adjust tokens or annotate the change.

• Storybook a11y catches AA failures early

• Chromatic’s pixel diffs catch off-by-one paddings

Performance stays tight

In enterprise dashboards with Highcharts and virtualized tables, the theming layer must be effectively free. Variables and affected CI keep the budget intact.

• CSS variables are cheap

• Nx affected scopes work to changed libs

1) Export tokens from Figma

Keep tokens semantic: color.brand.600, font.size.100, space.100, radius.md. Include OKLCH values for perceptual consistency in the AngularUX palette.

• Use Tokens Studio or Design Tokens plugin

• Export per-mode (light/dark), include typography/density

2) Transform with Style Dictionary

Transform tokens to CSS variables at build time. Two files: tokens.css (light) and tokens-dark.css (dark).

• Emit CSS variables per theme

• Keep output tiny and cacheable

Config: Style Dictionary

// tools/style-dictionary.config.cjs
module.exports = {
  source: ['libs/design-tokens/src/tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'libs/design-tokens/dist/',
      files: [
        { destination: 'tokens.css', format: 'css/variables', options: { selector: ':root' } },
        { destination: 'tokens-dark.css', format: 'css/variables', options: { selector: ':root[data-theme="dark"]' } }
      ]
    }
  }
};

3) Bridge tokens to PrimeNG variables

PrimeNG exposes CSS variables for theme colors, surfaces, typography, and radii. Create a bridge SCSS to map your tokens to those variables.

• No forking PrimeNG

• Map your tokens → PrimeNG CSS variables

SCSS: PrimeNG bridge

/* libs/ui-theme/src/_primeng-bridge.scss */
:root {
  --primary-color: var(--color-brand-600);
  --primary-color-text: var(--color-surface-0);
  --text-color: var(--color-ink-900);
  --text-color-secondary: var(--color-ink-600);
  --surface-ground: var(--color-surface-50);
  --surface-card: var(--color-surface-0);
  --border-radius: var(--radius-md);
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-brand-500), white 70%);
  --font-family: var(--font-family-sans);
  --font-size: var(--font-size-100);
  --spacing: var(--space-100);
}

:root[data-density="compact"] {
  --spacing: var(--space-075);
  --font-size: var(--font-size-090);
}

4) Wire runtime toggles with Signals

Use a tiny ThemeStore to flip dataset attributes on . No reloads. Works in Storybook and in app.

• Signals avoid global mutation noise

• Optional: read defaults from Firebase Remote Config

Theme Signals store

// libs/theme/src/lib/theme.store.ts
import { Injectable, signal, computed, effect } from '@angular/core';
import { RemoteConfig, getValue } from '@angular/fire/remote-config';

type Theme = 'light' | 'dark';
type Density = 'comfortable' | 'compact';

@Injectable({ providedIn: 'root' })
export class ThemeStore {
  private theme = signal<Theme>('light');
  private density = signal<Density>('comfortable');
  constructor(private rc?: RemoteConfig) {
    effect(() => {
      document.documentElement.dataset.theme = this.theme();
      document.documentElement.dataset.density = this.density();
    });
    if (rc) {
      this.theme.set((getValue(rc, 'theme').asString() as Theme) || 'light');
      this.density.set((getValue(rc, 'density').asString() as Density) || 'comfortable');
    }
  }
  themeSignal = computed(() => this.theme());
  densitySignal = computed(() => this.density());
  setTheme(v: Theme) { this.theme.set(v); }
  setDensity(v: Density) { this.density.set(v); }
}

5) Document in Storybook 8

Each component gets states for default/hover/focus/disabled and compact density. That documentation becomes living QA.

• Add a11y addon for AA checks

• Expose density/theme as toolbar controls

Story: PrimeNG button

// libs/ui-components/src/lib/button/button.stories.ts
import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
import { ButtonModule } from 'primeng/button';

const meta: Meta = {
  title: 'Primitives/Button',
  decorators: [moduleMetadata({ imports: [ButtonModule] })],
  parameters: {
    a11y: { element: '#root' },
    chromatic: { diffThreshold: 0.03 },
  },
};
export default meta;

type Story = StoryObj;
export const Primary: Story = {
  render: () => ({ template: `<button pButton type="button" label="Primary"></button>` }),
};

6) Chromatic in CI (Nx affected)

Integrate Chromatic in GitHub Actions; fail on unexpected visual drift.

• Only run for changed UI/libs

• Block merges on meaningful diffs

GitHub Action: Chromatic

# .github/workflows/chromatic.yml
name: Chromatic
on:
  pull_request:
    paths:
      - 'libs/ui-components/**'
      - 'libs/ui-theme/**'
      - 'libs/design-tokens/**'
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: pnpm nx run ui-components:build-storybook
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          storybookBuildDir: dist/storybook/ui-components
          onlyChanged: 'true'
          exitZeroOnChanges: 'false'

7) Performance + a11y guardrails

Keep a modest CLS/TTI budget; fail on regressions. For accessibility, verify focus rings, hit targets, and contrast via tokens—not ad-hoc fixes.

• Lighthouse budgets in CI

• addon-a11y with custom rules

PrimeNG + viz harmony

In Charter’s analytics work we used tokens to align legend swatches with table badges, reducing cognitive load. The same mapping works for D3 or Canvas/Three.js.”

• Use tokens to colorize charts

• Match density between table cells and legends

Example: table + chart with tokens

<!-- libs/dashboards/src/lib/sales/sales.component.html -->
<div class="toolbar">
  <p-button label="Light" (onClick)="theme.setTheme('light')"></p-button>
  <p-button label="Dark" (onClick)="theme.setTheme('dark')"></p-button>
  <p-selectButton [options]="densities" [(ngModel)]="density" (onChange)="theme.setDensity($event.value)"></p-selectButton>
</div>

<p-table [value]="rows" [scrollable]="true" scrollHeight="400px">
  <ng-template pTemplate="header">
    <tr>
      <th>Region</th>
      <th>Revenue</th>
      <th>Growth</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td>{{row.region}}</td>
      <td>{{row.revenue | number}}</td>
      <td>
        <app-sparkline [data]="row.spark" [color]="'var(--primary-color)'"></app-sparkline>
      </td>
    </tr>
  </ng-template>
</p-table>

<app-highcharts [options]="chartOptions"></app-highcharts>

Density SCSS snippet

/* libs/ui-theme/src/_density.scss */
:root[data-density="compact"] .p-component,
:root[data-density="compact"] .p-inputtext,
:root[data-density="compact"] .p-button {
  --p-input-padding-y: 0.375rem;
  --p-input-padding-x: 0.5rem;
  --p-button-padding-y: 0.375rem;
  --p-button-padding-x: 0.625rem;
  --p-table-cell-padding: 0.375rem 0.5rem;
  font-size: calc(var(--font-size) * 0.93);
}

Measurable results

On recent dashboards, moving to tokens + Chromatic cut visual defect reports by >70% and made brand updates a configuration change instead of a sprint.

• Chromatic kept visual defects to near zero

• Theme swaps in minutes, not days

• AA/AAA tracked in Storybook

Symptoms you might see

If you recognize these patterns, you’re paying a “visual tax” every sprint. An Angular consultant can set up the token bridge, Storybook docs, and Chromatic guardrails in 2–4 weeks for most Nx monorepos.

• Inconsistent paddings/line-heights across pages

• Hard-coded hex values scattered in SCSS

• Manual dark mode styles diverging from light mode

• Accessibility bugs reopen repeatedly

What the engagement includes

I’ve done this in live systems (e.g., device management portals, analytics platforms) with zero downtime and clear before/after metrics. If you need a remote Angular developer with enterprise experience, let’s talk.

• Audit of current styles and PrimeNG overrides

• Token source mapping and Style Dictionary setup

• Signals/SignalStore theme + density toggles

• Storybook a11y + Chromatic CI with thresholds

• Knowledge transfer and upgrade guide

What to instrument next

UX polish and engineering rigor aren’t opposites. Tokens make the polish cheap; Chromatic and budgets make it measurable. That’s how we kept United kiosk UIs stable even under offline/online state flips.

• Add GA4/Firebase Performance to measure TTI/CLS post-theme swap

• Adopt feature flags for gradual visual rollouts

• Use data virtualization for tables >10k rows

How much does it cost to hire an Angular developer for this work?

Typical token integration and guardrails project lands in the low five figures depending on scope (number of components, themes, and libraries). Fixed‑fee assessments available; I’ll quote after a brief repo review.

How long does a PrimeNG token bridge take?

2–4 weeks for a focused library, 4–8 weeks for multi‑app Nx monorepos with complex overrides. Chromatic baselining usually happens in week one.

Will this add runtime overhead?

No meaningful overhead. CSS variables resolve in the cascade; Signals update dataset attributes without re-rendering full trees. Keep chart/virtual-scroll rendering efficient and you’re safe.

Does this work with SSR?

Yes. Prefer server-side default attributes (data-theme, data-density) and hydrate with Signals. Avoid layout shifts by loading tokens.css early and deferring dark.css behind a .