Figma Integration Features
Design Token Sync
Import design tokens directly from Figma Variables and compare against your codebase.
Component Mapping
Map Figma components to code components and track coverage.
Style Comparison
Compare Figma styles (colors, typography, spacing) with implemented values.
Orphan Detection
Find components in code that don't exist in Figma, and vice versa.
Version Tracking
Track changes when Figma designs update and flag code that needs updating.
Export Tokens
Generate CSS variables, JSON, or TypeScript from Figma Variables.
How It Works
1
Connect Figma
Link your Figma file using an access token
2
Map Components
Buoy auto-maps Figma components to code
3
Detect Drift
See where code has drifted from design
4
Stay Synced
Get alerts when Figma updates
Configuration Example
buoy.config.mjs
// buoy.config.mjs
export default {
figma: {
// Your Figma file URL or key
file: 'https://figma.com/file/xxx',
// Access token (use env var in production)
token: process.env.FIGMA_TOKEN,
// Map Figma pages to code directories
mapping: {
'Components': 'src/components',
'Primitives': 'src/ui',
},
},
// Compare Figma variables to these tokens
tokens: './src/tokens',
}Pro Feature: Figma sync requires Buoy Pro. See pricing →