Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Tomoki Kobayashi

May 28, 2023
Tweet

More Decks by Tomoki Kobayashi

Other Decks in Design

Transcript

  1. Figmaデータを読み解くのに苦労した NO MORE TOFU • 前職では創業当初からFont Awesomeの 
 アイコンをアプリの各所で使⽤していた 


    (FigmaにFont Awesomeフォント組み込み) • Figmaでアイコンを⾒ると  が出現! • Inspectを⾒ても何のアイコンかわからない… • デザイナーにその都度確認するしかない… • もしかしたらプラグインがあるかも…!?
  2. Figmaプラグイン開発に必要な技術 為せば成る、為さねば成らぬ、何事も、成らぬは⼈の為さぬなりけり • Figmaプラグインはウェブ技術により動いている • 動作は Java Script で記述し、UIは HTML

    で構築する • デザイナーでも簡単な動的ウェブサイトのコーディング経験があればできる • Figma公式ドキュメントがイラストやアニメーションで丁寧に教えてくれる • (⾃分も簡単なウェブサイトコーディングくらいの知識しかなかった)
  3. プラグイン開発をはじめる Figmaデスクトップアプリが助けてくれる • Figmaデスクトップアプリで雛形を作成 • npmでFigmaプラグイン開発のための 
 パッケージをインストール • VScode等で

    code.js と ui.html の 
 2つを変更する • Figmaデスクトップアプリで開発中の 
 プラグインをデバッグ https://www. fi gma.com/plugin-docs/plugin-quickstart-guide/
  4. どんなプラグインにすればよいのか? FigmaでFont Awesomeのアイコン名をわかるようにしたい • 初めに考えたのはエンジニアがプラグインを使って 
 アイコン名を確認できるようにすること • しかしプラグインの実⾏は有料プランのユーザーのみだった •

    エンジニアは閲覧だけなので無料プランを利⽤していた • ではデザイナーにてアイコン名がわかるように何とかする • Textの名前が  になっているのをアイコン名に変更すれば良いのでは? • デザイン作業後、エンジニアに共有する前に⼀括変換できればいいのでは? user / f 0 0 7
  5. プラグインを設計する ① Font Awesomeのアイコンを⾒つけて名前を変更する • 編集中のページの⼦ノード→孫ノード… と下に辿ってTextノードを⾒つける • Textノードがアイコンかどうかを判定 •

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

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

    フォントがFont Awesome • 1⽂字だけ • ⾒つかったアイコンを表⽰して 
 ユーザーに名前を変更してよいか確認 • その⽂字のコード(Unicode)から 
 アイコン名を調べて名前に反映する
  8. プラグインを設計する ② ⽂字コードから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
  9. 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 クリック!