こんにちは！UI/UXデザイナーのYOROです！
やっとFigmaの新しいUI、UI3に切り替わりテンション上がっています🎉

最近、弊社では他部門でもFigmaから画像の出力をする機会が増え、「もっと簡単に出力できないか」という声をよく耳にしました。
特に出力を指定をする際に、指定する階層を誤って、想定していないものが出力されることが多いようです。

そこで出力のサポートをするためにプラグインを作りました！
セクションをクリックするだけで、その直下にあるフレームを簡単に出力できるというプラグインです。
（作ってから最大のミス発覚！デザイナー以外は閲覧権限のため目的を達成できませんでした😭※プラグインの使用は編集権限が必要です）

https://www.figma.com/community/plugin/1422097801716390544/one-click-export

・・・ということで、プラグインを作るす際に活用したFigma公式のサンプルプラグインについて、作成からローカルでのテストまでの手順をメモとしてまとめておきたいと思います！

事前準備
サンプルプラグインの作成
- 手順
- 作成されたファイル
Figmaプラグインの環境構築
- 手順
ローカルでのテスト
- 手順
ここからコードを書くぞ人向けの雑メモ

事前準備

Figmaアカウント

Figmaプラグインを開発するには、Figmaのアカウントが必要です。
Figmaの公式ウェブサイトから無料で登録できます。
Sign Up for Figma

Figma デスクトップアプリ

プラグインの開発にはデスクトップアプリを使う必要があります。
Figmaダウンロード | デスクトップ&モバイル向けWebデザインアプリ

テキストエディタ

お好きなエディタでOKです！
私はVisual Studio Codeを使っているため、こちらで進めます。
Download Visual Studio Code - Mac, Linux, Windows

Node.js と npm

HTML と JavaScript のみでもできますが、公式推奨の TypeScript を使う場合は Node.js と npm が必要です。
※ npm の代わりに yarn を使っても大丈夫です。
Node.js — Download Node.js®

サンプルプラグインの作成

手順

①新しいFigmaファイルを作成します。
②Figmaのメニュー > プラグイン > 開発 > プラグインの新規作成...をクリックします。

③ダイアログが表示します。
④名前にプラグイン名を入力します。今回はSampleという名前を入力します。
⑤「次へ」をクリックします。

⑥「カスタムUI」を選択します。
⑦「名前をつけて保存」をクリックします。

名前	内容
デフォルト	なにも記述されていないブランクのテンプレート
1回実行する	UIを必要としない､即実行されるプラグインのテンプレート
カスタムUIる	ユーザーからの入力を受け取りながら､複雑なタスクを実行できるテンプレート

⑧どこに保存するのかを指定し、ボタン「保存」をクリックします。今回はデスクトップに保存します。

⑨作成されました〜というダイアログが表示し、その表示にある「フォルダーを開く」をクリックします。

作成されたファイル

開いた先に下記ファイルが存在していたらサンプルプラグインの作成は完了です！

Sample
├── README.md・・・プロジェクトの概要や使用方法を記載 
├── code.js ・・・ code.tsから書き出されるファイル 
├── code.ts ・・・ mainのJSファイル。manifest.jsonで定義する 
├── manifest.json ・・・　プラグインのメタ情報を定義するファイル
├── node_modules・・・プロジェクトで使用する外部ライブラリ 
├── package-lock.json・・・ライブラリのバージョン管理を行うファイル
├── package.json・・・プロジェクトの依存関係やスクリプトを定義するファイル 
├── tsconfig.json・・・TypeScriptコンパイル設定ファイル 
└── ui.html ・・・UIのファイル。manifest.jsonで定義する

Figmaプラグインの環境構築

手順

①code.jsが下記であることを確認してください。何も考えずOK。

throw new Error("This plugin template uses TypeScript. Follow the instructions in `README.md` to generate `code.js`.")

②下記のコマンドを実行してください。

npm install
npm install -D @figma/plugin-typings
npm run build

③code.jsをもう一度確認してみてください。下記のように沢山テキストが入っていたら成功です！

"use strict";
// This file holds the main code for plugins. Code in this file has access to
// the *figma document* via the figma global object.
// You can access browser APIs in the <script> tag inside "ui.html" which has a
// full browser environment (See https://www.figma.com/plugin-docs/how-plugins-run).
// Runs this code if the plugin is run in Figma
if (figma.editorType === 'figma') {
略

ローカルでのテスト

手順

Figmaに戻ります。
①リソース＞プラグインとウィジェットをクリックします。
②「Sample」というプラグインをクリックします。
③ウィンドウが表示します。
④ボタン「Create」をクリックしてください。
⑤画面に5つのオレンジ色の四角のオブジェクトができます！

これで、サンプルプラグインの動作確認が完了です！
カンタンにプラグインの雛形を作成できます！興味のある方はぜひプラグインを作ってみてください✨

（私も次こそは使えるプラグインを出そう🥹）

ここからコードを書くぞ人向けの雑メモ

Figma REST API

FigmaのAPIです。Figma REST API と呼ばれているみたいです。
www.figma.com

メインコード（code.ts）の動作と注意点

Figmaプラグインのメインコード（code.ts）は、Figmaのメインスレッドでサンドボックス化された環境内で実行されます。
これはセキュリティ上の理由からで、基本的なJavaScriptは使用できるものの、ブラウザの標準機能にはアクセスできません。
例：XMLHttpRequest や DOM操作といったブラウザ固有の機能は使えないため、Figma操作に専念するコードを書くというイメージ