Steph Huynh

● Design systems

In progress · Design system tooling

Superbloom → Figma.

Superbloom is the design system inside my portfolio: tokens in CSS, primitives and patterns in Svelte, Storybook for docs. I am wiring a strict-sync Figma plugin so the repo stays the source of truth and Figma is a generated library, not a parallel palette to maintain by hand.

Design systemsFigma PluginSvelteKitTypeScript

Status

In progress

Stack

SvelteKit, Figma Plugin API, OKLCH tokens

Source of truth

Repo (app.css + Superbloom components)

Output

Figma variables + components + showcase board

Sync demo

Running the plugin recreates variables, components, and the showcase board in one pass.

Superbloom Sync in Figma: strict sync from the repo manifest.

Showcase board

After sync, Figma opens Superbloom · Showcase, a single artboard with color swatches, a primitives grid, and pattern previews.

Superbloom design system showcase exported from Figma
Generated from the repo via the Superbloom Sync plugin, not hand-placed components.

Pipeline

  1. 01

    Export manifest + tokens

    A script reads src/app.css (OKLCH semantic colors) and primitive definitions, then writes generated/manifest.json and tokens.json.

  2. 02

    Build the Figma plugin

    esbuild inlines that JSON into the plugin bundle so the sandbox runs without network access.

  3. 03

    Strict sync

    One command recreates the Superbloom variable collection (Light/Dark), all primitive and pattern components, and a screenshot-ready showcase page.

What works today

  • Semantic color variables bound to components
  • Seven primitives (Button variant matrix, Tag, LiveBadge, and others)
  • Seven patterns (SectionHeader, ProjectCard, Breadcrumb, and others)
  • Superbloom · Showcase page for PNG export

What is next

  • Publish as a Figma team library for consumer files
  • Upsert variables instead of delete/recreate on each sync
  • Sheet primitive and tighter visual parity with the site
  • Same manifest driving a web prototype surface (longer-term)

Repo layout

src/lib/superbloom-figma/     → manifest + token export
packages/figma-superbloom/  → strict-sync plugin
pnpm figma:build            → export + bundle
Figma: Superbloom · Showcase → screenshot