はじめに

みなさんは、Figmaのウィジェットを作ろうとしたことがありますか？
私は、デザインテクノロジストとして、デザイナーの業務効率化をしようとFigmaのウィジェットの作り方を調べていたら、JavaScriptか、TypeScriptが触れれば、意外と簡単に開発することができるのだとわかりました。
そのため、この記事では、Figmaウィジェットの作りの第一歩である、セットアップの方法についてまとめます。

この記事では、以下の公式ドキュメント通りに、できるだけわかりやすく、初心者でもわかりやすくまとめようと思っています。
この記事を読みながら、詰まったところがあれば、コメントで教えていただけたら、記事を更新していきたいと思っているので、ぜひコメントもお願いします。

事前準備

Figmaのプラグインを作るにあたって、まずは、事前準備です！

事前準備で用意するのは以下の通りです。

① Figmaのデスクトップアプリ

Figmaのプラグインを作るには、Figmaのデスクトップアプリ をダウンロードする必要があります。
以下のリンクからお使いのPCに合わせて、ダウンロードしてください。

② エディタ

使い慣れたもので大丈夫ですが、Visual Studio Code か IntelliJ IDEA がおすすめです。
この記事では、Visual Studio Code のスクショを用いて説明します！

以下のリンクからダウンロードしてください。

③ Node.js

Figma 公式から TypeScript を使って開発することが推奨されているいます。
TypeScriptで開発がしたい方は、Node.jsが必要です！

以下のリンクから、Node.jsをインストールしてください。

【インストールされているか確認する】
ターミナルで、以下のコマンドを入力して、インストールしているバージョンが表示されたら、インストールが完了しています！

terminal.

node -v

テンプレートからプラグインを開発する

事前準備の3点が用意できたら、早速プラグインの開発を始めます！

① Figmaのデスクトップアプリからテンプレートをダウンロードする

A. Figmaの新規の Design File を作成する

Figmaのデスクトップアプリを開き、Design Fileを作成します。
Draft で作成して、問題ありません。

B. Figmaのデスクトップアプリからテンプレートをダウンロードする

Widgets > Development > New widget.. を選択します。

その後、表示されたモーダルが表示されるため、ウィジェット名を入力し、ウィジェットを動かす範囲を選択します。

Figma design + FigJam を選ぶ
- Figma の file と FigJam の board 両方で動くプラグインを開発したい場合、こちらを選んでください
Figma design を選ぶ
- Figma の file だけで動くプラグインを開発したい場合、こちらを選んでください

そして、プラグインのタイプを選択します。

Default を選ぶ
- 必要最小限のファイルのみがダウンロードされるためには、こちらをえらんでください
Simple を選ぶ
- ユーザーがキャンパス上で直接やりとりできるシンプルなウィジェットを作成する場合は、こちらを選んでください
iFrame を選ぶ
- iFrameウィンドを開くことができるウィジェットを作成する場合は、こちらを選んでください
- ブラウザベースのAPIを使った様々な機能を実装できます！

その後、テンプレートの保存場所を選び、Figmaのテンプレートをダウンロードします。

② 開発環境を整える

テンプレートをダウンロードしたら、開発環境を整えていきましょう！

A. エディタでダウンロードしたテンプレートを開く

エディタを開き、先ほどダウンロードしたフォルダを選択します。

B. リンターをインストールする

ターミナルを開き、以下のコマンドを入力して、リンターをインストールします。

terminal.

npm install -D typescript eslint@8 @typescript-eslint/parser@6 @typescript-eslint/eslint-plugin@6 @figma/plugin-typings

④ ウィジェットを立ち上げる

開発環境が整ったら、早速ウィジェットを立ち上げてみましょう！

A. TypeScript コンパイルの設定を行う

Figma Widgetはブラウザで実行されるため、TypeScript を JavaScript にコンパイルする必要があります。
以下のコマンドを入力することで、自動コンパイルされるようにします。

terminal.

npm run build -- --watch

B. Figmaのデスクトップアプリでウィジェットを立ち上げる

Widgets > Development > 開発中のWidget を選択し、ウィジェットを立ち上げる

C. 開発準備完了!

ウィジェットがファイルないに挿入されたら、開発準備完了です！

まとめ

この記事では、Figmaのウィジェット作成におけるセットアップの方法について紹介しました。
今後、Figmaのウィジェットを作成するにあたって、勉強したことをQiitaにアウトプットしていこうと思っているので、よかったら、Qiitaのフォローお願いします

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

はじめに

事前準備

① Figmaのデスクトップ アプリ

② エディタ

③ Node.js

テンプレートからプラグインを開発する

① Figmaのデスクトップ アプリからテンプレートをダウンロードする

A. Figmaの新規の Design File を作成する

B. Figmaのデスクトップ アプリからテンプレートをダウンロードする

② 開発環境を整える

A. エディタでダウンロードしたテンプレートを開く

B. リンターをインストールする

④ ウィジェット を立ち上げる

A. TypeScript コンパイルの設定を行う

B. Figmaのデスクトップ アプリで ウィジェット を立ち上げる

C. 開発準備完了!

まとめ

① Figmaのデスクトップアプリ

① Figmaのデスクトップアプリからテンプレートをダウンロードする

B. Figmaのデスクトップアプリからテンプレートをダウンロードする

④ ウィジェットを立ち上げる

B. Figmaのデスクトップアプリでウィジェットを立ち上げる