Skip to main content

🎨 Figma Integration

Status: ✅ Complete - Ready for UX/UI Updates
Last Updated: December 13, 2025

Overview​

The Figma integration enables design-to-code automation, allowing the Reformer Platform to:

  • Extract design tokens from Figma files
  • Export design assets (images, SVGs)
  • Access design files and components programmatically
  • Sync design changes to code automatically
  • Support AI-assisted component generation

Perfect for: Design system sync, component generation, design-to-code workflows

Architecture​

Components​

  1. Figma Service (reformer-platform/services/figma-service.js)

    • Core service layer for Figma API interactions
    • Handles authentication and API calls
    • Provides reusable methods for file access

  2. HTTP API Endpoints (reformer-platform/src/api/figma.js)

    • RESTful endpoints for web application integration
    • Status checks, file access, image export
    • Design token extraction

  3. MCP Server (reformer-platform/mcp-servers/figma-mcp/)

    • Model Context Protocol server for AI assistant access
    • Direct Figma API integration for design-to-code workflows
    • 9 specialized tools for design operations

Setup​

1. 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., "Reformer Platform")
  5. Copy the token immediately (shown only once)

2. Configure Environment Variables​

Render Production:

  • FIGMA_ACCESS_TOKEN - Your Figma personal access token
  • FIGMA_DASHBOARD_FILE_KEY - (Optional) Dashboard design file key
  • FIGMA_PORTAL_FILE_KEY - (Optional) Client portal design file key

Getting File Keys:

  1. Open your Figma file
  2. Copy the file key from URL: https://www.figma.com/file/FILE_KEY/File-Name
  3. Add to Render environment variables

3. Verify Configuration​

# Test status endpoint
curl https://reformer-platform.onrender.com/api/figma/status

# Expected response:
{
  "success": true,
  "data": {
    "configured": true,
    "hasAccessToken": true,
    "hasDashboardFileKey": true,
    "hasPortalFileKey": true
  }
}

HTTP API Endpoints​

Status Check​

GET /api/figma/status

Returns configuration status and available file keys.

Response:

{
  "success": true,
  "data": {
    "configured": true,
    "hasAccessToken": true,
    "hasDashboardFileKey": true,
    "hasPortalFileKey": false,
    "dashboardFileKey": "AbCdEfGhIjKlMnOpQrSt",
    "portalFileKey": null
  }
}

Get File Data​

GET /api/figma/file/:fileKey

Retrieves complete file data and metadata.

Parameters:

  • fileKey - Figma file key from URL

Response:

{
  "success": true,
  "data": {
    "name": "Dashboard Design",
    "lastModified": "2025-12-13T10:00:00Z",
    "document": { /* Figma document structure */ }
  }
}

Get Specific Nodes​

GET /api/figma/file/:fileKey/nodes?ids=123:456,789:012

Retrieves specific nodes from a file.

Query Parameters:

  • ids - Comma-separated node IDs

Export Images​

POST /api/figma/file/:fileKey/images
Content-Type: application/json

{
  "nodeIds": ["123:456"],
  "format": "png",
  "scale": 2
}

Exports nodes as images.

Body Parameters:

  • nodeIds - Array of node IDs to export
  • format - Image format: png, svg, jpg, pdf
  • scale - Scale factor: 1, 2, 4

Response:

{
  "success": true,
  "data": {
    "images": {
      "123:456": "https://figma.com/file/.../export/..."
    }
  }
}

Extract Design Tokens​

GET /api/figma/file/:fileKey/tokens

Extracts design tokens (colors, typography, spacing, etc.) from a file.

Response:

{
  "success": true,
  "data": {
    "colors": {
      "primary": "#FF5733",
      "secondary": "#33FF57"
    },
    "typography": {
      "fontFamily": { "16px": "Inter" },
      "fontSize": { "16px": "16px" }
    },
    "spacing": {},
    "borderRadius": {},
    "shadows": {}
  }
}

Get Comments​

GET /api/figma/file/:fileKey/comments

Retrieves comments for a file.

Get Version History​

GET /api/figma/file/:fileKey/versions

Retrieves version history for a file.

List Team Projects​

GET /api/figma/team/:teamId/projects

Lists all projects for a team.

List Project Files​

GET /api/figma/project/:projectId/files

Lists all files in a project.

MCP Server Tools​

The Figma MCP server provides AI assistants with direct access to Figma API. See MCP Servers for setup instructions.

Available Tools​

  1. get_figma_status - Check integration status
  2. get_figma_file - Get file data
  3. get_figma_nodes - Get specific nodes
  4. get_figma_images - Export images
  5. get_figma_tokens - Extract design tokens
  6. get_figma_comments - Get comments
  7. get_figma_versions - Get version history
  8. get_team_projects - List team projects
  9. get_project_files - List project files

Use Cases​

Design Token Sync​

Extract design tokens from Figma and sync to your design system:

// Extract tokens
const response = await fetch('/api/figma/file/DASHBOARD_FILE_KEY/tokens');
const { data } = await response.json();

// Sync to Tailwind config
// Update CSS variables
// Update design system documentation

Component Generation​

Get component nodes and generate React components:

// Get component nodes
const response = await fetch('/api/figma/file/FILE_KEY/nodes?ids=component:123');
const { data } = await response.json();

// Generate React component code
// Export images for assets

Design Review​

Track design changes and comments:

// Get comments
const comments = await fetch('/api/figma/file/FILE_KEY/comments');

// Get version history
const versions = await fetch('/api/figma/file/FILE_KEY/versions');

Design-to-Code Workflow​

Step 1: Extract Design Tokens​

curl https://reformer-platform.onrender.com/api/figma/file/DASHBOARD_FILE_KEY/tokens

Step 2: Sync to Design System​

Update Tailwind config, CSS variables, and design system documentation with extracted tokens.

Step 3: Export Component Assets​

curl -X POST https://reformer-platform.onrender.com/api/figma/file/FILE_KEY/images \
  -H "Content-Type: application/json" \
  -d '{"nodeIds": ["component:123"], "format": "svg"}'

Step 4: Generate Components​

Use exported assets and design tokens to generate React components.

Troubleshooting​

"401 Unauthorized"​

  • Verify your FIGMA_ACCESS_TOKEN is valid
  • Check token hasn't expired in Figma settings
  • Regenerate token if needed

"404 Not Found"​

  • Verify file key is correct
  • Check file key matches the URL format
  • Ensure file is accessible with your token

"429 Too Many Requests"​

  • Figma API has rate limits
  • Wait a few minutes and retry
  • See Figma API docs for limits

File Key Not Found​

  • Add file keys to Render environment variables
  • Restart Render service after adding variables
  • Verify keys match Figma file URLs

Resources​

Status​

Current Status: ✅ Complete and configured
Next Steps: Add file keys and begin UX/UI rebuild
Timeline: Ready for design-to-code workflow