Figma

Figma はコネクタです。MeDo アプリを 1 つの Figma アカウントに接続し、そのアカウントで開けるデザインファイルをアプリが読み取れるようにします。MeDo はページとフレームのツリー、コンポーネントとコンポーネントセット、スタイル、デザイントークン、ノードのレンダリング画像、画像の塗り、プロトタイプのインタラクションを読み取り、アプリ構築のコンテキストとして使います。この接続は読み取り専用で、アプリが Figma ファイルを作成、変更、削除することはありません。

#何を作れるか

• デザインからアプリを構築。 デザインファイルを MeDo に指定すると、そのレイアウト、色、書体、余白に沿ったページを構築します。
• デザインシステムのギャラリー。 ファイルまたはチームライブラリにあるすべてのコンポーネント、コンポーネントセット、スタイルをプレビュー付きで一覧表示します。
• Tailwind や CSS の設定。 ファイルのデザイントークン（色、書体、余白、影、角丸）を抽出し、アプリが使う Tailwind 設定に変換します。
• プロトタイプの再現。 ファイルのプロトタイプフローとコンポーネントのバリアント状態を読み取り、クリックスルーの流れを動作するページとして作り直します。

デザインがすでにファイルにあり、アプリをそれに合わせたいときに Figma が適しています。デザインエディタではないため、仕上がりの確認を省けるわけではありません。制限を参照してください。

#構築例

次のいずれかをプロンプト欄に貼り付けてください。最初の例が最小の実用例です。

Use @Figma to turn my design file into a responsive landing page that matches its layout, colors, and fonts.

Use @Figma to build a component gallery page that lists every component and style in my design system file.

Use @Figma to generate a Tailwind config from my file's design tokens and use it in the app it builds.

Use @Figma to recreate the click-through prototype of my checkout flow as a working multi-page app.

#準備と接続

アプリが読み取るファイル、プロジェクト、チームライブラリをすでに開ける Figma アカウントが必要です。それ以外の準備は不要で、API トークンの作成も Figma アプリの登録もありません。MeDo は自社の Figma 連携を使い、どのファイルが見えるかは接続したアカウントの権限で決まります。

1. サイドバーで Skills & Connectors を開き、Figma を検索します。
2. カードを開いて Connect をクリックします。
3. Figma にサインインし、同意画面で Allow access をクリックします。
4. ボタンが Connected に変わります。

接続前に構築を始めた場合、MeDo の返信の下に Figma の接続ボタンが表示されます。エディタ左側の Skill タブにも同じカードがあります。どちらの入口でもかまいません。

#アプリでの使い方

• アプリが使うのは、あなたが接続したアカウントであり、訪問者それぞれの Figma ログインではありません。 ページを開いた全員が同じデザインデータを見ます。デザインの閲覧はアプリ自身のサインインの内側に置き、対象者を限定してください。
• 読み取り専用です。 ファイル、プロジェクト、チームライブラリを参照できますが、Figma 側の内容を変更、移動、削除することはできません。デザインの変更は Figma で手作業になります。
• ファイルはリンクまたはキーで指定します。 ファイルにはキーがあり、その中のノードには 1:5 のようなノード ID があります。アプリは Figma のリンクをこれらの指定に解決してから、ノードまたはそのサブツリーを読み取ります。
• デザイントークンは変換の工程です。 色、書体、余白、影、角丸がトークンとして抽出され、アプリがそれを Tailwind 設定と CSS 変数に変換します。内容を確認したいときは、先にトークンの出力を求めてください。
• レンダリング画像は一時リンクです。 フレームやノードの描画結果は期限付きの URL で返り、アプリのストレージに保存されるわけではありません。多数のプレビューを表示するページでは、アプリのストレージにキャッシュし、ファイルのバージョンが変わったときだけ再レンダリングするよう依頼してください。
• プロトタイプのインタラクションは流れを表します。 アプリはファイルに定義された接続、アニメーション、コンポーネントのバリアント状態を読み取ります。プロトタイプの接続がないファイルは空の結果を返しますが、レイアウトとスタイルだけのファイルでは正常です。
• Figma のプランとシートが呼び出し枠を決めます。 Figma は API の読み取り回数を制限し、その上限はプランとシートの種類で変わります。ファイルとノードをキーにしたキャッシュをアプリに用意し、ページを開くたびに同じファイルを読み直さないようにしてください。

#制限とトラブルシューティング

アプリに「接続が必要」と表示される。 アプリの所有者がコネクタカードを開いて Connect をクリックし、再読み込みしてください。MeDo の返信下の接続ボタンと、エディタ左側の Skill タブは同じ場所につながっています。

ファイル、ノード、チームが見つからない。 接続したアカウントにアクセス権がないか、そのアカウントが所属していないチームのファイルをリンクが指しています。そのアカウントで Figma のファイルを開いて確認し、再試行してください。

レート制限が報告される。 Figma はプランとシートに応じて API の読み取りを制限し、無料プランではファイルごとに月あたりごく僅かしか読めません。上限のリセットを待ち、同じファイルを読む頻度を下げ、読み直す代わりにデザインデータをキャッシュするようアプリに依頼してください。

画像プレビューが読み込まれなくなる。 レンダリング画像のリンクは一定時間で失効します。ノードを再レンダリングするか、よく表示する画像はアプリ側にコピーを保持するよう依頼してください。

プロトタイプのフローが空で返る。 ファイルにプロトタイプの接続が定義されていません。コンポーネントのバリアント状態は返るため、欠けているのはフローの接続だけです。

#関連ページ

• コネクタ カタログ：ほかのコネクタとその用途。
• Skills とコネクタ：Skill の呼び出し方、料金、制限。
• アクセスとロールの管理：接続したデータを読める相手を制限する方法。