Figma Connect

Bridge between Figma MCP server (reads designs, generates code, extracts tokens) and Code Connect CLI (publishes persistent component mappings to Dev Mode). Use MCP tools for READ operations, CLI for PUBLISH operations.

Prerequisites & Dual Auth

This skill requires two independent authentication paths:

MCP Auth (OAuth) — for all mcp__claude_ai_Figma__* tools:

1. Call whoami() to check. If it fails, the user needs to authenticate the Figma MCP server via their MCP client settings (OAuth flow).
2. Requires Full or Dev seat on a paid Figma plan.

CLI Auth (Token) — for npx figma connect publish/parse/create:

1. Check: [ -n "$FIGMA_ACCESS_TOKEN" ] && echo "Token set" || echo "Token missing" or npx figma connect --version
2. If missing: create a personal access token at figma.com/developers with scopes "Code Connect: Write" and "File content: Read"
3. Set via: export FIGMA_ACCESS_TOKEN=<token> (prefer .env with .gitignore entry to avoid shell history exposure)

Always check both before workflows that use both (Setup, Publish, Roundtrip). Design-to-Code and Token Extraction only need MCP auth.