---
title: Figma Code Connect — MCP vs CLI Plan Requirements
source: daily/2026-05-10.md
updated: 2026-05-10
tags: [figma, code-connect, mcp, cli]
---

# 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

```bash
# 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

```tsx
// 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.
