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.config.mjs
export default {
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 →