awdr74100/figwright

何を解決するか

Figwright は、AI コーディングエージェント（Claude Code や Cursor など）と Figma の間の双方向ブリッジを提供します。エージェントがデザインデータを読み取ってコードを生成するだけでなく、Figma キャンバスを直接編集・作成できるようにし、有料の Figma Dev Mode シートの必要性を回避します。

動作方法

このプロジェクトは、MCP（Model Context Protocol）サーバーと併用する Figma プラグインから構成されています。MCP クライアント（AI エージェント）は stdio を介してサーバーと通信し、その後、ローカル WebSocket を通じてコマンドを Figma プラグインに転送します。この構成により、すべてのデータがローカルマシン上に留まります。コード生成の正確性を高めるために、「プロバイダー優先」アプローチを採用しており、デザインコンテキストを提示し、Figma のデータをユーザーの既存コードベースのコンポーネントやトークンにマッピングするようにしています。これは一般的なマークアップを使用するのではなく、ユーザーの特定のフレームワークやスタイリングシステムを検出することで実現しています。

対象ユーザー

Figma でデザインを実装またはプロトタイプ作成に AI エージェントを使用する開発者やデザイナー。特に、公式 Dev Mode MCP ツールの有料代替手段を探している人向けです。

主な特徴

• 双方向機能: キャンバス上でレイアウト、スタイル、変数の検査（読み取り）およびフレーム、テキスト、オートレイアウトの作成（書き込み）を含む、合計112のツールを提供。
• プロバイダー優先のコード生成: ユーザーの特定のフレームワークとスタイリングシステムを検出し、既存のコンポーネントやアイコンを再利用。
• ローカル優先のセキュリティ: すべての通信はローカルループバック経由で行われ、デザインが外部サーバーに送信されることはありません。
• 拡張可能なスキル: figma-codegen や figma-build などのインストール可能な「スキル」を標準搭載しており、特定のワークフローをオーケストレーションします。
• 無料版対応: 有料の Dev Mode シートを必要とせず、無料 Figma タイアで動作します。