Figma to your live website.
No redeploy.
A designer changes a colour in Figma, and every open page of your website updates within seconds. figma-live-tokens turns Figma variables and styles into CSS variables, Tailwind v3/v4, SCSS and JS. It can also run as a small live server that pushes design changes straight to the browser.
Try it: you are the designer
connecting…Ship your design system without waiting for a deploy.
Every colour, radius, space and font on this card comes from design tokens served live by figma-live-tokens.
Change anything on the left. Every visitor on this page sees the update at the same moment, so try it with this page open on your phone too.
Loading…
What it does
Variables and styles
Reads Figma Variables, including modes like Light and Dark. On plans without the Variables API it reads published colour, text and shadow styles instead.
Live, with no redeploy
A small server pulls from Figma on a schedule or on a webhook, then pushes new CSS to open pages over Server-Sent Events. One script tag on your site.
Tailwind v3 and v4
Generates a v4 @theme file or a v3 preset that points at CSS variables, so bg-brand and rounded-card restyle live too.
References and maths
Semantic tokens stay linked to primitives ({color.gray.900} becomes var(--color-gray-900)), and {space.unit} * 4 is calculated.
Themes done right
Each theme writes only the values that change. Dark gets a prefers-color-scheme block automatically.
Safe by default
If Figma is down or a token breaks, the last good CSS keeps being served, and /status tells you what went wrong.
Quick start
# Figma → Settings → Security → Personal access tokens export FIGMA_TOKEN=figd_… npx @tirthlabs/figma-live-tokens build \ --figma https://www.figma.com/design/AbC123/Website \ -f css,tailwind4,js -o src/tokens ✔ 148 tokens + themes: dark → src/tokens/tokens.css, src/tokens/tailwind.theme.css, src/tokens/tokens.js
# on any small server npx @tirthlabs/figma-live-tokens serve \ --figma <file-url> --webhook-passcode "$SECRET" <!-- on your website --> <script src="https://tokens.yoursite.com/client.js" defer></script> # Figma webhook → https://tokens.yoursite.com/webhook