Documentation
Import Formats
ReframeUI reads tokens from nine source formats. Find your format below to see what a valid input looks like and any known limitations before you import.
DTCG
The W3C Design Tokens Community Group format. Uses $value and $type keys per token.
{
"color": {
"brand": {
"$value": "#0066FF",
"$type": "color"
},
"surface": {
"$value": "#FFFFFF",
"$type": "color"
}
},
"spacing": {
"md": {
"$value": "16px",
"$type": "dimension"
}
}
}Style Dictionary
Amazon's token transform tool format. Tokens nest by category, with a value key at each leaf.
{
"color": {
"brand": {
"value": "#0066FF"
},
"surface": {
"value": "#FFFFFF"
}
},
"spacing": {
"md": {
"value": "16px"
}
}
}Tokens Studio
The JSON format exported by the Tokens Studio Figma plugin. Each token carries a value and type field.
{
"brand": {
"value": "#0066FF",
"type": "color"
},
"surface": {
"value": "#FFFFFF",
"type": "color"
},
"spacing-md": {
"value": "16px",
"type": "spacing"
}
}Tailwind
The theme.extend object from a Tailwind CSS config, expressed as JSON.
{
"colors": {
"brand": "#0066FF",
"surface": "#FFFFFF"
},
"spacing": {
"md": "16px",
"lg": "24px"
},
"borderRadius": {
"sm": "4px",
"md": "8px"
}
}CSS Variables
Custom properties defined in a :root {} block. Token names map directly from the property names, minus the -- prefix.
:root {
--color-brand: #0066FF;
--color-surface: #FFFFFF;
--spacing-md: 16px;
--spacing-lg: 24px;
--border-radius-sm: 4px;
}Figma Variables
The variable export shape from the Figma REST API. Tokens are organized into collections, each with one or more modes.
{
"collections": [
{
"name": "Primitives",
"modes": ["Default"],
"variables": [
{
"name": "color/brand",
"resolvedType": "COLOR",
"valuesByMode": {
"Default": { "r": 0, "g": 0.4, "b": 1, "a": 1 }
}
},
{
"name": "spacing/md",
"resolvedType": "FLOAT",
"valuesByMode": {
"Default": 16
}
}
]
}
]
}Chakra UI
The theme object from a Chakra UI installation. Token scales are grouped by category: colors, space, fontSizes, and others.
{
"colors": {
"brand": {
"500": "#0066FF",
"600": "#0052CC"
}
},
"space": {
"4": "16px",
"6": "24px"
},
"fontSizes": {
"sm": "14px",
"md": "16px"
}
}Ant Design
The flat token map from an Ant Design v5 theme config. Keys like colorPrimary map directly to their values.
{
"colorPrimary": "#0066FF",
"colorBgContainer": "#FFFFFF",
"colorText": "#1A1A1A",
"borderRadius": 8,
"fontSize": 14
}Tailwind JS
A full module.exports Tailwind config file. Static values are imported; anything that cannot be evaluated at parse time is skipped.
module.exports = {
theme: {
extend: {
colors: {
brand: "#0066FF",
surface: "#FFFFFF"
},
spacing: {
md: "16px",
lg: "24px"
}
}
}
}Dynamic values using functions or withOpacity are not supported and will be skipped on import. Use static values for all tokens you want to bring in.
Next steps
Ready to import? Head to Getting Started to connect your first workspace.
Getting Started →