What input formats does this tool support?

It supports Tokens Studio/W3C JSON, legacy Tokens Studio JSON, plain nested JSON values, and Figma REST API rgba objects.

How does the tool handle tokens without an explicit type?

It uses type inference: hex/rgb/named colors become colors, values with units like px/rem become dimensions, pure numbers become numbers, and other values become strings.

Can I convert colors to shadcn/ui compatible HSL variables?

Yes, select the shadcn target and set the color format to HSL space-separated to match the Tailwind hsl(var(--x)) convention.

Does this tool support SCSS variables?

Yes, you can export your design tokens directly as SCSS variables formatted with dollar-sign prefixes.

Is there support for Style Dictionary?

Yes, you can export to the canonical Style Dictionary / W3C Design Tokens Community Group (DTCG) shape.

Elysia Tools

Navigation

Design

Figma Tokens Export

Paste a Figma / Tokens Studio variables JSON and export to Tailwind, shadcn CSS variables, Style Dictionary, or SCSS. Preserves color, spacing and font tokens with type inference.

Details

What this tool helps you do

Paste a Figma / Tokens Studio variables JSON and export it to one of four popular targets:

Tailwind theme.extend — auto-maps color/* → colors, spacing/* → spacing, fontSize/* → fontSize, fontFamily/* → fontFamily, etc. Nested paths become nested objects with a DEFAULT key where appropriate.
shadcn/ui CSS variables — the HSL-space-separated convention (--background: 0 0% 100%) so Tailwind's hsl(var(--x)) wrapper works out of the box.
Style Dictionary / W3C DTCG — re-emits the canonical { $value, $type } shape, useful as a canonical interchange format.
SCSS variables — $color-brand-primary: #2563eb; style.

Accepted input shapes

Tokens Studio / W3C: { color: { brand: { $value: "#fff", $type: "color" } } }
Legacy Tokens Studio: { color: { brand: { value: "#fff", type: "color" } } } (no $)
Plain nested values: { color: { brand: "#fff" } }
Figma REST API rgba objects: { r: 0.5, g: 0.3, b: 0.9 }

Type inference — when a token has no explicit $type, the tool infers it: #hex / rgb() / named colors → color; values with px/rem/em/% units → dimension; pure numbers → number; everything else → string. The Color format option re-renders every color token as hex, rgb(), hsl (shadcn-style space-separated), or hsl() CSS, regardless of how it was authored.

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Prepared example runs

Click an example to fill the form automatically. File inputs still need an upload.

2 examples

Tokens Studio → Tailwind

A small brand palette + spacing scale exported to Tailwind theme.extend.

<div class="ft-wrap">3 tokens · 2 colors. colors: { brand: { primary: '#2563eb', secondary: '#9333ea' } }, spacing: { md: '16px' }</div>

Brand palette → shadcn HSL

The same palette as shadcn CSS variables, HSL space-separated.

<div class="ft-wrap">--color-brand-primary: 221% 83% 53%;</div>

Inputs

Set the required fields, then run the tool.

3 options

ContentPaste or type the main input values.1

Figma tokens JSONtextareaRequiredFigma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.

SettingsAdjust formats, ranges, numbers, and modes.2

Target formatselectOptionalWhich target format to export the tokens to.Color formatselectOptionalHow to re-render color tokens in the output. HSL space-separated is the shadcn convention.

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Examples that match this tool

Continue with connected tools and hubs

{ "color": { "brand": { "primary": { "$value": "#2563eb", "$type": "color" }, "secondary": { "$value": "#9333ea", "$type": "color" } } }, "spacing": { "md": { "$value": "16px", "$type": "spacing" } } }

Figma Tokens Export

What this tool helps you do

Run this tool

Prepared example runs

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Prepared example runs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Exporting Tokens Studio JSON to Tailwind CSS

2. Converting Brand Palette to shadcn/ui HSL Variables

FAQ

JWT Samples

Postman Collections - API Testing

Terraform Plan JSON Samples

Distributed Tracing Samples

Grayscale Converter

Color Token Cascade Generator

ECharts Theme Token Extractor

Image Palette to Design Tokens

JSON Interchange and Format Translation Tools

JSON Inspection, Diff, and Transformation Tools

JSON Schema, Mock Data, and API Fixture Generators

JSON Formatting, Diff, and Normalization Tools