はじめに
みなさんはFigmaのpluginを使ってますか?
現在、公開されているFigmaのpluginは便利なものが多いです！
画像やイラスト、Iconなどを挿入してくれるPluginやアクセシビリティをチェックしてくれるPluginなど、UIをつくるにあたって、とても便利ですよね？
ただ、公開されている汎用性の高いpluginでは、実業務の課題を解決してくれるものは少なく、見つけるのが大変です。 また、pluginを効果的に使うために、UIの作成フローを変えることも必要になるでしょう。
そのため、Qiitaでは、UIを作成する時の課題を解決するために、Figmaのpluginを開発し、業務を進めています。
そのため、この記事では、Qiitaで開発したFigmaのPluginを紹介しようと思います。
Qiitaで開発したPlugin「Issue Syncer」
Qiitaで開発したPluginは、「Issue Syncer」というFigmaのファイルとGithubのIssueを同期させるプラグインです。
Qiitaでは、GitHubのIssueで仕事を管理し、1つのissueで、1つのFigmaファイルを作成し、Figmaのサムネイルでissueのステータスを管理しています。
この「Issue Syncer」というプラグインでは、Figmaのテンプレートファイルの作成から、ステータスに合わせたサムネイルの変更とGithub Issueの管理をFigma側から行ってくれます。
「Issue Syncer」を開発した理由
このpluginを開発することにした理由には、2点あります。
- Issueに着手してから、UIの作成を始めるのに時間がかかること
- Issueのステータスに合わせて、Figmaのサムネイルを変更し忘れること
◯ Issueに着手してから、UIの作成を始めるのに時間がかかること
Qiitaでは、Issueに着手し始めてFigmaファイルを作成するあたって、やらないといけないことが多いです。
具体的には、
- テンプレートファイルをコピー
- ファイルのタイトルを変更する
- サムネイルにissue番号やタイトルを反映させる
- GitHubのURLや関連するドキュメントのURLをFigmaに反映させる
- GitHubのissueに、FigmaのURLをコメントする
このように、ファイルを管理するために、FigmaとGithubを行き来することが多かったです。
そのため、Issue Syncerでは、ファイルを作成して、GithubのURLを入力しボタンを押すだけで、以下をやってくれます。
- Figmaのテンプレートファイルが作られる機能
- GitHubのissueのStatusに合わせて、サムネイルが自動的に生成される機能
- GithubにFigmaのURLをコメントする機能
Issueのステータスに合わせて、Figmaのサムネイルを変更し忘れること
Qiitaでは、GitHubでissueを管理しているため、エンジニアがFigmaのサムネイルをみて、開発できる状態なのかが判断できなくなっていました。
そのため、Issue Syncerでは、ボタンを押すだけで以下のような機能を開発しました。
- Figmaのサムネイルの変更とissueのCloseが同時にできる機能
- サムネールのステータスをissueに同期させる機能
まとめ
このように、FigmaのPluginを自作すると、自分たちの課題や業務に合ったプラグインを開発できるので、よりデザインに集中できる環境を作ることができます。
今までは、こういうPluginあったらいいなと思っていた方やこういうPluginないかなと検索した方は、ぜひFigmaのPluginを作ってみてはいかがでしょうか？
Figma Plugin開発に関する記事は、僕がQiitaに記事を投稿しているので、興味がある方は、ぜひ記事もご覧ください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。