コードとデザインを自由に行き来するー Figma MCP × AIエージェントがもたらしたSpindle開発フローの変化

概要

CyberAgentのSpindleチームが、Figma MCPとAIエージェントを導入してエンジニアとデザイナーの職種を超えた双方向の開発フローを実現した事例を紹介しています。

詳細内容

Amebaのデザインシステム「Spindle」チームにおける、Figma MCP、Claude Code、CursorなどのAIツールを活用した最新の開発フローが詳説されています。主な事例として、半年間頓挫していた複雑な「イラストメーカー」をFigma MCPによる構造解析とAIによる実装を組み合わせ、わずか1日で実用化したプロセスを解説。また、エンジニアがコードからFigmaコンポーネントを一括生成したり、デザイナーが自らView TransitionのPRを出すといった、従来の役割分担（ハンドオフ）を超えた「越境」の様子が描かれています。デザインシステムが整備されているほどAIの出力精度が上がるという相乗効果についても言及されており、AI時代のフロントエンド開発とデザインシステムの重要性を示す内容となっています。Figma MCPの具体的な活用コマンド（get_design_context, use_figma等）もリスト化されており、実践的な知見が含まれています。

元記事を読む他のサマリーを見る