AIで作ったLP・実装をFigmaのデザインデータに戻し、Figma上で赤入れ・編集する
コードからFigmaへ、Figmaからコードへの往復をAIでつなぐ。実装を先に作り、Figmaに書き出して確認・修正し、また実装に戻す。
どんな問題を解決するか / いつ使うか
デザイナーがFigmaで確認・修正したいが、AIで先にコードが出来上がっているとき。デザインとコードを行き来しながら作りたいとき。
やり方
Claude Code → Figma
- Claude Code で Figma プラグインを入れる：
/plugin install figma@claude-plugin-directory - 実装してほしいFigmaのURLを含めて依頼する（Figma→コード）。逆に、実装した画面をFigmaに生成させることもできる。
- Figma上で赤入れし、修正点をまた Claude Code に戻す。
Claude → Figma Make → Figma
- Claude で高品質なLPのコードを出す。
- そのコードを Figma Make に渡して真似させる。
- 結果をFigmaのデザインデータにコピペすると、Figma上で編集できる。そこから Claude Code と連携して公開まで進める。
デザインシステムの例：Ameba の Spindle は、コードとデザインの間をAIエージェント経由で行き来する開発フローを紹介している（@herablog の記事）。
注意点・対応状況
- プラグイン名・手順は投稿時点（2026年2月）のもの。
- Figmaとの連携はコンテキストが大きく、API従量課金だと高くつきやすい（@kgsi の指摘）。
出典
- 投稿者: @miyaponmm (みやぽん｜AIソロプレナー) ／ 関連：@Hisashi_dn、@herablog
- 投稿: @miyaponmm · 2026-02-18 / @Hisashi_dn · 2026-02-08 / @herablog · 2026-04-15
- 投稿日: 2026-02-18 / 2026-02-08 / 2026-04-15（JST）
- 収集日: 2026-10-09（JST）