Figma Code Connect — MCP vs CLI Plan Requirements

Two Approaches

Figma Code Connect maps Figma components to codebase components so that Dev Mode shows real component code instead of generated CSS.

MCP Approach (`send_code_connect_mappings`)

Tool: mcp__plugin_figma_figma__send_code_connect_mappings
Requires: Figma Organization or Enterprise plan
Works inside Claude Code via the Figma MCP server
Fails silently or with a permissions error on Starter/Professional plans

CLI Approach (`figma connect publish`)

Works on all Figma plan tiers including free
Install: npm install --save-dev @figma/code-connect
Define mappings in .figma.tsx files alongside your components
Publish: npx figma connect publish

CLI Workflow

# 1. Install
npm install --save-dev @figma/code-connect

# 2. Authenticate
npx figma connect auth

# 3. Create mapping files (one per component)
# NavLink.figma.tsx, BtnPrimary.figma.tsx, etc.

# 4. Publish to Figma Dev Mode
npx figma connect publish

Mapping File Example

// NavLink.figma.tsx
import figma from '@figma/code-connect'
import { NavLink } from './NavLink'

figma.connect(NavLink, 'https://www.figma.com/design/FILE_KEY/...?node-id=...', {
  props: {
    label: figma.string('Label'),
    href: figma.string('Href'),
  },
  example: ({ label, href }) => <NavLink href={href}>{label}</NavLink>,
})

When to Use Each

Situation	Approach
Org/Enterprise plan, want in-context MCP publishing	MCP `send_code_connect_mappings`
Starter/Professional plan	CLI only
CI/CD automated publishing	CLI (scripted)
One-off interactive publish during Claude Code session	Either (if Org plan)

Shumiland Session: 5 Components Published via CLI

NavLink, BtnPrimary, BtnGradient, BtnDetails, AccordionItem — all published to Dev Mode via CLI without Org plan.

2 KiB Raw Blame History