Slide 1

Slide 1 text

⼩さな課題解決からはじめる Figmaプラグイン開発のススメ 2023.05.28 名古屋Figma勉強会

Slide 2

Slide 2 text

発表テーマの背景

Slide 3

Slide 3 text

Figmaデータを読み解くのに苦労した NO MORE TOFU • 前職では創業当初からFont Awesomeの 
 アイコンをアプリの各所で使⽤していた 
 (FigmaにFont Awesomeフォント組み込み) • Figmaでアイコンを⾒ると  が出現! • Inspectを⾒ても何のアイコンかわからない… • デザイナーにその都度確認するしかない… • もしかしたらプラグインがあるかも…!?

Slide 4

Slide 4 text

そんなプラグインは⾒つからず

Slide 5

Slide 5 text

Figmaプラグインを作ってみよう!

Slide 6

Slide 6 text

Figmaプラグイン開発に必要な技術 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり • Figmaプラグインはウェブ技術により動いている • 動作は Java Script で記述し、UIは HTML で構築する • デザイナーでも簡単な動的ウェブサイトのコーディング経験があればできる • Figma公式ドキュメントがイラストやアニメーションで丁寧に教えてくれる • (⾃分も簡単なウェブサイトコーディングくらいの知識しかなかった)

Slide 7

Slide 7 text

プラグイン開発をはじめる Figmaデスクトップアプリが助けてくれる • Figmaデスクトップアプリで雛形を作成 • npmでFigmaプラグイン開発のための 
 パッケージをインストール • VScode等で code.js と ui.html の 
 2つを変更する • Figmaデスクトップアプリで開発中の 
 プラグインをデバッグ https://www. fi gma.com/plugin-docs/plugin-quickstart-guide/

Slide 8

Slide 8 text

プラグイン動作の仕組み code.js と ui.html の間でメッセージをやりとりする code.js ui.html 矩形作成ボタンが押されたよ! 今のページに矩形作ったよ! https://www. fi gma.com/plugin-docs/how-plugins-run

Slide 9

Slide 9 text

Figmaデータのなかみ ノードのツリー構造 • Documentノード • Pageノード • Frameノード • Frameノード • Textノード • Textノード • Frameノード • …

Slide 10

Slide 10 text

Figmaプラグインを設計する 
 課題:Font Awesomeのアイコン名をわかるようにしたい

Slide 11

Slide 11 text

どんなプラグインにすればよいのか? FigmaでFont Awesomeのアイコン名をわかるようにしたい • 初めに考えたのはエンジニアがプラグインを使って 
 アイコン名を確認できるようにすること • しかしプラグインの実⾏は有料プランのユーザーのみだった • エンジニアは閲覧だけなので無料プランを利⽤していた • ではデザイナーにてアイコン名がわかるように何とかする • Textの名前が  になっているのをアイコン名に変更すれば良いのでは? • デザイン作業後、エンジニアに共有する前に⼀括変換できればいいのでは? user / f 0 0 7

Slide 12

Slide 12 text

プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 • フォントがFont Awesome • 1⽂字だけ • ⾒つかったアイコンを表⽰して 
 ユーザーに名前を変更してよいか確認 • その⽂字のコード(Unicode)から 
 アイコン名を調べて名前に反映する

Slide 13

Slide 13 text

プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 • フォントがFont Awesome • 1⽂字だけ • ⾒つかったアイコンを表⽰して 
 ユーザーに名前を変更してよいか確認 • その⽂字のコード(Unicode)から 
 アイコン名を調べて名前に反映する

Slide 14

Slide 14 text

プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 • フォントがFont Awesome • 1⽂字だけ • ⾒つかったアイコンを表⽰して 
 ユーザーに名前を変更してよいか確認 • その⽂字のコード(Unicode)から 
 アイコン名を調べて名前に反映する

Slide 15

Slide 15 text

プラグインを設計する ② ⽂字コードから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

Slide 16

Slide 16 text

Awesome Icon Label Writer

Slide 17

Slide 17 text

Figmaプラグインを公開してみた

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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 クリック!

Slide 20

Slide 20 text

プラグインを公開するには? Figmaデスクトップアプリが助けてくれる • Figmaデスクトップアプリの Community画⾯でPublishボタンを押す • 開発したプラグインを選択して、 
 あとは必要事項を⼊⼒して提出 • 審査に通れば公開!

Slide 21

Slide 21 text

プラグインを公開してみて ぶっちゃけ良いことだらけ • 社内メンバーにとても喜んでもらえた 
 (簡単な機能でも業務課題をしっかり解決) • ⾃分⾃⾝としてもFigmaを⾒ながらの 
 UI実装効率がUPしていることを実感 • FigmaからのWeekly Reportが嬉しい • リリースから1年で約5,000ユーザーまで増加 
 (社外でも同様のニーズがあった)

Slide 22

Slide 22 text

Figmaプラグインつくってみませんか? 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり