figma-code-connect

figma-code-connect26 wordsInspect firstinspect-then-install

Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants.

Quick Start

Install:

npx skills add figma/mcp-server-guide --skill figma-implement-design --skill figma-generate-design --skill figma-code-connect -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

Use: /figma-code-connect

Works with Claude Code, Gemini CLI, OpenCode, and other agentskills.io-compatible agents.

Curated external (hand-maintained)

Composed compose-external-wave-4 using authoring SSOT (docs/src/authoring/skills/figma-code-connect.mdx) + research. Do not run wagents docs generate on this file (HAND-MAINTAINED sentinel). Run external-skill-auditor before using in production or promoting.

What It Does

Official Figma skill for connecting published Figma design components to matching code implementations using Figma Code Connect. Enables design-system sync, prop mapping, and codegen from Figma to repos. Requires team library publish and appropriate Figma plan.

Harness Coverage

Targets verified harnesses: antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode.

Portable multi-harness install command:

npx skills add figma/mcp-server-guide --skill figma-implement-design --skill figma-generate-design --skill figma-code-connect -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode

Trust / Audit

Trust tier: Inspect first (needs-inspection)

Curated status: inspect-then-install

Risk notes: Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping openai/skills Figma variants.

Entry maintained via authoring + research for compose-external-wave-4; provenance and audit notes are authoritative there (research context is advisory).

Install Prerequisites

Install: npx skills add figma/mcp-server-guide --skill figma-code-connect --skill figma-generate-design --skill figma-implement-design -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode; status=inspect-then-install; selector=named (inferred from batch); policy=Inspect source, hooks, scripts, credentials, and dedupe before install.

Public Metadata

Field	Value
Source Type	curated-external
Display Source	figma/mcp-server-guide
Source Kind	github
Installability	portable command
Review State	curated
Trust Tier	needs-inspection
Target Agents	antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode

General

Field	Value
Name	figma-code-connect

Curated catalog entry

docs/src/authoring/skills/figma-code-connect.mdx (full SSOT excerpt)

---
name: "figma-code-connect"
description: "Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants."
title: "Figma Code Connect"
source_kind: "curated-external"
source: "figma/mcp-server-guide"
install_source: "figma/mcp-server-guide"
status: "inspect-then-install"
trust_tier: "needs-inspection"
provenance_status: "verified-install-command"
install_command: "npx skills add figma/mcp-server-guide --skill figma-implement-design --skill figma-generate-design --skill figma-code-connect -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode"
target_agents: [antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode]
source_url: "https://github.com/figma/mcp-server-guide"
notes: "Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants."
risk_notes: "Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants."
promotion_policy: "Inspect source, hooks, scripts, credentials, and dedupe before install."
provenance_evidence: "Curated `npx skills add` command with named `--skill` selectors under `inspect-then-install` in config/external-skills.md."
---

{/* GENERATED-AUTHORING: source=config/external-skills.md; entry=figma-code-connect; re-run migration to refresh */}

Official Figma MCP design-to-code skills. Requires Figma MCP token; prefer this source over overlapping `openai/skills` Figma variants.

Install / provenance (from authoring frontmatter + research):

Field	Value
install_command	npx skills add figma/mcp-server-guide --skill figma-implement-design --skill figma-generate-design --skill figma-code-connect -y -g -a antigravity claude-code codex crush cursor gemini-cli github-copilot grok opencode
source	figma/mcp-server-guide
source_url	https://github.com/figma/mcp-server-guide
trust_tier	needs-inspection
curated_status	inspect-then-install
target_agents	antigravity, claude-code, codex, crush, cursor, gemini-cli, github-copilot, grok, opencode

Resources

Skill Catalog Browse custom and external skills.

CLI Reference Install and manage skills.