Figma Token Export
Export the entire Urbicon UI design token system as Figma-compatible JSON. Works with the Tokens Studio for Figma plugin.
6
Color Palettes
67
Color Shades
14
Semantic Tokens
11
Spacing Scale
6
Border Radii
5
Shadows
Token Preview
{
"color": {
"neutral": {
"0": {
"value": "oklch(1 0 0)",
"type": "color"
},
"50": {
"value": "oklch(0.98 0.005 240)",
"type": "color"
},
"100": {
"value": "oklch(0.95 0.008 240)",
"type": "color"
},
"200": {
"value": "oklch(0.89 0.012 240)",
"type": "color"
},
"300": {
"value": "oklch(0.83 0.014 240)",
"type": "color"
},
"400": {
"value": "oklch(0.7 0.015 240)",
"type": "color"
},
"500": {
"value": "oklch(0.55 0.016 240)",
"type": "color"
...How to Use
1
Install Tokens Studio
Install the "Tokens Studio for Figma" plugin from the Figma Community.
2
Import Tokens
Open the plugin, go to Settings, and paste the JSON or upload the downloaded file under "Import".
3
Apply to Figma Styles
Click "Create Styles" in the plugin to generate Figma color styles, spacing variables, and effect styles from the tokens.
4
Sync with Code
Changes in Figma can be synced back to code via Tokens Studio's Git integration, keeping design and code tokens in sync.
Token Categories
color Foundation OKLCH palettes (6 scales)
semantic Surface, text, and border tokens
spacing Spacing scale (0–64px)
borderRadius Radius tokens (none–full)
shadow Box shadow tokens (xs–lg)
Programmatic Usage
import { generateFigmaTokensJSON } from
'@urbicon-ui/blocks';
const json = generateFigmaTokensJSON();
// Write to file or send to API