はじめに
これまで、デザイナーが UI 改善を提案する際には Figma でデザインを作成し、エンジニアに実装を依頼するのが一般的でした。しかし、Cursor と Devin の導入によって、デザイナーの役割や視点が大きく変わりつつあります。
本記事では、Figma とコードを Cursor によって繋げる取り組みと、そして AI エージェント Devin を活用したことで、どのように UI 改善のプロセスが変化したのかを紹介します。
キカガクの開発組織に Cursor と Devin を導入した際のブログもぜひご覧ください！
Cursor × MCP × Figma でコードを直結
従来は、Figma 上でデザインを作成して、実装段階でコミュニケーションをとる際に、エンジニアとデザイナーの双方にとって時間や手間が発生する課題がありました。
また、デザインデータの Figma と実装コードが分断されているという課題もありました。
Cursor を導入したことで、開発環境を確認しながらデザイナーが UI を直接変更するなどの検証が容易になりました。
▪️Cursor 公式サイト
また、MCP によって Figma と Cursor が直接繋がるようになりました。
Cursor が Figma のデザインデータを読み取ることで、確認と修正が容易になりデザイナーの工数を削減できます。
さらに html.to.design などのプラグインを活用すると、コードから UI コンポーネントをフレームとしてインポートすることができます。
バリアントなども継承しているので設定の手間も省ける点が嬉しいポイントです。
▪️html.to.design
Cursor と MCP を組み合わせることで、今後はデザインシステムのコンポーネントの再現や拡張もスムーズにできるなど可能性が広がります。
Cursor に限らず Claude Code などでも組織に適したツールをデザイナーが扱える状況があると良いと思います。
ツールの導入によって「優先順位が低いから後回しになっていた」 UI 課題に対して、デザイナーが主体的に改善することが可能になりました。
そのためユーザーに素早くより良い体験が届けることができる環境が整えられたと感じます。
Devin でデザイナーが PR を出しまくる
従来は、小さな UI 改善でもエンジニアに依頼が必要であり、優先順位や粒度によっては改善が後回しになりがちでした。
Devin を使えるようになったことで、デザイナー自身が UI 改善の PR を出せるようになりました。
Slack から直接自然言語で指示を出すことができるため、職種問わず活用でき、修正から PR を立てるまでのプロセスが驚くほど簡略化できます。
また、Storybook や Chromatic を開発に利用している場合も、Devin がまとめて対応してくれます。
▪️Devin 公式サイト
開発チームでは Devin 専用の Slack チャンネルがあるので、エンジニアと同じようにデザイナーがプロンプトから UI 指示を伝えて PR を立てるということが当たり前になりました。
現在ではプロダクトデザイナー 1人あたり 1日平均約 2PR 出している程に活用できています！
（以前はデザイナーが PR を出す文化がなく、都度エンジニアとコミュニケーションを介していたため、生産性がかなり上がったと感じます）
作業が容易になることで、デザイナーはより上流の思考に時間を投資できるようになるなど、恩恵が沢山生まれます。
AI エージェントを開発チームで活用するにあたり、これからのデザイナーは従来よりも開発ルールを頭に入れておくことや、組織内でのコミュニケーションの質が重要になることを強く感じました。
AI で変わるワークフロー
ワークフローが変わった一例
- Cursor と Figma を連携しながら、実装イメージを確認・修正
- Devin を活用して、デザイナー自身が PR を作成
- レビュー後、即座に本番環境に反映
AI の活用によりデザイナーの「できること」と「視野」がより拡張されたように感じます。
業務プロセスが加速するだけではなく、デザイナーにとって「本質的な価値は何か？」や、「より良いデザインとは？」を考えるきっかけをさらに与えてくれるように感じます。
まとめ
Cursor と Devin の導入によって、「デザイナーが自ら UI 改善を実装・提案できる」新しいワークフローが実現しました。
- Figma とコードの分断が解消
- デザインシステムの運用がより実装に近づいた
- 小さな UI 改善もスピーディーに反映可能
今後も、デザイナーとエンジニアの垣根を越えたコラボレーションが進むことで、より良いプロダクトづくりを目指していきます。
【重要】キカガクではデザイナーを積極的に募集しています！
カジュアル面談からでも OK ですので、ご応募をお待ちしております。
AI 、プロダクト開発、デザイン組織、デザインシステム、教育ドメインに関心があるデザイナーと一緒に働けることを楽しみにしています！
HERP
Wantedly
関連記事
Views: 0
