[!NOTE] このプラグインは組織内でのみ使用可能です！ プラグインには、Figma ユーザーが利用できる Public なプラグインと Private なプラグインの 2つが存在しますが、このプラグインは Private なものであり、組織内に属するメンバーのみが使用できます。

Github Discussions

Github Discussions プラグインを使用すると、

Table of content

• Using
• Settings
  • 開発環境の設定
  • パーソナルアクセストークンの作成
• Build
  • プラグインをビルドするコマンド
  • コードの変更を監視し、プラグインを自動的に再ビルドするコマンド
• Appendix

Using

1. Github Discussions ページにアクセス
2. 「場所を指定して開く...」もしくは、「Open in...」をクリック

Settings

開発環境の設定

1. ishida-daiki リポジトリをクローン

git clone [email protected]:ishida-daiki/github-discussions.git

2. github-discussions フォルダーに移動

cd github-discussions

3. 必要なパッケージをインストール

npm install

4. vs code を起動

code .

5. ルートに .env ファイルを作成し、下記の値を設定

例）ishida-daiki / github-discussions の場合

GITHUB_OWNER=ishida-daiki
GITHUB_REPO=github-discussions
GITHUB_ACCESS_TOKEN=#新規作成した Github のパーソナルアクセストークンを設定してください

[!IMPORTANT] .env ファイルの GITHUB_ACCESS_TOKEN に値が設定されていないと、Github Discussions の情報取得や Github Discussion への登録ができません。 必ず、パーソナルアクセストークンを発行後、.env ファイルに設定してください。

作成方法は パーソナルアクセストークンの作成 をご確認ください。

6. 🎉 開発環境が整いました！実際に開発を行う際は、Build を読んで開発を行ってください。

パーソナルアクセストークンの作成

1. Github にログイン後、https://github.com/settings/tokens を開く
2. Generate new token を押下
3. 「Note」 に、トークン名を設定
4. 「Expiration」 を No expiration で設定
5. 「Select scopes」 の repo と write:discussion にチェックを入れる
6. Generate token を押下
7. 生成されたトークンをコピーし、.env ファイルの GITHUB_ACCESS_TOKEN に設定 設定

[!WARNING] 複数の GITHUB_ACCESS_TOKEN を作成するのではなく、一つだけ生成し、それをチーム内で共用する方法を推奨します。

Build

プラグインをビルドするコマンド

npm run build

上記コマンドを実行すると、manifest.json ファイルとプラグイン用の JavaScript バンドルを含む build/ ディレクトリが生成されます。

プラグインを自動的に再ビルドするコマンド

npm run watch

上記コマンドにより、ソースコードの変更が監視されます。更新があるとプラグインは自動的に再ビルドされます。

Appendix

• Create Figma Plugin docs
• yuanqing/figma-plugins

Figmaの公式ドキュメントとコードサンプル：

• Plugin API docs
• figma/plugin-samples