# 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.

> Canonical page: https://elysiatools.com/en/tools/figma-tokens-export

- **Category:** Design

- **Keywords:** figma, design tokens, tokens studio, tailwind, shadcn, style dictionary, w3c dtcg, scss, css variables, theme, design system

## Overview

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.

## Inputs

- **Figma tokens JSON** (textarea): Figma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.
- **Target format** (select): Which target format to export the tokens to.
- **Color format** (select): How to re-render color tokens in the output. HSL space-separated is the shadcn convention.

## When to use

- When you need to export design tokens from Figma or Tokens Studio and integrate them directly into a Tailwind CSS configuration.
- When setting up a shadcn/ui theme and you need to convert hex colors into space-separated HSL CSS variables.
- When maintaining a cross-platform design system and you need to format raw JSON variables into Style Dictionary or SCSS formats.

## How it works

- Paste your Figma variables, Tokens Studio JSON, or Figma REST API rgba objects into the input area.
- Select your target format, such as Tailwind theme.extend, shadcn CSS variables, Style Dictionary, or SCSS.
- Choose your preferred color format output, including Hex, RGB, HSL space-separated, or HSL CSS.
- Copy the generated code directly into your project configuration files.

## Use cases

- Converting Figma design tokens to a Tailwind CSS theme configuration.
- Generating HSL-formatted CSS variables for a shadcn/ui project.
- Formatting raw Figma REST API JSON outputs into SCSS variables for legacy stylesheets.

## Frequently asked questions

### 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.

## Related tools

- [Grayscale Converter](https://elysiatools.com/en/tools/color-grayscale-converter): Convert colors to grayscale with multiple conversion methods and intensity control
- [Color Token Cascade Generator](https://elysiatools.com/en/tools/color-token-cascade-generator): Turn one primary hex color into a full design-token cascade with primary, accent, neutral, semantic tokens, CSS variables, and Style Dictionary JSON
- [ECharts Theme Token Extractor](https://elysiatools.com/en/tools/echarts-theme-token-extractor): Extract design tokens — colors, numbers, font sizes and strings — from an ECharts theme JSON and export them straight into your design system. Paste a theme object (the kind registered via echarts.init(dom, themeName)) and the tool walks every leaf, tagging each color (with optional named/rgb → hex normalization), spacing number, font size and string, then emits clean CSS variables, a Tailwind theme.extend config, Style Dictionary tokens.json, or SCSS variables. Bridges the gap between an ECharts visualization theme and Figma/CSS/Tailwind design tokens without copying each value by hand.
- [Image Palette to Design Tokens](https://elysiatools.com/en/tools/image-to-design-tokens): Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each
- [API Latency Budget Planner](https://elysiatools.com/en/tools/api-latency-budget-planner): Plan and visualise an API latency budget. Enter a P99 target (e.g. ≤ 300ms) and per-stage allocations (DNS, TCP, TLS, TTFB, Processing, Network) to see a live waterfall, budget utilisation, and over-budget warnings. Optionally paste an OpenTelemetry or Datadog trace to reverse-engineer a measured allocation.
- [CSV to Database Migration Planner](https://elysiatools.com/en/tools/csv-to-database-migration-planner): Infer a relational schema from CSV data and generate create-table plus ALTER migration plans for PostgreSQL, MySQL, SQLite, or SQL Server
- [JSONata Query & Transform Studio](https://elysiatools.com/en/tools/jsonata-query-transform-studio): Preview JSONata-style queries and transformations, compare results across sample payloads, and export the transformed output as JSON, CSV, YAML, or Markdown
- [JWK Generator & Parser](https://elysiatools.com/en/tools/jwk-generator): Generate JSON Web Keys (JWK) for RSA, EC (P-256/P-384/P-521/secp256k1), and OKP (Ed25519/Ed448/X25519/X448), or parse an existing JWK to inspect its parameters, thumbprint, and metadata

## Samples

- [JWT Samples](https://elysiatools.com/en/samples/jwt-samples): Comprehensive JWT examples from basic token structure to advanced security implementations
- [Postman Collections - API Testing](https://elysiatools.com/en/samples/postman-collections): Comprehensive Postman collection examples including API testing, automation scripts, environment variables, mock servers, and advanced testing patterns for REST APIs
- [Terraform Plan JSON Samples](https://elysiatools.com/en/samples/terraform-plan-json-samples): Sample Terraform plan JSON files exported from terraform show -json style payloads for dependency visualization and change review
- [Distributed Tracing Samples](https://elysiatools.com/en/samples/distributed-tracing-samples): Comprehensive distributed tracing examples using Jaeger, OpenTelemetry, and other modern observability tools for microservices architecture