デザインとエンジニアリングの境界線へ。AIエディタCursorとFigmaを連携させて見えた、新しい効率化の可能性

デザイナーも、エンジニア向けツールを味方に。

LOG15ではFigma単体での効率化を深掘りしましたが、UIデザインの旅はそこで終わりません。デザインとエンジニアリングの境界線は、ますます曖昧になりつつあります。デザイナーがエンジニア向けのツールを理解し、活用できるようになれば、業務の幅は広がり、開発効率も飛躍的に向上します。

今回は、「エンジニアではない」わたしが、AIエディタCursorとデザインツールFigmaを組み合わせ、業務効率化に挑戦するプロセスを紹介します。これは、単なるツールの使い方ではなく、AIをパートナーとして新しいスキルを獲得していく、50代デザイナーの挑戦の物語です。

※薬剤搬送ロボットハコブくんは技術検証用の仮想設定です。 実用化目的ではなく、制御・UIデザイン・HRI（人間とロボットの相互作用）の本質を探求するコンセプトとして定義しています。

Cursorとは？

Cursorは、ChatGPTのようなAIがエディタに統合された次世代のコードエディタです。自然言語で指示を出すだけでコードを生成、修正、解説してくれるため、専門的な知識がなくても、「〇〇するコードを書いて」と頼むだけで、AIが最適なコードを提案してくれます（こちらはCursorの本来の用途の説明です）

Cursorは本来はエンジニア向けのツールですが、Cursorを使い「情報設計の壁打ち」「デザインレビュー用途」に活用できることを知り、実際に試してみることにしました。

実際にCursorを設定してみます。

Cursorは英語環境でパッと見何が書いてあるかわかりません（エンジニア向けツールにありがちですね）。Cursorを設定している時は以下のように生成AIに聞いて、とにかく調べまくります。わからないことを素直に生成AIにぶつけてヒントや具体的な方法を見つけていきます。アプリやサービスの設定画面も同時に貼っておくと明確な指示をしてくれます。

英語の画面で設定項目が分からなくても、スクリーンショットを撮って生成AIに質問すれば、具体的な設定方法やアドバイスが得られ、大抵の問題は解決できます。
実際、Cursorの設定や始め方も、検索エンジンは使わず、生成AIとの対話だけで完了しました。

次に、CursorとFigma MCPを連携させる設定を行います。

CursorとFigma MCPを連携させることで、デザインと開発の環境がシームレスに統合され、業務効率が大幅に向上します。

主なメリット

• Cursor上でFigmaデータにアクセス: Figmaで作成したデザインアセット（コンポーネント、スタイル、レイヤー情報など）に、Cursorから直接アクセスできるようになります。デザインツールとエディタ間を行き来する手間が省け、作業がスムーズになります。

• コンプライアンスとデザイン品質のガードレール: Cursorにプロジェクトのスタイルガイドや要件定義書などを読み込ませることで、AIが適切な情報設計の壁打ちやデザインレビューを行ってくれます。AIとのチャットを通じて、具体的な業務改善案や、法律・社内規範に関する問題点の指摘を受けることが可能になります。

連携作業

• FigmaでMCPを有効にする。

• CursorからFigmaのMCPサーバーに接続する。

何度も繰り返し生成AIに聞きます。諦めずに設定が正しいか繰り返します。

何度も繰り返して聞いていると問題がハッキリしてきます。

設定が完了しました。ここでのポイントは、設定が完了したと思った後、さらにその確認作業を生成AIに依頼することです。これにより、設定できたつもりによるミスを確実に防ぐことができます。

【実践】Cursor×Figmaで業務効率化にチャレンジ！

それでは、薬剤搬送ロボットUIデザインを題材に、Cursor×Figmaを活用した業務効率化の具体的なプロセスを紹介します。

Cursorに情報をインプットさせる

Figmaの情報に基づいてAIに指示を出すには、主に以下の2つの方法があります。

• 選択ベース: Figmaデスクトップアプリ上で、対象のフレームやレイヤーを選択状態にする方法です。この状態で「Figmaで選択している画面について、〜〜」のように指示を出すと、AIがその選択範囲を参照してくれます。

• リンクベース: Figmaで対象のフレームやレイヤーのリンクを取得し、そのURLを利用する方法です。指示の中にこのURLを含めることで、AIが対象範囲を参照してくれます。

※実際にFigmaで選択している画面は以下の画面。いろんなデータが全てまとめているセクションを選択している状態です。

例えば、以下のように指示を出します。

Cursorからは、想像以上に厳格な指摘が返ってきます。問題点だけでなく、推奨される対応策なども具体的に提示されるため、これらを基にチーム内でUIデザインや仕様の見直しを効果的に検討できるようになります。

さらに、デザインレビューを直接依頼してみると、以下のような結果が得られました。

良い点と改善が必要な点に分けて、具体的なレビューが提示されました。これらを基にUIデザインの問題点を洗い出すことで、完成度をより高めることができます。

これまで、デザインの確認作業を生成AIに任せることはありませんでしたが、Cursor×Figmaを活用することで、これらの業務工数を大幅に圧縮できる可能性を感じました。

挑戦から得られた学びと、これからの展望

今回の挑戦を通じて、AIは強力なパートナーである一方で、完璧ではないことも学びました。AIの出力には課題や問題点が含まれる場合もあり、最終的な確認と判断は人間が行う必要があります。

また、難しそうと敬遠していたエンジニア向けツールとの連携も、AIの力を借りることで、案外楽しく、直感的に取り組めることが分かりました。

今後は、Figmaでデザインを作りながら、Cursorなどを使いデザインチェックを行い、リアルタイムでプロトタイプを確認する、といったシームレスなワークフローが当たり前になっていくでしょう。

おわりに

未知の領域への挑戦は、不安も伴いますが、それ以上のワクワクと成長をもたらしてくれます。CursorとFigmaという強力な武器を手に、UIデザイナーはデザインの可能性をさらに大きく広げていくことができるでしょう。