figma-developerlisted
Install: claude install-skill NafisRayan/100x-Agent-Toolkit
# 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](https://www.figma.com/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
```bash
# .env
FIGMA_ACCESS_TOKEN=figd_...
```
### Install Figma Client
```bash
npm install node-fetch
```
### Test Connection
```typescript
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
```typescript
// 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('E