Brainforge Knowledge

figma-setup

2 min read

Figma Setup for Cursor

Purpose: Access Brainforge design files for website migration, design tokens, and design-to-code workflows.

1. Credentials

VariableLocationPurpose
FIGMA_USER_TOKENapps/platform/.env.local (or root .env.local)Figma REST API personal access token (optional)
Figma MCP.cursor/mcp.jsonOAuth on first use; primary way to get design context

1Password (team): Brainforge Platform Team vault → secure note Figma Brainforge Platform Token (value in notesPlain). For scripts or one-off curl, after op signin:

export FIGMA_USER_TOKEN="$(op read "op://Brainforge Platform Team/Figma Brainforge Platform Token/notesPlain")"

Use FIGMA_USER_TOKEN or X-Figma-Token depending on the API you call. Do not commit the token; prefer op read over pasting into files.

2. Figma MCP (Primary)

Cursor has built-in Figma MCP. To use it:

  1. Open a Figma file in the browser
  2. Copy the URL, e.g. https://figma.com/design/ABC123/FileName?node-id=1-2
  3. Extract fileKey (e.g. ABC123) and nodeId (e.g. 1:2 — replace - with :)
  4. Use get_design_context with fileKey and nodeId to get code, screenshot, and assets

MCP tools:

  • get_design_context — Primary tool; returns code + screenshot for design-to-code
  • get_metadata — Structure overview (node IDs, types, names)
  • get_screenshot — Screenshot only
  • get_figjam — For FigJam boards
  • whoami — Verify authentication

3. Figma REST API (Optional)

For programmatic access (e.g. listing files, bulk export), use a personal access token:

  1. Figma Account Settings → Personal access tokens
  2. Create token with required scopes
  3. Set FIGMA_USER_TOKEN in .env.local
# List project files (requires project_id)
curl -H "X-Figma-Token: $FIGMA_USER_TOKEN" \
  "https://api.figma.com/v1/projects/{project_id}/files"

4. Asset Map

See apps/platform/docs/figma-assets-map.md for what’s where in Brainforge Figma files.

5. References

Graph View

Backlinks