Figma Token Export
Export the Urbicon UI design tokens — foundation palettes, semantic surface/text/border roles (light-mode values), spacing, radii, and shadows — as Figma-compatible JSON. Works with the Tokens Studio for Figma plugin.
8
Color Palettes
93
Color Shades
28
Semantic Tokens
11
Spacing Scale
13
Border Radii
5
Shadows
Token Preview
{
"color": {
"neutral": {
"0": {
"value": "oklch(1 0 0)",
"type": "color"
},
"25": {
"value": "oklch(0.985 0.003 240)",
"type": "color"
},
"50": {
"value": "oklch(0.965 0.006 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"
...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 (8 scales)
semantic Surface, text, and border roles (light-mode values)
spacing Spacing scale (0–64px)
borderRadius Radius tokens (xs–4xl + semantic tiers)
shadow Box shadow tokens (xs–lg)
Programmatic Usage
import { generateFigmaTokensJSON } from
'@urbicon-ui/blocks';
const json = generateFigmaTokensJSON();
// Write to file or send to API