UI kitsOpen source

Tokenbench Starter

A token pipeline template that turns one JSON file into CSS, iOS and Android values

About this resource

Tokenbench Starter is a small repository for teams that already have a design language but no reliable way to move it into code. It includes a three-tier token structure (primitive, semantic, component), a build script that writes CSS variables, Swift and Kotlin constants, and a Figma file with variable collections named to match.

It's best for design-systems engineers who want a working example rather than a blog post about token naming. The code is Apache 2.0 licensed. The caveat: it is a pipeline, not a component library, so you get zero buttons or cards, and the Figma sync is a manual export step rather than a live plugin.

Highlights

  • 01Primitive, semantic and component tiers set up for you
  • 02Outputs CSS, Swift and Kotlin from one source
  • 03Figma variable names match the code names exactly

Tags

Related resources

More in UI kits
  • Open source

    A design-system starter with tokens, a Figma library and matching React components

    Free4.6
    • design system
    • tokens
  • Paid

    A finance dashboard kit with 420 components and charts that use real numbers

    $494.8
    • fintech
    • dashboard
  • Freemium

    Admin panel templates in Figma and Tailwind HTML, with a usable free core

    Free / $794.3
    • admin
    • tailwind
Live demo · The Asset Drawer— View template →