Figma Code Connectの設定方法｜UIとCLIの違い・実装コードの接続

2026年9月29日2026年10月3日

Figma Code Connectは、Figmaのコンポーネントとリポジトリ内の実装を対応付ける機能です。UI版はコードの場所を接続し、CLI版はプロパティに応じた実装例をDev ModeのInspectに表示できます。 UIで接続するだけで、実装スニペットがInspectに表示されるわけではありません。

この記事では、接続方法の選び方、UIの操作、CLIの準備と公開、表示されないときの確認順を説明します。2026年10月3日に確認した公式仕様に基づく説明で、Code Connectの接続・公開を実際に行った検証結果は含みません。公式の概要

UIとCLIのどちらを使うか

比較	Code Connect UI	Code Connect CLI
主な目的	Figmaコンポーネントとコードのファイルを対応付ける	実装スニペットとプロパティの対応を定義する
操作場所	Figmaの公開ライブラリ	リポジトリとターミナル
Inspectでの表示	ファイル名・コンポーネント名。実装スニペットは表示しない	定義したスニペットを表示
プロパティの対応	AIがコードから解釈する。明示的なマッピングはない	Boolean・Variantなどを明示的に対応付ける
MCPとの関係	対応するコードへの参照を提供	対応関係に加え、定義したコード例を提供

CLIで作成した接続もUIに表示されますが、その編集はCLIで行います。既存リポジトリへ案内したいならUI、バリアントを変更したときの使い方まで統一したいならCLIを選ぶと、設定範囲を決めやすくなります。公式比較

利用条件と準備

Code ConnectはOrganization・EnterpriseプランのFull席またはDev席で利用できます。UI版では公開済みのライブラリコンポーネントが必要です。デザインの通常フレームを選ぶだけでは、ライブラリの接続操作には進めません。

GitHubを接続するとリポジトリの候補を参照できますが、UIではコンポーネントのファイルパスを手入力する方法もあります。GitHub連携を必須として準備する必要はありません。コードの所在とアクセス権、Figmaのライブラリを先に確認してください。UIの利用条件と設定

UI版でコンポーネントとコードを接続する

対象のライブラリファイルを開き、Dev Modeに切り替えます。
ファイル名のメニューからLibraryへ進み、Connect components to codeを開きます。
対象のライブラリコンポーネントを選びます。
GitHubから候補を選ぶか、実装コンポーネントのファイルパスを入力します。必要に応じてコード側のコンポーネント名も指定します。
接続を保存し、対象インスタンスのDev Modeで対応するファイル・コンポーネントを確認します。

UIのプレビューでAIがコード例を解釈していても、InspectにCLIと同じスニペットが公開されたとは限りません。コードの参照先が合っているかを確認し、プロパティごとの実装例が必要ならCLIへ進みます。

CLI版の準備

Node.jsとトークンを用意する

公式のクイックスタートはNode.js 18以上を案内しています。利用するCLI版の要件も確認した上で、プロジェクトの作業フォルダーから公式パッケージを導入します。公式クイックスタート

node --version
npm install --global @figma/code-connect@latest
npx figma connect --version

個人アクセストークンにはCode Connectの書き込みとファイル内容の読み取りのスコープが必要です。トークンはFIGMA_ACCESS_TOKEN環境変数へ設定します。公開リポジトリの設定ファイルやコマンド例に実値を書かないでください。作成と保管は個人アクセストークンの取得方法を参照してください。

設定ファイルを作る

プロジェクト直下のfigma.config.jsonで、Code Connectファイルの検索範囲と表示ラベルを指定します。次はReact向けの例です。既存の設定がある場合は必要な項目を追加します。

{
  "codeConnect": {
    "include": ["src/**/*.figma.ts"],
    "label": "React",
    "language": "jsx"
  }
}

接続テンプレートのTypeScript型が必要なら、tsconfig.jsonのcompilerOptions.typesへ@figma/code-connect/figma-typesを追加します。既存の型設定を丸ごと置き換えないようにしてください。

テンプレートを作成して公開する

接続するメインコンポーネントをFigmaで選び、node-idを含むリンクをコピーします。
createでテンプレートを作成します。下のURLは置き換え用です。
生成されたファイルのexample、imports、プロパティの取得・変換を、実際のコンポーネントに合わせて記述します。
previewでデフォルト値と主要なバリアントを確認します。
publish --dry-runで公開前の検証を行い、対象を確認してから公開します。

npx figma connect create "https://www.figma.com/design/FILE_KEY/Library?node-id=1-2" --outDir src/components
npx figma connect preview src/components/Button.figma.ts --inspect
npx figma connect preview src/components/Button.figma.ts
npx figma connect publish --file src/components/Button.figma.ts --dry-run
npx figma connect publish --file src/components/Button.figma.ts

ファイル名は生成されたものに合わせます。createはFigma APIからコンポーネント情報を取得します。--dry-runは実際の公開をしない指定であり、外部通信を一切しない指定ではありません。テンプレート生成直後の空の例を、そのまま完成した接続として公開しないでください。CLIコマンドの仕様

公開後はFigmaでインスタンスを選び、Inspectの表示ラベルとコード例を確認します。例えばSizeを変更したときに、コード側のsizeも意図した値になるかを見ます。スニペットが表示されたことと、そのコードでアプリ全体が動作することは別々に確認が必要です。

接続やコードが表示されないとき

状況	確認すること
接続画面が見つからない	Organization・Enterprise、席、公開ライブラリ、Dev Mode
UI接続後にコードが出ない	UIはファイル参照の接続。Inspect用スニペットが目的ならCLIを使用
テンプレートが見つからない	作業ディレクトリ、include、生成ファイルの拡張子・パス
取得・公開で権限エラー	トークンの期限・スコープと、対象ライブラリへの権限
Variantの変更が反映されない	Figma側のプロパティ名と値、テンプレートの変換、公開した版
UIの接続とCLIが競合する	管理方法を確認。`--force`で既存接続を上書きする前に差分を保存

公開した接続を取り消す場合は、CLIのunpublishで対象のnodeとlabelを指定し、影響範囲を確認します。全件を対象にした取り消しを、表示確認の代わりに実行しないでください。

VS Code内でデザインを確認する方法はFigma for VS Code、AIクライアントへデザイン情報を渡す方法はFigma MCPサーバーで説明しています。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！