Cursor を使って、はじめての Figma プラグインをつくった話

こんにちは、Contract Oneのデザイナーエスターです。

デザイナーの皆さん、普段 Figma で仕事をしているとき、繰り返し作業を効率化したいと思ったことはありませんか？
「もしこれができるプラグインがあったら…」そんなふうに感じる瞬間があるのではないでしょうか。
私はまさに今年、そんな悩みから Cursor を使って人生初の Figma プラグインをつくりました。
その背景には、仕事で直面したある課題がありました。

※この記事は、[Sansan Creators noteリレー] の第3弾になります！

英語版 UI をつくることから始まった

今年、Contract One で「英語版 UI をそろそろ作りたい」という話が持ち上がりました。
デザイナーである私は、まず現状の文言を整理し、英語の UI を作る役割を任されました。
しかし、ここで大きな問題にぶつかります。

• 文言が散らばっている

• 表記揺れが多い

つまり、英語にする以前に、日本語を整理するところから始めなければならない。
このまま英語 UI を作っても、あとから文言修正が入り、そのたびに翻訳やデザイン調整が発生してしまう。
そこで私は、こう考えました

もし Figma 上で、ファイル内のテキストをまとめて扱えたら──
そんな発想が、今回の取り組みの出発点でした。

実現したいこと

まず実現したかったのが次の３つです。

1. Figmaファイル内のテキストをすべて抽出する

2. 既存の用語集をインポートして参照できるようにする

3. 翻訳したテキストを一括で置換する

この３つができれば、「日本語を整えてから英語 UI を作る」という流れを、無理なく Figma 上で完結できると考えました。
そしてちょうどその頃、Cursor の使い方を学んでみたいと思っていたこともあり、
「じゃあ、まずは自分で作ってみるか」
という、最初のアクションにつながりました。

実際に開発しながら見えてきた学び

1. はじまりは、ChatGPT と“対話すること”から

私はゼロからプロダクトを作る経験はほとんどありませんでした。
だからこそ、最初にやったのはとてもシンプルなこと。
「ChatGPT に相談する」
まずは大きな流れ（roadmap）を作ってもらい、頭の中に“ざっくりとした地図”を描くところから始めました。
これが思った以上に大切で、スコープを整理し、迷子にならずに進むための土台になりました。

プロジェクトの構造を大まかに理解したら、次は Cursor と対話しながら開発を進めていきます。
最初は Cursor と直接やり取りすることに不安を感じるかもしれません。
「不要なコードが生成されて、後で修正できなくなったらどうしよう…」
そんな心配がある場合は、ChatGPT に再度頼る

これを Cursor に渡すことで、より安心して開発を始められるはずです。

2. UIを先に固めることで、実装の手戻りを防げる

最初の私は、あまり UI を固めずに、ChatGPT で整理した機能と要件をCursor に投げていました。
Cursor は最低限のUIを返してくれるのですが、いざ「やっぱり UI を変えたい」と思うと、

• 修正に時間がかかる

• 小さな変更がコードに大きく影響する

• 何度繰り返すことがある

といった“沼”に落ちることが多かったです。
今振り返ると、Figma で UI を先に固めてから、cursor-talk-to-figmaのプラグインを使って実装する、これが最も効率的な方法だと感じました。

※ Cursor を使った Figma MCP の連携方法については、このドキュメントが参考になります。

3. スコープは小さく。コア機能から作る。

これは Cursor との相性でもあるのですが、最初から「全部つくって」と依頼するより、
小さい単位で積み上げていく方が、精度が高い。
私はよくこんな感じで進めていました。

• まずはテキスト抽出だけ

• OK なら用語集に対応

• さらに OK なら置換処理を追加

「これできた、じゃあ次これも」という積み木のような作り方の方がスムーズでした。

デザイナーがローカライズに関わる意味

ローカライズは、どちらかというとエンジニアや QA が行うケースが多いと思います。
でもその方法には、どうしても課題があります。

• 文言の背景が共有されにくい

• 言語ごとの文字数や語順の違いにより、デザインの調整が必要になりがち

結局、「複数言語の UI を Figma で直接扱えるほうが自然」そんな実感があります。
デザイナーが言語設計に関わり、Figma 上で多言語 UI を並べて考えられれば、プロダクトとしての完成度はもっと高くなるはず。
今回のプラグイン開発は、“翻訳作業を楽にするため” というだけでなく、多言語 UI をデザインの文脈で扱うための第一歩だったように思います。

もしあなたが同じように「日々のデザイン業務を効率化したい」と思っているなら、ぜひ Cursor と ChatGPT を相棒に、小さなプラグイン作りから始めてみてください。
思った以上に、自分の仕事の幅が広がるはずです。

おわりに

Sansan株式会社では、プロダクトデザイナーを募集しています。

まずはカジュアル面談で弊社についてご説明させていただきますので、ご興味のある方は以下のページからご応募ください。一緒にデザインしましょう！