Import From Anywhere
🎨
Figma Variables
Import tokens directly from Figma Variables API
📖
Style Dictionary
Convert Style Dictionary JSON to any output format
🎯
Tokens Studio
Sync with Tokens Studio for Figma
📝
Custom JSON
Define tokens in a simple JSON format
See it in action
buoy-cli
$
⚓ Reading design tokens from Figma...
✓ Found 24 color tokens
✓ Found 8 spacing tokens
✓ Found 6 typography tokens
⚓ Generating token files...
✓ Created tokens.css
✓ Created tokens.json
✓ Created tailwind.config.js extension
Build complete! 3 files generated
Output to Any Platform
CSS Variables
tokens.css JSON
tokens.json Tailwind Config
tailwind.config.js SCSS Variables
_tokens.scss TypeScript Constants
tokens.ts iOS Swift
Tokens.swift Android XML
tokens.xml Compose
Tokens.kt Simple Configuration
.buoy.yaml
# .buoy.yaml
build:
# Token source
source:
type: figma
fileKey: your-figma-file-key
# Or use Style Dictionary
# type: style-dictionary
# path: "./tokens.json"
# Output formats
outputs:
- format: css
path: "./src/tokens.css"
- format: tailwind
path: "./tailwind.tokens.js"
- format: json
path: "./tokens.json"
# Transform options
transforms:
colorFormat: hsl # rgb, hsl, hex
spacingUnit: rem # px, rem, em
prefix: "--ds-" # CSS variable prefix Pro Feature
Build with Figma sync and advanced transforms requires a Pro subscription. The open source CLI supports local JSON sources.
View pricing →