FigmaのAIで手直しがつらいなら、Codexからつないで指示してみた
FigmaのAIで手直しがつらいなら、Codexからつないで指示してみた
Figmaでポートフォリオを作っている生徒さんが、こんな悩みを話してくれた。
「Figma内蔵のAIで作ったら、手直しがひどくて。課金していいのか迷っています」
たしかに、Figmaのデザインは「ゼロから作る」ときはAIが得意でも、「できたものを細かく直す」段階になると、思い通りにいかないことがある。
そこでレッスンで、CodexからFigmaを直接さわる方法を試してみた。思った以上に簡単だったので、手順とコツをまとめてみる。
先に結論
- ゼロから作るのはFigma AI、細かい修正はCodexに任せると進めやすい
- Codexは作業内容を覚えて読み直せるので、修正の積み重ねに向いている
- つなぐ仕組みが「MCP」。むずかしく聞こえるけれど、やることは数クリック
- ただし、Figmaはデスクトップアプリで使うのがおすすめ
MCPって何？
MCPは、AIがほかのアプリに「電話をかける」ための電話線のようなものだと思っている。
Codexが電話線を通じてFigmaに「ここを直して」と伝える。それをFigmaが実行する。AIが話すだけで、実際に手を動かすのはFigma側、というイメージだ。
この仕組みはFigmaだけでなく、メールやカレンダーなど、いろいろなアプリとつなげられる。慣れておくと、仕事がかなり楽になるかもしれない。
つなぐ手順
1. Codexで作業用フォルダを作る
Codexで新しいプロジェクトを作り、作業用のフォルダを指定する。ドキュメントの中に、新しくフォルダを作っておくのがいい。
Codexはファイルを作ることがあるので、「作業場」を最初に決めておくと散らからない。
2. プラグインからFigmaを追加する
Codexのプラグインの画面でFigmaを追加する。追加済みになっていて、チェックがオンなら接続できている。
3. Figma側で権限を許可する
Figmaのファイルで編集権限をリクエストし、承認する。ここを忘れると、AIがファイルを触れない。
4. FigmaのリンクをCodexに貼る
Figmaのデスクトップアプリで、選択したものへのリンクをコピーする（Macは Cmd+L、Windowsは Ctrl+L）。
- 何も選ばずにコピーすると、ページ全体のリンク
- フレームを選んでコピーすると、そのフレーム単体のリンク
これをCodexのチャットに貼って「これは何かわかる？」と聞いてみる。ページの内容やフレームの名前が返ってくれば、つながっている。
指示のコツ
フレーム単位で伝える
ブラウザ版のFigmaだと、フレーム単位の指示ができない。直したい場所だけを指定したいなら、デスクトップアプリがおすすめだ。
作ったフレームを選んだ状態で、Codexに「いま選択しているフレームをこのページに追加して」と頼むと、幅も合わせて入れてくれた。サイズは1440pxだと一般的で、少し大きくしたいなら1920pxでもいい。
白い隙間は「オートレイアウト」で詰める
セクションの間に白い隙間が空いてしまうことがある。
ただのフレームを重ねているだけだと、オートレイアウトになっていないため、うまく詰められない。そんなときは、選択した状態でCodexに「オートレイアウトにして」と頼むと直してくれる。手動で右クリックから設定してもいい。
フッターなど、あとから追加したいパーツもそのまま足せる。
参考サイトから「仮想ページ」を作る
ポートフォリオには、制作実績のほかに、いくつかページが必要になる。そこで、参考にしたいサイトを使ってページを作ってみた。
- 参考サイトのスクリーンショットをCodexに読ませる
- 「ページの構造を覚えて」と頼む
- 覚えた構造をもとに、自分のポートフォリオ用のページを作らせる
URLを渡すと、HTMLを読んで理解してくれるので、スクショより正確な場合もある。
外部のサイトを再現するときは、「Playwright MCP」というAIがブラウザを操作する仕組みが必要だと案内された。無料で使えるのか、安全なのかは、そのままCodexに質問して確認してから入れた。わからない言葉は、AIに聞きながら進めるのがいちばん早い。
作業の記録を残しておく
Codexは、新しいチャットを始めると前の作業を覚えていない。
そこで、作業の区切りで「やったことを、テキストファイルに保存して」と頼んでおく。次に始めるときは、そのファイルを読ませれば、続きから進められる。
この使い方はエージェントの基本なので、次の記事で詳しく書いてみたい。
まとめ
- Figma AIは「ゼロから作る」、Codexは「細かく直す」と使い分けてみる
- MCPでつなぐのは、プラグイン追加とリンクの貼り付けだけ
- Figmaはデスクトップアプリで、フレーム単位で指示する
- 隙間はオートレイアウト、仮想ページは参考サイトから構造を読ませる
- 作業内容はテキストに残しておく
AIに「話しかけるだけ」で、デザインの修正が進んでいくのは、ちょっと不思議な体験だった。ポートフォリオを作っている人は、一度つないでみると、直す作業がずいぶん楽になるかもしれない。
