Figma Developer

Figma Developer

Turn Figma designs into production-ready code.

Core Principle

Design is the single source of truth.

Designers work in Figma. Developers build from Figma. The bridge between them should be automated, not manual.

---

Phase 1: Setup & Authentication

Get Figma Access Token

1. Go to Figma Settings
2. Scroll to "Personal access tokens"
3. Click "Generate new token"
4. Name it (e.g., "Development")
5. Copy and save securely

Environment Setup

# .env
FIGMA_ACCESS_TOKEN=figd_...

Install Figma Client

npm install node-fetch

Test Connection

import { FigmaClient } from '@/integrations/design-tools/figma/client'

const client = new FigmaClient({
  accessToken: process.env.FIGMA_ACCESS_TOKEN
})

// Test with a public file
const file = await client.getFile('abc123xyz')
console.log('Connected! File:', file.name)

---

Phase 2: Extract Design Tokens

What Are Design Tokens?

Design tokens are design decisions (colors, typography, spacing) stored as code.

Benefits:

• Single source of truth
• Consistent across platforms
• Easy to update
• Type-safe

Extract Tokens from Figma

// scripts/sync-design-tokens.ts

import { FigmaClient } from '@/integrations/design-tools/figma/client'
import fs from 'fs/promises'

async function syncDesignTokens() {
  const client = new FigmaClient()
  const fileKey = 'YOUR_FIGMA_FILE_KEY'

  console.log('Extracting design tokens...')

  // Extract tokens
  const tokens = await client.extractDesignTokens(fileKey)

  console.log(`Found:`)
  console.log(`  ${tokens.colors.length} colors`)
  console.log(`  ${tokens.typography.length} text styles`)
  console.log(`  ${tokens.spacing.length} spacing values`)

  // Export as CSS
  const css = await client.exportTokensAsCSS(fileKey)
  await fs.writeFile('src/styles/design-tokens.css', css)

  // Export as JSON
  const json = await client.exportTokensAsJSON(fileKey)
  await fs.writeFile('src/styles/design-tokens.json', json)

  console.log('Design tokens synced!')
}

syncDesignTokens()