Finish Line

最後のフレームから最初のコード行まで。

Finish Line は、無料のオープンソースの Figma ハンドオフインスペクタであり、Codex、Claude Code、Cursor、その他の互換エージェント向けのオプションのローカル MCP ブリッジを備えています。Figma Design の開発プラグインとして動作し、Dev Mode や Finish Line アカウントは必要ありません。

Finish Line には、バックエンド、アナリティクス、サブスクリプション、有料アップグレード、フィーチャーゲートはありません。

Finish Line は独立したオープンソースプロジェクトです。Figma とは提携しておらず、Figma による推奨や配布も受けていません。

できること

• フレーム、コンポーネント、インスタンス、レイアウト、制約、塗り、ストローク、エフェクト、タイポグラフィ、変数、スタイル、ネストされたレイヤーを検査します。

• ボーダー、パディング、コンテンツの計測に使い慣れたボックスモデルビューを再現します。

• 開発者がそのまま使える値を、トークン対応のコピー動作でコピーします。

• CSS、Tailwind CSS、React + CSS Modules、SwiftUI、Jetpack Compose、Flutter 向けのスターターコードを生成します。

• SVG および PNG アセットを個別または一括でエクスポートします。

• 127.0.0.1:3846 にバインドされたブリッジを通じて、開いている Figma ファイルをエージェントに接続します。

• エージェントが選択範囲の検査、現在のページの移動、プレビューのレンダリング、コードの生成を行えるようにします。

• ノード固有の finish-line:// リンクをコピーします。このリンクはエージェントのプロンプトに貼り付けることで、Figma の選択範囲が変わった後でも正確なレイヤーを対象にできます。

• 型付きキャンバス編集をサポートします。この編集は、ユーザーが Finish Line 内で明示的に承認するまでブロックされたままになります。

Related MCP server: Custom Figma MCP

クイックスタート

1. Finish Line をダウンロード

リポジトリをクローンします：

git clone https://github.com/vypravec/finish-line.git
cd finish-line

GitHub の Code → Download ZIP オプションを使用してアーカイブを展開することもできます。リリースビルドはコミット済みのため、Figma インスペクタはローカルでのビルドを必要としません。

2. Figma プラグインをインストール

1. Figma デスクトップアプリを開きます。

2. 任意の Figma Design ファイルを開きます。

3. Plugins → Development → Import plugin from manifest… に移動します。

4. Finish Line フォルダから manifest.json を選択します。

5. Plugins → Development から Finish Line を実行します。

これで Inspect タブが使用可能になります。Figma はその場所から開発プラグインを読み込むため、リポジトリフォルダはコンピュータ上に置いたままにしてください。

3. エージェントを接続する（オプション）

エージェントサポートには Node.js 20 以降が必要です。Agent タブには、同じガイド付きセットアップとライブ接続テストが含まれています。

Codex

codex plugin marketplace add vypravec/finish-line
codex plugin add finish-line@finish-line

新しい Codex タスクを開始し、Figma で Finish Line → Agent を開いて、Connect local agent をクリックします。その後、次のように依頼します：

Use $finish-line to inspect my current Figma selection.

曖昧さのないハンドオフを行うには、レイヤーを選択し、その寸法の横にあるリンクアイコンをクリックします。コピーした finish-line://node/... URL をプロンプトに貼り付けます。Finish Line は、エージェントが応答した時点で選択されているものに依存するのではなく、接続されたファイル内のその正確なノードを解決します。

Claude Code

claude plugin marketplace add vypravec/finish-line
claude plugin install finish-line@finish-line

新しい Claude Code セッションを開始し、/finish-line:finish-line を呼び出すか、通常どおり Figma のタスクを説明します。

Cursor およびその他の MCP クライアント

stdio 構成、更新手順、アンインストール手順、トラブルシューティングについては、完全なインストールガイドを参照してください。

エージェント接続の仕組み

Codex / Claude Code / Cursor
              ↕ MCP over stdio
        local bridge process
              ↕ WebSocket on 127.0.0.1:3846
       Finish Line in Figma
              ↕ official Figma Plugin API
       currently open Figma file

ブリッジはローカルにあり、Finish Line にはリモートサーバーはありません。ただし、クラウドホスト型エージェントを使用する場合、MCP クライアントは選択されたデザインコンテキストを、そのエージェントのプロバイダーの利用規約とプライバシーポリシーに基づいて送信する場合があります。正確なデータフローについては、プライバシーを参照してください。

エージェントが接続されている間、プラグインは開いたままにする必要があります。Finish Line を閉じると接続が終了し、ブリッジのメモリ内選択スナップショットがクリアされます。

Finish Line のノードリンクには、ノード ID、ページ ID、可読なノード名・ページ名、ランダムなプラグインセッショントークンが含まれます。レイヤーの内容、生成されたコード、アカウントの資格情報、Figma ファイルキーは含まれません。Finish Line リンクは、プラグインウィンドウが閉じられるか再読み込みされると失効します。次のセッション用に新しいリンクをコピーしてください。

MCP ツール

キャンバス操作では、フレーム、長方形、楕円、テキスト、コンポーネントインスタンスを作成したり、サポートされているプロパティを更新したり、ノードを複製・削除したり、選択範囲を設定したりできます。内容を変更するすべてのバッチは、適用前に Finish Line に表示されます。

プライバシーと安全性

• エージェント接続はオプトインであり、Figma プラグインから自動的に開始されることはありません。

• manifest.json は ws://localhost:3846 のみを許可します。

• ブリッジはローカルネットワークではなく、127.0.0.1 にのみバインドします。

• Finish Line には、アカウント、アナリティクスコレクター、リモート API、保存された AI 資格情報はありません。

• エージェントの書き込みは、eval や任意の JavaScript ではなく、制限付きの型付き操作を使用します。

• ドキュメントを変更するすべてのエージェント要求には、Figma での明示的な承認が必要です。

• 設定は Figma のローカルプラグインストレージに保存されます。ブリッジの状態はメモリ内にのみ保持されます。

機密性の高いデザインで Finish Line を使用する前に、完全なプライバシーポリシーとセキュリティポリシーをお読みください。

更新

最新リリースをプルし、ソースから開発している場合にのみ再ビルドします：

git pull --ff-only
npm ci
npm run build

Figma で Finish Line を再起動します。Codex の場合、更新が自動的に反映されないときは、マーケットプレイスを更新してプラグインを再インストールします：

codex plugin marketplace upgrade finish-line
codex plugin add finish-line@finish-line

その後、新しいタスクを開始して、Codex が更新されたスキルと MCP ツールを読み込むようにします。

開発

必要条件：Node.js 20 以降と Figma デスクトップアプリ。

npm ci
npm run watch

UI またはプラグインコントローラの変更後は、Figma で Finish Line を再読み込みします。完全な自動リリースゲートは次のとおりです：

npm test

これは、両方の TypeScript ターゲット、インライン UI、コードジェネレーター、設定、エージェント承認、Codex および Claude のマニフェスト、共有スキル、本番バンドル、実際の MCP stdio/WebSocket 統合フローを検証します。

開発規約については CONTRIBUTING.md を、リリースチェックリストについては RELEASE.md を参照してください。

リリース

• v2.1.3 — 重複したインストールカードのない、単一で明確な Agent セットアップエントリポイント。

• v2.1.2 — ライブの共有選択プレビューとより明確なリンク操作を備えた、合理化された Agent ハンドオフ。

• v2.1.1 — Codex と Figma プラグイン全体で公式の Finish Line アイコンを使用し、一貫したホストスタイルのコーナーマスキングを採用。

• v2.1.0 — 曖昧さのないエージェントプロンプトのための正確なノードリンクに加え、リンクされたノードの検証とネイティブスキルのサポート。

• v2.0.0 — ローカルエージェントブリッジ、ネイティブの Codex/Claude パッケージング、ガイド付きセットアップ、プレビュー、ナビゲーション、承認ゲート付きキャンバス編集。

• v1.0.0 — エージェントブリッジなしの、恒久的にアーカイブされたオフラインインスペクタのリリース。

リリースノートは CHANGELOG.md で管理されています。

サポート

バグ、セットアップに関する質問、機能提案には GitHub Issues を使用してください。問題を報告する前に SUPPORT.md を参照してください。

Finish Line が時間を節約してくれるなら、Ko-fi で任意のサポートが利用できます。貢献によって追加機能がアンロックされることはありません。

ライセンス

Finish Line は MIT ライセンス の下で利用できます。