figma-connectlisted

Figma-to-code bridge combining Figma MCP server tools with the Code Connect CLI for end-to-end design implementation workflows. Use this skill when implementing UI components from Figma design URLs, publishing Code Connect mappings to Figma Dev Mode, extracting design tokens from Figma variables, setting up Figma Code Connect in a project, or running the full design-to-code roundtrip pipeline. Activate when the user shares a Figma design URL and wants code implementation, says 'implement from Figma', 'code connect', 'publish to dev mode', 'figma connect publish', 'extract design tokens from Figma', 'figma to code', 'connect components to Figma', 'set up code connect', 'sync figma tokens', 'figma variables to CSS', 'figma variables to Tailwind', 'map component to Figma', 'npx figma connect', or references any figma.com/design URL in a code implementation context. Do NOT activate for pure Figma file creation, FigJam diagrams, Figma plugin development, or Storybook setup — those are separate concerns.
anton-abyzov/vskill · ★ 35 · Web & Frontend · score 85

Install: claude install-skill anton-abyzov/vskill

# 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. ## Framework Detection Auto-detect the project framework to set MCP `clientFrameworks` param and CLI Code Connect label: | Detection Signal | Framework | Code Connect Label | `clientFrameworks` | |-----------------|-----------|-------------------|-------------------| | `package.json` has `react` | React | `React` | `react` | | `package.jso