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

Transcript

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

   View Slide

2. 発表テーマの背景
   

   View Slide

3. Figmaデータを読み解くのに苦労した
   NO MORE TOFU
   • 前職では創業当初からFont Awesomeの
   

   アイコンをアプリの各所で使⽤していた
   

   (FigmaにFont Awesomeフォント組み込み)
   
   
   • Figmaでアイコンを⾒ると  が出現！
   
   
   • Inspectを⾒ても何のアイコンかわからない…
   
   
   • デザイナーにその都度確認するしかない…
   
   
   • もしかしたらプラグインがあるかも…!?
   

   View Slide

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

   View Slide

5. Figmaプラグインを作ってみよう！
   

   View Slide

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

   View Slide

7. プラグイン開発をはじめる
   Figmaデスクトップアプリが助けてくれる
   • Figmaデスクトップアプリで雛形を作成
   
   
   • npmでFigmaプラグイン開発のための
   

   パッケージをインストール
   
   
   • VScode等で code.js と ui.html の
   

   2つを変更する
   
   
   • Figmaデスクトップアプリで開発中の
   

   プラグインをデバッグ
   https://www.
   fi
   gma.com/plugin-docs/plugin-quickstart-guide/
   

   View Slide

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

   View Slide

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

   View Slide

10. Figmaプラグインを設計する
    

    課題：Font Awesomeのアイコン名をわかるようにしたい
    

    View Slide

11. どんなプラグインにすればよいのか？
    FigmaでFont Awesomeのアイコン名をわかるようにしたい
    • 初めに考えたのはエンジニアがプラグインを使って
    

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

    View Slide

12. プラグインを設計する
    ① Font Awesomeのアイコンを⾒つけて名前を変更する
    • 編集中のページの⼦ノード→孫ノード…
    と下に辿ってTextノードを⾒つける
    
    
    • Textノードがアイコンかどうかを判定
    
    
    • フォントがFont Awesome
    
    
    • １⽂字だけ
    
    
    • ⾒つかったアイコンを表⽰して
    

    ユーザーに名前を変更してよいか確認
    
    
    • その⽂字のコード（Unicode）から
    

    アイコン名を調べて名前に反映する
    

    View Slide

13. プラグインを設計する
    ① Font Awesomeのアイコンを⾒つけて名前を変更する
    • 編集中のページの⼦ノード→孫ノード…
    と下に辿ってTextノードを⾒つける
    
    
    • Textノードがアイコンかどうかを判定
    
    
    • フォントがFont Awesome
    
    
    • １⽂字だけ
    
    
    • ⾒つかったアイコンを表⽰して
    

    ユーザーに名前を変更してよいか確認
    
    
    • その⽂字のコード（Unicode）から
    

    アイコン名を調べて名前に反映する
    

    View Slide

14. プラグインを設計する
    ① Font Awesomeのアイコンを⾒つけて名前を変更する
    • 編集中のページの⼦ノード→孫ノード…
    と下に辿ってTextノードを⾒つける
    
    
    • Textノードがアイコンかどうかを判定
    
    
    • フォントがFont Awesome
    
    
    • １⽂字だけ
    
    
    • ⾒つかったアイコンを表⽰して
    

    ユーザーに名前を変更してよいか確認
    
    
    • その⽂字のコード（Unicode）から
    

    アイコン名を調べて名前に反映する
    

    View Slide

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
    

    View Slide

16. Awesome Icon Label Writer
    

    View Slide

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

    View Slide

18. View Slide

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

    View Slide

20. プラグインを公開するには？
    Figmaデスクトップアプリが助けてくれる
    • Figmaデスクトップアプリの
    Community画⾯でPublishボタンを押す
    
    
    • 開発したプラグインを選択して、
    

    あとは必要事項を⼊⼒して提出
    
    
    • 審査に通れば公開！
    

    View Slide

21. プラグインを公開してみて
    ぶっちゃけ良いことだらけ
    • 社内メンバーにとても喜んでもらえた
    

    (簡単な機能でも業務課題をしっかり解決)
    
    
    • ⾃分⾃⾝としてもFigmaを⾒ながらの
    

    UI実装効率がUPしていることを実感
    
    
    • FigmaからのWeekly Reportが嬉しい
    
    
    • リリースから1年で約5,000ユーザーまで増加
    

    (社外でも同様のニーズがあった)
    

    View Slide

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

    View Slide