Wire Figma Tokens into PrimeNG + Angular 20 with Storybook and Chromatic: Accessible Typography, Density, and Real CI Guardrails

Why Figma Tokens Need a CI Loop, Not a PDF

If you want to hire an Angular developer to stabilize visual language, ask for this loop: Figma → tokens → Angular 20 Signals → Storybook → Chromatic → Firebase preview. Anything less, and teams regress visually between sprints.

The Pipeline: Figma → PrimeNG → Storybook (with Signals)

This loop is cheap to maintain in an Nx monorepo and pays for itself when you can prove AA contrast and density budgets in PR reviews.

Code: The Design Token Pipeline

{
  "$schema": "https://tokens.studio/schemas/aliases.json",
  "color": {
    "brand": {"primary": {"500": {"value": "#4C7AF1"}, "600": {"value": "#3B64D6"}}},
    "surface": {"base": {"value": "#0F1222"}, "card": {"value": "#141832"}},
    "text": {"high": {"value": "#F8FAFC"}, "muted": {"value": "#98A2B3"}},
    "status": {"success": {"500": {"value": "#16A34A"}}, "danger": {"500": {"value": "#DC2626"}}}
  },
  "typography": {
    "family": {"sans": {"value": "'Inter', system-ui, -apple-system, Segoe UI, Roboto"}},
    "size": {"xs": {"value": "12px"}, "sm": {"value": "14px"}, "md": {"value": "16px"}, "lg": {"value": "18px"}},
    "line": {"tight": {"value": 1.25}, "normal": {"value": 1.5}}
  },
  "radius": {"sm": {"value": "6px"}, "md": {"value": "10px"}},
  "spacing": {"100": {"value": "4px"}, "200": {"value": "8px"}, "300": {"value": "12px"}}
}

// tools/style-dictionary/config.cjs
const StyleDictionary = require('style-dictionary');
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' }]
    },
    scss: {
      transformGroup: 'scss',
      buildPath: 'libs/design-tokens/dist/',
      files: [{ destination: '_tokens.scss', format: 'scss/map-deep' }]
    },
    ts: {
      transformGroup: 'js',
      buildPath: 'libs/design-tokens/dist/',
      files: [{ destination: 'tokens.ts', format: 'javascript/module' }]
    }
  }
}

# package.json scripts
nx run design-tokens:build && nx run design-tokens:lint

/* libs/theme/src/styles/_primeng-bridge.scss */
@use 'libs/design-tokens/dist/tokens' as t;

:root.theme-light {
  --ux-color-primary-500: #{t.$color.brand.primary.500};
  --ux-color-surface-card: #{t.$color.surface.card};
  --ux-text-high: #{t.$color.text.high};
  --ux-radius-sm: #{t.$radius.sm};
  --ux-spacing-200: #{t.$spacing[200]};

  /* PrimeNG variables mapping */
  --p-primary-color: var(--ux-color-primary-500);
  --p-text-color: var(--ux-text-high);
  --p-card-background: var(--ux-color-surface-card);
  --p-border-radius: var(--ux-radius-sm);
}

:root.theme-dark { /* override a few for dark */ }

/* Density tokens */
:root.density-compact { --ux-density-scale: .9 }
:root.density-cozy { --ux-density-scale: 1 }
:root.density-comfortable { --ux-density-scale: 1.1 }

.p-button {
  padding-inline: calc(var(--ux-spacing-200) * var(--ux-density-scale));
  border-radius: var(--p-border-radius);
}

// libs/theme/src/lib/theme.store.ts
import { Injectable, effect, signal } from '@angular/core';

export type ThemeName = 'theme-light' | 'theme-dark';
export type Density = 'density-compact' | 'density-cozy' | 'density-comfortable';

@Injectable({ providedIn: 'root' })
export class ThemeStore {
  theme = signal<ThemeName>('theme-light');
  density = signal<Density>('density-cozy');
  scale = signal<number>(1);

  constructor() {
    effect(() => {
      const root = document.documentElement.classList;
      root.remove('theme-light', 'theme-dark');
      root.add(this.theme());
      root.remove('density-compact', 'density-cozy', 'density-comfortable');
      root.add(this.density());
      document.documentElement.style.setProperty('--ux-scale', String(this.scale()));
    });
  }
}

<!-- Example PrimeNG button bound to tokens -->
<button pButton type="button" label="Save" class="p-button" aria-label="Save changes"></button>

// .storybook/preview.ts
import type { Preview } from '@storybook/angular';
import { ThemeStore } from '../libs/theme/src/lib/theme.store';

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Theme toggle',
    defaultValue: 'theme-light',
    toolbar: { items: ['theme-light', 'theme-dark'], showName: true }
  },
  density: {
    name: 'Density',
    description: 'Density scale',
    defaultValue: 'density-cozy',
    toolbar: { items: ['density-compact', 'density-cozy', 'density-comfortable'] }
  }
};

const withTokens = (Story, ctx) => {
  const store = new ThemeStore();
  store.theme.set(ctx.globals['theme']);
  store.density.set(ctx.globals['density']);
  return Story();
};

const preview: Preview = {
  decorators: [withTokens],
  parameters: {
    a11y: { element: '#root', manual: false },
    chromatic: { diffThreshold: 0.03 }
  }
};
export default preview;

# .github/workflows/chromatic.yml
name: Chromatic
on:
  pull_request:
  push:
    branches: [ main ]
jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: pnpm nx run design-tokens:build
      - run: pnpm nx run storybook:build -- --output-dir dist/storybook
      - uses: chromaui/action@v1
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          buildScriptName: 'nx run storybook:build -- --output-dir dist/storybook'
          exitZeroOnChanges: false

Accessibility, Typography, Density, and the AngularUX Palette

I’ve applied this palette on a telecom analytics dashboard where D3 maps, Highcharts time-series, and PrimeNG tables share one brand system. Data virtualization (cdk-virtual-scroll) keeps tables fluid while Signals drive state changes without re-render storms.

Storybook Workflows that Ship: Visual Diffs, Firebase Previews, and Perf Budgets

# Optional Firebase preview for Storybook
name: Storybook Firebase Preview
on: pull_request
jobs:
  preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: pnpm nx run storybook:build -- --output-dir dist/storybook
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: pr-${{ github.event.number }}
          projectId: your-firebase-project
          target: storybook

How an Angular Consultant Approaches Tokens Integration

If you need a remote Angular expert to wire this up quickly, I’m available for hire as an Angular contractor. Typical engagement: 2–4 weeks to stand up the pipeline and migrate core components.

When to Hire an Angular Developer for Legacy Rescue

For deeper modernization or vibe-coded app recovery, see how we stabilize your Angular codebase with gitPlumbers—visual guardrails included.

Example: Role-Based Dashboard Polish with Performance Budgets

Data virtualization handled 100k-row tables, and Highcharts pulled success/danger token ramps for alerts. The system stayed fast and consistent.

Takeaways and Next Steps

• Export tokens once; consume everywhere (Angular, PrimeNG, Storybook, charts).
• Use Signals/SignalStore for theme and density switches without layout thrash.
• Guard UX with Chromatic diffs, a11y checks, and perf budgets in CI.
• Deploy previews to Firebase; let design review changes before merge.
• Measure outcomes with Lighthouse and Angular DevTools—then ship.