Figmaプラグイン開発のススメ

名古屋Figma勉強会 #01 での発表資料
https://connpass.com/event/283140/

Transcript

1. ⼩さな課題解決からはじめる Figmaプラグイン開発のススメ 2023.05.28 名古屋Figma勉強会
2. 発表テーマの背景
3. Figmaデータを読み解くのに苦労した NO MORE TOFU • 前職では創業当初からFont Awesomeの 
 アイコンをアプリの各所で使⽤していた 
 (FigmaにFont Awesomeフォント組み込み) • Figmaでアイコンを⾒ると  が出現！ • Inspectを⾒ても何のアイコンかわからない… • デザイナーにその都度確認するしかない… • もしかしたらプラグインがあるかも…!?
4. そんなプラグインは⾒つからず
5. Figmaプラグインを作ってみよう！
6. Figmaプラグイン開発に必要な技術 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり • Figmaプラグインはウェブ技術により動いている • 動作は Java Script で記述し、UIは HTML で構築する • デザイナーでも簡単な動的ウェブサイトのコーディング経験があればできる • Figma公式ドキュメントがイラストやアニメーションで丁寧に教えてくれる • (⾃分も簡単なウェブサイトコーディングくらいの知識しかなかった)
7. プラグイン開発をはじめる Figmaデスクトップアプリが助けてくれる • Figmaデスクトップアプリで雛形を作成 • npmでFigmaプラグイン開発のための 
 パッケージをインストール • VScode等で code.js と ui.html の 
 2つを変更する • Figmaデスクトップアプリで開発中の 
 プラグインをデバッグ https://www. fi gma.com/plugin-docs/plugin-quickstart-guide/
8. プラグイン動作の仕組み code.js と ui.html の間でメッセージをやりとりする code.js ui.html 矩形作成ボタンが押されたよ! 今のページに矩形作ったよ! https://www. fi gma.com/plugin-docs/how-plugins-run
9. Figmaデータのなかみ ノードのツリー構造 • Documentノード • Pageノード • Frameノード • Frameノード • Textノード • Textノード • Frameノード • …
10. Figmaプラグインを設計する 
 課題：Font Awesomeのアイコン名をわかるようにしたい
11. どんなプラグインにすればよいのか？ FigmaでFont Awesomeのアイコン名をわかるようにしたい • 初めに考えたのはエンジニアがプラグインを使って 
 アイコン名を確認できるようにすること • しかしプラグインの実⾏は有料プランのユーザーのみだった • エンジニアは閲覧だけなので無料プランを利⽤していた • ではデザイナーにてアイコン名がわかるように何とかする • Textの名前が  になっているのをアイコン名に変更すれば良いのでは？ • デザイン作業後、エンジニアに共有する前に⼀括変換できればいいのでは？ user / f 0 0 7
12. プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 • フォントがFont Awesome • １⽂字だけ • ⾒つかったアイコンを表⽰して 
 ユーザーに名前を変更してよいか確認 • その⽂字のコード（Unicode）から 
 アイコン名を調べて名前に反映する
13. プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 • フォントがFont Awesome • １⽂字だけ • ⾒つかったアイコンを表⽰して 
 ユーザーに名前を変更してよいか確認 • その⽂字のコード（Unicode）から 
 アイコン名を調べて名前に反映する
14. プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 • フォントがFont Awesome • １⽂字だけ • ⾒つかったアイコンを表⽰して 
 ユーザーに名前を変更してよいか確認 • その⽂字のコード（Unicode）から 
 アイコン名を調べて名前に反映する
15. プラグインを設計する ② ⽂字コードからFont Awesomeのアイコン名を引くには？ • Font AwesomeのGitHubリポジトリに 公開されているアイコン情報を使⽤ 
 • ⽂字コードからアイコン名を引くための 辞書を作ってプラグインに組み込む https://github.com/FortAwesome/Font-Awesome/tree/ d 3 a 7 8 1 8 c 2 5 3 fcba ff f 9 ebd 1 d 4 abb 2 8 6 6 c 1 9 2 e 1 d 7 /metadata
16. Awesome Icon Label Writer
17. Figmaプラグインを公開してみた
19. https://www. fi gma.com/community/plugin/ 1 1 0 3 9 9 7 5 2 5 6 3 0 1 9 1 4 6 9 クリック！
20. プラグインを公開するには？ Figmaデスクトップアプリが助けてくれる • Figmaデスクトップアプリの Community画⾯でPublishボタンを押す • 開発したプラグインを選択して、 
 あとは必要事項を⼊⼒して提出 • 審査に通れば公開！
21. プラグインを公開してみて ぶっちゃけ良いことだらけ • 社内メンバーにとても喜んでもらえた 
 (簡単な機能でも業務課題をしっかり解決) • ⾃分⾃⾝としてもFigmaを⾒ながらの 
 UI実装効率がUPしていることを実感 • FigmaからのWeekly Reportが嬉しい • リリースから1年で約5,000ユーザーまで増加 
 (社外でも同様のニーズがあった)
22. Figmaプラグインつくってみませんか？ 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり