はじめに
みなさんは、デザインする業務をもっと効率的に行いたいと思ったことはありますか？
今回は、Qiitaで作ったFigmaのPluginを紹介しようと思います。
IssueSynker
今回作ったFigmaのPluginは、「IssueSynker」 というプラグインです。
IssueSynkerでは以下のことができます。
- Figmaファイルのテンプレートをボタン1つで生成してくれる
- Figmaのサムネイルをボタン1つで変えてくれる
○ Figmaファイルのテンプレートをボタン1つで生成してくれる
「Figmaファイルのテンプレートをボタン1つで生成してくれる」 は、issueに着手するフローをもっと便利にするため、開発しました。
今までのフロー
Qiitaでは、issueを進めるにあたって、デザイナーが手動で以下のフローで行っています。
- テンプレート用ファイルを複製
-
Github Issueのタイトルを以下のように修正
${Repository Name}#${Issue Number} - ${Issue Title}- 例）
qiita-design#1234 - issueタイトル
- テンプレートにgithubのリンク・ドキュメントのリンクを入れる
-
サムネイルを修正
- サムネイル コンポーネントのプロパティを修正
- Github Issueのタイトルを入力
- Github Issueのissue番号を入力
- Github IssueにFigmaのURLと関係のあるドキュメントのリンクをコメントする
このように、Issueを進める準備行っているので、毎回準備に10分〜15分ほどかかっていました。
プラグインでやってくれること
この辺りのフローを簡単にするため、このプラグインでは、GithubのIssueのURLとドキュメントのURLを入力し、ボタンを押すことで、以下のことを行ってくれるようにしました。
-
必要なページ作成の生成
- 「作業用ページ」「サムネイル用ページ」を生成する
-
ファイル整理に必要なコンポーネントを生成
- デザインデータを整理するためのラベルやコンポーネントを生成する
- Githubのリンクやドキュメントのリンクをドキュメントに追加する
-
Github Issueに合わせて、サムネイルを生成
- リポジトリに合わせて、サムネイル コンポーネントのプロパティを修正する
- Github Issueのタイトルを入力をサムネイルに反映する
- Github Issueのissue番号をサムネイルに反映する
-
Github Issueにコメントする
- FigmaのデザインデータとドキュメントのURLをGithubのIssueにコメントする
Issueを進める準備が5分程度になりました。（マジ便利。）
Qiitaでは、1週間で10issueのデザインデータを作成しているので、
1ヶ月でだいだい80分の作業が効率化されました 🎉
（4週間 * 10issue * 10分 = 80分）
○ Figmaのサムネイルをボタン1つで変えてくれる
「Figmaのサムネイルをボタン1つで変えてくれる」は、副次的な機能になります。
Qiitaでは以下のタイミングでサムネイルを変更しています。
- デザインが完了した時
- 機能がリリースされた時
- 開発しなくなった時
そのため、毎回サムネイル用のファイルを開いて、サムネイル用コンポーネントのプロパティを変えるのは大変です。
そのため、Pluginからボタン1つで変えられるようにしています。
公開について
このプラグインは、社内のみで使うことを前提に作っているため、component Key やthumbnail componentのプロパティなどが固定値になっているため、公開することは考えてないです。 🙏
Qiita社内では、githubにこのプラグインのリポジトリを作り、各自でCloneして、使っています。
今後の展望
今後は以下のような機能を追加しようと思っています。
- Quick Action（
command + /） からプラグインを実行できるようにする機能 - Figma Pluginから、GitHubのIssueをCloseできるようにする機能
- メンバーから感想を聞いて改善する
まとめ
この記事では、Qiitaで作ったFigmaのPluginを紹介しました。
このプラグインは、公開しているわけではないですが、デザイナーの皆さんの参考になればと思います。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。