NCDCエンジニアブログ
🎨

デザイナーがFigma×Cursor+MCPサーバーを連携してコードを書かずFigmaプラグインを社内公開した話

ふくだ
に公開
AI
Figma
plugin
Model Context Protocol
Cursor
idea

こんにちは。NCDCでUX/UIデザイナーをしている、ふくだです。

Figmaでデザイン作業中、「この作業、毎日やってるけど地味に面倒だな…」「一括で処理したいのに、微妙に要件に合うプラグインがない…」と感じたことはありませんか？
私はあります。

この記事は、JavaScriptもTypeScriptも書けないデザイナーが、AIコーディングツール「Cursor」を利用して、面倒な作業を助けるFigmaプラグインを自作しチーム内に公開するまでの内容になります。

「コード書けないし…」と諦めているデザイナーや、AIでどうやって業務改善できるか模索している方にとって、少しでもヒントになれば幸いです。

なぜプラグインを作ろうと思ったか

今回作成したのは「日本語向けのダミーテキストジェネレーター＋その他諸々」になります。

業務システムのデザインでは画面の情報量が多く、頻出するリストなどでは人の名前や日付をいれる作業が発生します。
コピペして同じテキストでも構わない場合もあるのですが、プロトタイプを作成する場合などにはやはりそれっぽいテキストのほうが機能のイメージがつきやすくなります。

しかしこれを手作業でやると、対象レイヤーが数十個ある場合、単純なリネーム作業だけで5分、10分とかかってしまいます。
単純作業なのに時間が取られる、そしてミスが起きやすいのが課題でした。


↑日付の箇所を手作業で変えたりするのは地味に時間がかかる……

ダミーテキストの既存のプラグインはもちろんあります。
しかし種類が足りなかったり昇順降順に対応してなかったり、そもそも日本語に対応したプラグインが少ない……

さらに生成AIを使いたい場合、既存プラグインから使える生成AIは当然課金をしなくてはつかえません。(無料の場合でも回数が決まっています)
社内につかえる生成AIのAPIがあるにも関わらず課金するのは微妙。しかし毎回生成AIを起動しプロンプトを打ち込むのはあまりにも手間がかかります。

そんな時、AIがコードを書いてくれる「Cursor」の存在を知りました。

Figmaの下準備・Cursorの導入・MCPサーバーの連携

Cursorの導入は以下の記事を参考にしました。
https://note.com/ikyu_design/n/nadc4aeec597d

Node.jsやnpmのインストールもしていなかったので、基本的な環境構築もCursorにやってもらえるのはとても助かりました。

また、FigmaのデザインをCursorに読み込ませるためにMCPサーバーを連携します。

MCPサーバーの連携は以下の記事を参考にしました。
https://miralab.co.jp/media/figma-mcp/

Figmaでデザインを作成し、Cursorに連携

CursorとFigmaを連携できたらFigmaのデザインをCursorに読み込むことができるようになります。
FigmaのフレームリンクをCursorに貼るだけです。

なくてもそれっぽくつくってくれたり調整はできますが、ベースのデザインを作ったほうがはるかに精度が高いです。
ベースがあるとそのあとの調整もAIが理解しやすくなります。
また作成後にUIの調整をしてたら勝手に機能がきえてたり、うまく動かなくなったりすることがあるので
簡単なデザインをつくっておくことをおすすめします。

今回のデザインはどこまでできるのかわからなかったのでなるべくシンプルにつくりました。
内容としてはFigmaでテキストオブジェクトを選択した状態→テキスト種別を選択して「確定」を押すとランダムなダミーテキストが選択したテキストと置き換わります。

多分もっと凝ったデザインでもFigmaでつくってやれば再現できると思います。

書いたプロンプト

今回は最終的に以下のようなプロンプトをベースに依頼をしました。
間違っている箇所もありそうですがひとまずこれで落ち着いています。
(もっといいプロンプトがあったら教えてください)

Cursorへのプロンプト
Figmaのプラグインを作成してください。Figmaの型定義を行い、適切に作動するようにしてください。
また適切に起動するためにmanifest.jsonのallowedDomainsにスキーム（https://）を含めてください。
外部公開しないためAPIはコードに直書で構いません。
Figma REST APIを呼び出すコードはUI (ui.html)に直接記載して呼び出すようにしてください。
最大トークン数は1000以内にしてください。
APIは以下です。

Figma REST API
[Figma REST APIのキー]

生成AIのAPI
[生成AIのAPIのキー]

OpenAIエンドポイント
[OpenAIエンドポイントのURL]

ファイル
GET
/v1/files/:file_key
指定したファイルの全ドキュメント構造（ページ、フレーム、レイヤーなど）をJSON形式で取得します。
GET
/v1/files/:file_key/nodesファイル内から特定のノード（レイヤー）の情報だけを取得します。
GET
/v1/images/:file_keyファイル内の指定したノードを画像（PNG, JPG, SVG, PDF）としてレンダリングし、そのURLを取得します。
GET
/v1/files/:file_key/componentsファイル内で公開されているコンポーネントのメタデータを取得します。
GET
/v1/files/:file_key/stylesファイル内で公開されているスタイル（色、テキストなど）のメタデータを取得します。

—
以下が作成してほしいプラグインです。

[ここにプラグインの要件を書く]

プロンプトの意味

なぜこのようなプロンプトになったのか一文ずつ意味を説明します。

Figmaのプラグインを作成してください。

これはタスク全体の最も基本的な指示です。「これから作ってほしいものは、デザインツールFigma上で動作する拡張機能（プラグイン）ですよ」とAIに伝えています。地味に重要です。

Figmaの型定義を行い、適切に作動するようにしてください。

これは、品質と安定性に関する指示です。

  • Figmaプラグイン開発では、Figmaが提供するAPIやデータ構造（レイヤー、フレーム、テキストなど）を扱います。
  • 「型定義を行う」とは、TypeScriptなどを使って、これらのデータが「どのような形（型）をしているか」（例: thisNodeはTextNodeである、など）をコード上で明確に定義することです。
  • これにより、開発中にミス（例: テキストノードにしか無いプロパティを、図形ノードで使おうとする）を防ぎ、コードのバグを減らして、Figma上で正しく安定して動くように実装してほしい、という指示です。

また適切に起動するためにmanifest.jsonのallowedDomainsにスキーム（https://）を含めてください。

これは、外部通信に関する具体的な設定指示です。

  • manifest.jsonは、プラグインの名前や機能、権限などを定義する設定ファイルです。
  • プラグインが外部のサーバー（APIなど）と通信する場合、allowedDomainsに「通信を許可するドメイン（Webサイトのアドレス）」を登録する必要があります。
  • この指示は、「example.com」のようなドメイン名だけでなく、「https://example.com」のようにプロトコル（スキーム）を必ず含めた形式で登録してください、というFigmaの仕様に基づいた細かい設定を依頼するものです。これを忘れるとAPI通信がブロックされてしまいます。
    （ちなみに書いてもうまくいかなかったりします。）

外部公開しないためAPIはコードに直書で構いません。

これは、セキュリティに関する（意図的な）要件緩和です。普通に書くとまともな設計をしようとするためAPIが動きません。

  • 通常、APIキー（外部サービスを利用するための「鍵」）は、他人に知られると非常に危険なため、コードの中に直接書き込む（ハードコーディングする）べきではありません。
  • このプラグインは「外部公開しない」（＝自分だけ、または社内だけで使う）前提であるため、「セキュリティ対策（環境変数など）は不要なので、手っ取り早くコード内にAPIキーを直接書き込んでも良いですよ」と伝えています。

Figma REST APIを呼び出すコードはUI (ui.html)に直接記載して呼び出すようにしてください。

これは、プラグインの構造（アーキテクチャ）に関する指示です。

Figmaプラグインは、主に2つの部分に分かれます。

  1. メインコード (code.ts): Figmaのドキュメント（レイヤー操作など）を直接触る部分。
  2. UI (ui.html): ユーザーが見る操作パネル（HTML/CSS/JSで作成）の部分。

Figma REST APIは、Figmaのサーバー上にあるデータ（ファイル情報など）を取得するためのAPIです。
この指示は、「APIを呼び出す処理（fetchなど）は、メインコード側ではなく、ユーザーが見るUI側（ui.html）のJavaScript内に実装してください」という、具体的な設計を指定するものです。

最大トークン数は1000以内にしてください。

これは、プラグインが利用するAIのAPIに関する制約指示です。APIを使用しないプラグインの場合は必要ありません。

  • 「トークン」はAIがテキストを処理する単位です。
  • 「最大1000トークン以内」と指定することで、AIに一度に処理させるテキスト量（入力または出力）に上限を設け、APIの利用料金を抑えたり、AIの応答速度を担保したりすることを目的としています。

APIキーとFigmaのエンドポイント


Figma REST API
[Figma REST APIのキー]

生成AIのAPI
[生成AIのAPIのキー]

生成AIのエンドポイント
[生成AIのエンドポイントのURL]

上記の通りAPIキーを直接記載しているのでここにキーを書きます。

ファイル
GET
/v1/files/:file_key
指定したファイルの全ドキュメント構造（ページ、フレーム、レイヤーなど）をJSON形式で取得します。
GET
/v1/files/:file_key/nodesファイル内から特定のノード（レイヤー）の情報だけを取得します。
GET
/v1/images/:file_keyファイル内の指定したノードを画像（PNG, JPG, SVG, PDF）としてレンダリングし、そのURLを取得します。
GET
/v1/files/:file_key/componentsファイル内で公開されているコンポーネントのメタデータを取得します。
GET
/v1/files/:file_key/stylesファイル内で公開されているスタイル（色、テキストなど）のメタデータを取得します。

FigmaのAPIから取得できる情報とエンドポイントを記載しています。不要なものも入っていますが補助的に記載しています。 Figmaのリファレンスに記載があるので本来であれば「Figmaのリファレンスを参照しろ」と書けば済むはずなのですがうまくいかなかったのでわざわざ書くことになりました。

最後に作って欲しいプラグインの内容を書きます。

完成した実際のプラグイン

Cousorを活用して開発したのが、このプラグインです。テキスト入力に関する課題を解決するため、以下の4つの機能を実装しています。
Figmaが公式のAIで対応している機能もありますが、微妙にかゆいところに届かなかったりするのでプラグインで対応させています。

  • 日本語ダミーテキスト挿入

    • メイン機能。日本人の名前・日付の昇順降順・文字数指定の長文など、今までの経験からよく使用しそうなダミーテキストを、選択したテキストレイヤーにワンクリックで挿入できます。

  • AIによるテキスト生成

    • 指示（プロンプト）を送信すると、生成AIがテキストを生成します。生成AIサイトを往復する必要がなくなります。

  • 簡易翻訳（日⇔英⇔中）

    • Figma上で選択しているテキストの翻訳機能を実装しました。

  • テキスト一括置換

    • ページ内の特定テキスト（例：「株式会社」を「(株)」など）を置換する機能です。よくあるプラグインですが日本語の処理に対応してなかったり、微妙に重かったりします。また、テキスト周りの作業をしているときにいちいち別プラグインを開くのが面倒なのでつけました。

作ったプラグインを「Figmaコミュニティ」経由で組織内公開する

自作したプラグインをチームで使うには、Figmaコミュニティの仕組みを利用するのがスマートです。 「Figmaコミュニティって、全世界に公開する場所じゃないの？」と思うかもしれませんが、Figmaには公開範囲を「自社組織内のみ」に限定するとても便利な機能があります。

この方法は、チームメンバーと作成者の双方にメリットがあります。

  • チームメンバーが楽

    • 普段Communityプラグインを探すのと同じ画面から、社内プラグインを検索して「インストール」ボタンを押すだけです。
    • 開発機能がないブラウザ版でもつかえるようになります。

  • 作成者が楽

    • プラグインのアップデート（修正）が自動で利用者に反映されます。
    • バグ修正や機能追加をした際、チームに「更新してください！」とアナウンスして回る必要がありません。

組織内公開の具体的なステップ

  1. Figmaデスクトップアプリのメニューから、以下を選択します。 メニュー > プラグイン > 開発 > プラグインを管理
  1. 管理画面に、あなたが開発中のプラグインが表示されています。 プラグイン名の横にある「公開（Publish）」ボタン、または「…」メニューから「公開（Publish new release）」を選択します。
  1. プラグインの詳細情報を入力する Communityに表示するための情報を入力します。 Figmaが用意した項目にそって書いていけば大丈夫です。
  1. フォームを進んでいくと、「公開範囲（Availability / Audience）」を設定する項目が現れます。 ここで組織名の選択肢を選んでください。これであなたの組織のFigmaアカウントを持つメンバーだけがアクセスできる状態になります。
  1. 必要な情報をすべて入力したら、「公開（Publish）」ボタンを押します。 問題がなければ社内のみに公開が完了します。

これ以降は、他のプラグインとまったく同じように、コミュニティからいつでも呼び出して使えるようになります。

感想


社内向けでもフューチャーグラフィックはあるとそれっぽい

今回、CursorとFigmaの連携を知り、「面白そうだからためしてみよう」と始めたのがきっかけです。
作業時間としては0から学んで1〜2日くらいでプラグインができたと思います。

AIが普及する以前は「この作業、面倒だな」と思っても、コーディングの壁や工数を前に「既存のプラグインを探す」か「手作業で我慢する」しか選択肢がありませんでしたが、デザイナーが短時間で解決できるようになったのは大きな変化ですね。

正直AIで作れるようなプラグインのほとんどはすでにコミュニティにあると思います。個人や社内向けにニッチなプラグインをつくるのはなしじゃないなと思いました。

NCDCエンジニアブログ
NCDCエンジニアブログ

NCDC株式会社( ncdc.co.jp/ )のエンジニアチームです。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！ ※エンジニア以外も記事を投稿することがあります

Discussion