github-discussions-templete

github-discussions-template は、Figma から GitHub Discussions に直接投稿できる Figma プラグインのテンプレートプロジェクトです。コードをカスタマイズし、チームのワークフローに合わせてご利用ください。

Another Language README

Table of contents

1. 🔌  Figma Sample Plugin
2. 🚀  Features
3. 👀  Usecase
4. 🔍  Benefits
5. 🤔  Intended Use
6. ⚙️  Settings
7. 🔨  Build
8. 🔐  Plugin Security Notice
9. 📝  Credits
10. 💬  Appendix

🔌  Figma Sample Plugin

このプラグインは、github-discussions-templete をビルドしたプライベートプラグインです。

Note

DMM.com 組織内のメンバーは、下記の手順でプラグインをお試しできます:

1. Discussions にアクセス。
2. "Open in..." を押下。

🚀  Features

• シームレスな投稿: Figma Design や FigJam、Dev Mode から直接 GitHub Discussions にリクエスト、フィードバック、ディスカッションしたい内容を投稿できます。
  • 投稿内容には、選択した Figma の要素リンク、タイトル、内容、ラベル、画像を添付して送ることができます。また、送信した人の名前も送付されるため、誰がどんな内容を投稿したのかが一目でわかります。
• 通知機能: GitHub Discussions に新しい投稿が追加された場合、設定されたSlackチャンネルにも自動的に通知が送信されます。この機能により、チーム全体が最新のディスカッション内容を即座に把握できます。

👀  Usecase

• デザインシステムの効率的な運用
  • デザイナーとエンジニアが一つのデザインシステムを用いて複数のプロジェクトを開発中に、疑問や改善点、要望が生じた場合に有効です。
  • Figma ツールから離脱することなく、フィードバックや質問、要望をデザインシステム開発チームに投稿できます。
  • デザイナーはデザイン作業中に発生した疑問や改善点を、その場でスクリーンショットや詳細を添えて投稿することができます。一方、エンジニアは開発中に感じたデザインシステムの仕様に関する疑問や問題点を迅速に投稿し、早期に解決することができます。
• 利用場面の差別化
  • Figma コメント機能:
    • 単一または少数の Figma ファイル内での素早いフィードバックや議論に適しています。デザインの詳細についてその場でコメントを追加・表示でき、即座に反応を得ることができます。
    • ただし、複数の Figma ファイルを跨いで開発を行うデザインシステムのようなプロジェクトでは、全てのフィードバックや質問を一元管理するのが困難になることがあります。
  • GitHub Discussions:
    • 複数の Figma ファイルや大規模なプロジェクトでの議論に最適です。複数のプロジェクト間の連携や、長期的な視点での情報管理が可能になり、デザインと開発の橋渡しを包括的にサポートします。
    • GitHub Discussions を活用することで、プロジェクト全体の透明性が向上し、フィードバックや質問の履歴を一元管理することができます。これは、長期間に渡るプロジェクトや多くのチームメンバーが関わる開発において特に有用です。

🔍  Benefits

• 意見の集約と管理:

  • デザインシステムに関する利用者からの意見を一箇所に集約して管理することができます。これにより、過去のフィードバックや質問を簡単に見返すことができ、対応履歴を一目で把握できます。

• 知識の共有:

  • 新しいメンバーがプロジェクトに参加した際に、過去に行われた意思決定や問い合わせの内容を確認することができるため、スムーズにプロジェクトに入っていくことができます。この情報は、これからの設計や開発に一貫性を持たせる上でも役立ちます。

• 効率化:

  • 使用者が Figma ツールから離れずにフィードバックを送信できるため、ツール間の移動による時間のロスがなくなり、作業効率が向上します。リアルタイムでのフィードバックのやり取りにより、問題の早期発見と解決が可能になります。

🤔  Intended Use

GitHub Discussions を Figma Community Forum のように、デザインや開発に関わるさまざまな意見を集約する場として利用することを想定しています。デザインシステムに関する議論を一箇所に集めることで、より効果的なコラボレーションを促進します。

⚙️  Settings

開発環境の設定

1. 「Use this template」を押下し、「Create a new repository」を選択して、新しいリポジトリを作成。
2. 新しく作成したリポジトリをクローン。
3. クローンしたリポジトリに移動。
4. 必要なパッケージをインストール:

npm install

5. 任意のIDEを開く（例: VS Code, Cursorなど）:

6. ルートディレクトリに .env ファイルを作成し、以下の値を設定
   例）ishida-daiki / github-discussions-templete の場合:

GITHUB_OWNER=ishida-daiki
GITHUB_REPO=github-discussions-templete
GITHUB_ACCESS_TOKEN=#ここに新しく作成した GitHub Personal access token を設定してください。

Important

.env ファイルの GITHUB_ACCESS_TOKEN に Personal access token が設定されていない場合、GitHub Discussions の情報取得や、GitHub Discussions へのポストができません。
Personal access token を生成後、必ず .env ファイルの GITHUB_ACCESS_TOKEN に設定してください。

Personal access token の作成方法については、Personal Access Token の作成 をご参照ください。

7. 🎉 開発環境の設定が完了しました！開発を開始する際には、Build をご確認ください。

Personal Access Token の作成

1. GitHub にログインし、https://github.com/settings/tokens を押下。
2. 「Generate new token」を押下し、Generate new token (classic) を選択。
3. 「Expiration」を No expiration に設定。
4. 「Select scopes」セクションで、repo と write:discussion のチェックボックスを選択。
5. 「Generate token」を押下。
6. 生成されたトークンをコピーし、.env ファイル内の GITHUB_ACCESS_TOKEN に設定。

Warning

複数の GITHUB_ACCESS_TOKEN を作成するのではなく、単一のトークンを生成し、チーム内で共有することをお勧めします。

🔨  Build

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

npm run build

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

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

npm run watch

このコマンドはソースコードの変更を監視し、更新が検出されるとプラグインを自動的に再ビルドします。

🔐  Plugin Security Notice

もともと、figma.clientStorage を使用してユーザーのローカルマシンにデータを保存し、GitHub Discussions に投稿するプラグインを作成する予定でした。しかし、公式の Figma ドキュメントでは次のように述べられています:

⚠ The data is stored privately for stability, not security. It prevents other plugins from accessing with your data. It does not, however, prevent users from seeing data stored on their own client given sufficient effort.

figma.clientStorage

この説明を考慮して、アクセストークンなどのデータを保存するにはリスクがあると判断しました。したがって、このプラグインをテンプレートとして提供します。プラグインは、公開プラグインではなく、プライベートまたは組織専用のプラグインとして、自分の環境でビルドしてご使用ください。

📝  Credits

このプロジェクトは、Yuan Qing Lim さんが提供している create-figma-plugin をベースにして開発しました。元のソースコードを使用し、新しい MIT ライセンスの下で新しいテンプレートとして提供しています。新しい MIT ライセンスの全文については、このリポジトリ内の LICENSE ファイルをご参照ください。

💬  Appendix

• Create Figma Plugin docs
• yuanqing/figma-plugins

公式 Figma ドキュメントおよびコードサンプル:

• Plugin API docs
• figma/plugin-samples