silships/figma-cli

これは何？

主な機能

• 01AIアシスタントからFigmaの実際のフレーム、コンポーネント、バリアント、変数を作成・編集できます。
• 02APIキーやレート制限なしで、ローカルのFigma DesktopアプリにCDP経由で接続します。
• 03DESIGN.md、Tailwind設定、CSS変数、W3C token JSONからデザイントークンをインポートできます。
• 04変数のモードやエイリアスを含め、FigmaファイルのデザインシステムをDESIGN.mdにエクスポートできます。
• 05CIで差分や、トークンにバインドされていないハードコードの色を検出する、決定論的なcheckコマンドを提供します。

ユースケース

• Claude CodeやCursorに指示して、FigmaでUI画面を作成する。
• コードベースからブランドのデザイントークンをFigmaファイルに同期する。
• Figmaファイル間でデザインシステムをドキュメント化または移行する。
• 継続的インテグレーションで、差分やトークンのバインド状況を自動チェックする。

クイックスタート

1. 1

   Figma Desktopをインストールして起動します

2. 2

   GitHubからfigma-cliプロジェクトをダウンロード（またはclone）し、そのフォルダーでターミナルを開きます

3. 3

   CLIの依存関係をインストールします（Node 18以降が必要です）

   npm install
4. 4

   プロジェクトフォルダーで開いたClaude Codeに「connect to Figma」と入力します

使う前に知っておきたいこと

• !Figma Desktopをインストールして起動しておく必要があります。デフォルトモードではfigma.comだけでは動作しません。
• !デフォルトのYoloモードではFigma Desktopアプリにパッチを適用します。macOSでは、そのために「アプリ管理」権限が必要になる場合があります。
• !Node.js 18以降と、Claude CodeやCursorなどのAIコーディングアシスタントが必要です。

トピック

よくある質問

figma-cli とは？

APIキーなしで、AIアシスタントがローカルのFigma Desktopアプリ上に編集可能なデザインを作成・編集できるCLI。 figma-cliは、Claude CodeやCursorなどのAIコーディングアシスタントとFigma Desktopアプリをつなぐコマンドラインブリッジです。アシスタントがコマンドを実行すると、開いているFigmaファイルにフレーム、コンポーネント、バリアント、変数が直接作成されます。そのため、出力は平坦な画像ではなく、編集可能なFigmaコンテンツになります。接続はChrome DevTools Protocolを介してローカルで行われるため、Figma APIトークンは不要で、FigmaのクラウドREST APIへの呼び出しも発生しません。

figma-cli は無料で使えますか？ライセンスは？

figma-cli は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

figma-cli は今もメンテナンスされていますか？

活発にメンテナンス中。figma-cli の最終コミットは 2026年10月7日 です。

figma-cli は何に使えますか？

Claude CodeやCursorに指示して、FigmaでUI画面を作成する。 コードベースからブランドのデザイントークンをFigmaファイルに同期する。 Figmaファイル間でデザインシステムをドキュメント化または移行する。 継続的インテグレーションで、差分やトークンのバインド状況を自動チェックする。

figma-cli のインストール方法は？

Figma Desktopをインストールして起動します GitHubからfigma-cliプロジェクトをダウンロード（またはclone）し、そのフォルダーでターミナルを開きます CLIの依存関係をインストールします（Node 18以降が必要です）: npm install プロジェクトフォルダーで開いたClaude Codeに「connect to Figma」と入力します

figma-cli はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/silships/figma-cli