Figma Code Connect CLI: the six commands that exist

Google's AI Overview for "figma code connect cli" tells you to run npx figma connect init. There is no init command. There never was one in version 2, and the CLI reference lists six commands, none of them init.

Quick answer: the Figma Code Connect CLI ships as @figma/code-connect (binary name figma, Node 18 or newer) and has exactly six subcommands: publish, unpublish, parse, create, migrate and preview. Running bare figma connect starts an interactive wizard instead. Version 2.0.0, published 18 August 2026, stopped maintaining the framework-specific parsers that almost every ranking tutorial still teaches, so publish now exits with migration guidance on a parser-based project. It needs an Organization or Enterprise plan with a full Design or Dev Mode seat, plus a token carrying Code Connect Write and File content Read.

What the Code Connect CLI actually does

Figma's own description, from the project README: "Code Connect is a tool for connecting your design system components in code with your design system in Figma. When using Code Connect, Figma's Dev Mode will display true-to-production code snippets from your design system instead of autogenerated code examples."

The CLI is the half of that which runs in your repository. You write one small file per component, the CLI parses and uploads them, and Figma then serves your snippet in Dev Mode and through the Figma MCP server instead of guessing at CSS.

The decision of whether the mapping work pays off at all is a separate question, and we answered it with Figma's own measurements in Figma Code Connect: worth it when AI writes the code?. This page is the command reference that SERP is missing.

The six commands

Taken from the CLI reference and cross-checked against the v2.0.1 source in cli/src/commands/connect.ts:

Command	What it does
npx figma connect	Starts the interactive setup wizard (no subcommand)
npx figma connect create <figma-node-url>	Generates a boilerplate template file for one node URL
npx figma connect publish	Parses your files and uploads the mappings to Figma
npx figma connect unpublish	Removes published mappings, all of them or one --node
npx figma connect parse	Parses and prints the result as JSON on stdout
npx figma connect preview [files...]	Renders how a snippet will look in the Inspect panel
npx figma connect migrate	Converts parser-based files into template files

Shared flags work on every subcommand: -r --dir, -t --token, -c --config, -o --outFile, -o --outDir, -a --api-url, -v --verbose, --dry-run and --skip-update-check.

Three flags are worth knowing before you need them:

• publish --force overwrites existing UI-created mappings when they conflict with the files you are publishing. Without it, a component someone mapped inside Figma will block your file.
• publish --batch-size <n> exists specifically for "request too large" errors on big systems.
• preview --max-combinations <n> defaults to 500 and cannot exceed 500, so a component with many boolean and variant axes will be truncated rather than fully enumerated.

preview and parse are the two commands no tutorial on page one mentions, and preview is the one that saves the most time: it renders the snippet locally before you publish anything.

Why version 2 made every ranking tutorial stale

The release notes for 2.0.0, published 18 August 2026, open with a warning: "Framework-specific parsers will no longer receive updates or support. Template files are now the only actively maintained way of using Code Connect."

The breaking change underneath it is the part that bites: "Framework-specific parsers can now only be used by figma connect migrate and figma connect unpublish. Other commands exit with guidance to migrate parser-based Code Connect to template files."

So if you follow a 2024 or early-2025 walkthrough, write a Button.figma.tsx using the React parser, and run publish, the command does not publish. It exits and tells you to migrate. Figma's migration guide states the cutoff plainly: "As of August 17th, 2026, we are no longer updating or actively maintaining the legacy parsers."

The escape hatch is in the same release note: "If you wish to continue using framework-specific parsers, install Code Connect v1 with npm install --save-dev @figma/code-connect@1."

2.0.1 followed on 10 September 2026 with a single fix, for preview rejecting a component declared inside a .figma.batch.json file.

The current path, start to finish

1. Install. npm install --global @figma/code-connect@latest. The package exposes a binary called figma, and requires Node 18 or newer.
2. Create a token with the right two scopes. The quickstart is specific: the personal access token needs the "Code Connect scope set to Write and the File content scope set to Read." Set it as FIGMA_ACCESS_TOKEN rather than passing --token on every call.
3. Add figma.config.json to the project root, next to package.json or your .xcodeproj. The keys live under a codeConnect object: include and exclude as globs relative to the config file, plus label (what Figma shows next to your snippet) and language (syntax highlighting).
4. Generate one file. npx figma connect create "<figma-node-url>" writes the boilerplate for that node. Edit it until the snippet is the code you actually want a developer, or an agent, to copy.
5. Preview, then publish. npx figma connect preview Button.figma.tsx renders it locally. npx figma connect publish ships it. Add --dry-run first if you want the parse without the upload.

Already on parsers? Run npx figma connect migrate. The guide describes exactly what happens: "The command works by first parsing your whole project for Code Connect objects, then saving those objects as template files (.figma.ts)." Treat the result as a draft, because Figma says so: "It's important to treat the migration output as a starting point rather than production-ready Code Connect. The files will render correctly, but there are usually opportunities to simplify them."

When publish finds nothing

Checked on 12 October 2026, the figma/code-connect tracker has 196 open issues, and a GitHub search for the exact string "No Code Connect files found" returns nine issues, four of them still open. Three CLI bug reports rank on page one or two of this very query, which tells you how much of the traffic here is people debugging rather than learning.

✅ Do this first:

• Check the plan. The README states it directly: "Code Connect is available on Organization and Enterprise plans and requires a full Design or Dev Mode seat to use." On Professional, nothing you do in the terminal will work.
• Re-check both token scopes. Code Connect Write and File content Read. One missing scope produces a failure that reads like a parsing problem.
• Run publish --dry-run -v. Verbose plus dry run separates "my globs match nothing" from "the upload is rejected".
• Confirm include globs are relative to the config file, not to the repo root, if those differ.
• In a monorepo, run from the directory the config file sits in.

❌ Do not assume these:

• That figma connect init will scaffold anything. It is not a command, and issue #222, "Interactive setup runs with no output", open since December 2024, is what people actually hit when they go looking for an init step in a monorepo.
• That a published mapping guarantees agent output. Issue #340 reports an Angular mapping that publishes cleanly, shows "connected" in Dev Mode, and still gets generic React and Tailwind back from the MCP server.
• That silence means a bug on your side. Issue #311, a Vue and HTML monorepo hitting "No Code Connect files found" plus a template ParserError, has had no reply since September 2025.

The Figma forum thread Code connect preview not showing (April 2026) is the clearest statement of where people actually are: "I'm using the framework agnostic Template API (moved away from the React specific approach) and the CLI (v1.4.3) to publish code connect files".

What the CLI cannot do for you

Code Connect answers "what does this Figma component look like in our code." It does not answer "which component should exist here, and what should the whole screen look like."

The top organic result for this query is a thread in r/FigmaDesign, How are you using Figma's Code Connect or Figma MCP, and the opening post frames it as exploration rather than a solved workflow: "Over the past months, I've been exploring how Figma's MCP Server could help designers bridge the gap between design systems and real code. I experimented ..."

Two gaps survive a perfect mapping layer. Coverage: every component you have not mapped falls back to a guess. And taste: an agent working on a greenfield screen, or on a brand whose Figma library it cannot reach, has no colors, type scale or spacing rhythm to work from at all.

Where a DESIGN.md fits

A DESIGN.md is the other file. Code Connect maps existing components in one Figma organization. A DESIGN.md is a portable plain-text description of a visual language: tokens plus the reasoning, readable by any agent in any repo, with no plan gate and no node URLs.

They stack rather than compete. Code Connect tells the agent what your Button is. A DESIGN.md tells it what good looks like when there is no Button yet.

1. Browse the duply library and pick a system whose look you want, for example Linear.
2. Drop the DESIGN.md into your repo root.
3. Point your agent at it, the way Give your AI agent a design system walks through.
4. Keep Code Connect for the components you have already built and mapped.

FAQ

Is there a figma connect init command? No. The CLI reference lists publish, unpublish, parse, create, preview and migrate, and the v2.0.1 source registers no init. Run bare npx figma connect for the interactive wizard, or npx figma connect create "<node-url>" for a single file.

What is the current Code Connect CLI version? 2.0.1, published 10 September 2026. 2.0.0 landed on 18 August 2026 and is the release that deprecated the parsers.

How do I install the Figma Code Connect CLI? npm install --global @figma/code-connect@latest. It installs a binary named figma and needs Node 18 or newer. npx figma connect <command> works without a global install.

Which token scopes does it need? Two: Code Connect set to Write, File content set to Read. Export it as FIGMA_ACCESS_TOKEN or pass --token.

Can I use the Code Connect CLI on a Professional plan? No. Figma's README restricts it to Organization and Enterprise plans, with a full Design or Dev Mode seat.

My React .figma.tsx files stopped publishing. What broke? Version 2 did, deliberately. Parser-based files now work only with migrate and unpublish. Either run npx figma connect migrate to convert them to .figma.ts template files, or pin version 1 with npm install --save-dev @figma/code-connect@1.

Is there a way to check a snippet before publishing? Yes, and it is the most underused command here: npx figma connect preview Button.figma.tsx. Add --inspect to list the component's properties and variants without rendering, or --all to render every boolean and variant combination, capped at 500.

Does Code Connect make AI agents use my components? It makes your real snippet available to them, which is necessary and not sufficient. Issue #340 is a live example of a published Angular mapping that the MCP server answered with generic React. For visual direction on unmapped or greenfield work, you still need a design reference like a DESIGN.md.

Summary

• Six commands, plus a bare-command wizard. No init, despite what the AI Overview on this query says.
• Version 2.0.0 (18 August 2026) left the framework parsers unmaintained; template files are the only maintained path, and migrate is the one-command bridge.
• The two things that silently break a first setup are the plan gate (Organization or Enterprise, full Design or Dev Mode seat) and the two token scopes.
• preview before publish, always. It is local, free and the fastest way to see what Dev Mode will show.
• A mapped component library still leaves the taste problem open, which is where a portable DESIGN.md earns its place.

Related reading

• Figma Code Connect: worth it when AI writes the code?
• Figma MCP server: what it gives an agent
• What is a DESIGN.md file?