フロントエンド開発のための Figma

Transcript

1. フロントエンド開発のための
   Figma
   by seya (@sekikazu01)
   

   View Slide

2. このトークで話すこと
   Figma を駆使してフロントエンドの
   
   生産性もあげちゃう使い方・考え方
   

   View Slide

3. デザインってなに？
   

   View Slide

4. このトークでは...
   デザイナーが実装者に UI の
   
   “意図”を伝えるためのもの
   と定義します
   

   View Slide

5. では、そんな“デザイン”は
   
   フロントエンドの生産性に
   
   どう関係するのでしょう？
   

   View Slide

6. 5C “意図”を伝わりやすくする -> Structured Desig8
   ÇC 変更に強いデザインを作る -> デザインをシステム化
   

   View Slide

7. 1. 意図を伝わりやすくする
   

   View Slide

8. フォント、色、影、角丸、etc
   Å レイアウ
   レスポンシÁ
   Ã 状態
   “意図”とは
   

   View Slide

9. ÇÃ フォント、色、影、角丸、etcÃ
   )Ã レイアウ
   Ã レスポンシ
   Ã 状態
   “意図”とは
   

   View Slide

10. ÈÄ フォント、色、影、角丸、etc.
    Figma の右の方で大体見れる
    特に何か作り方に気をつけな
    くても普通に作ってたら見れる
    はず
    

    View Slide

11. Ç フォント、色、影、角丸、etcÇ
    ÉÇ レスポンシÀ
    Ç 状態
    )Ç レイアウ#
    “意図”とは
    

    View Slide

12. Auto Layout!!!
    

    View Slide

13. Auto Layout の何が嬉しいか
    Auto Layout で組まれているとほぼ意図通り再現できる！
    
    (エンジニア的にもそのまま実装すればいいだけで考えなくて良くなるから楽)
    CSS の flexbox とほぼ一緒
    n flex direction - row, columg
    n flex gap - itemSpacin–
    n paddin–
    n justify-content, align-items
    

    View Slide

14. 構造をコードと一緒にする
    https://medium.com/eightshapes-llc/crafting-ui-component-api-together-81946d140371
    

    View Slide

15. どうやったら一緒にできるか…
    

    View Slide

16. HTML と CSS (特に flexbox) を学ぼう！
    https://web.dev/learn/css/
    

    View Slide

17. https://note.com/seyanote/n/n7f74df9acebb
    Spacer を使おう！
    Figma の Auto Layout では個別の margin を指定できないため
    

    View Slide

18. É フォント、色、影、角丸、etcÉ
    ÂÉ レイアウ
    É 状態
    0É レスポンシ(
    “意図”とは
    

    View Slide

19. →
    

    View Slide

20. Constraint
    Constraint は正に画面幅(親の
    Frame)が変わった時にどう
    Scale するかを指定する機能
    

    View Slide

21. Auto Layout の Resize
    Auto Layout の Frame が
    中身の高さ/長さによって
    変わるか/変わらないかを
    指定できる
    

    View Slide

22. フォント、色、影、角丸、etc
    Ã レイアウ
    レスポンシÀ
    ( 状態
    “意図”とは
    

    View Slide

23. UI Stack 忘れがち…
    

    View Slide

24. プロトタイプ で動かすと気付きやすくなるかも
    

    View Slide

25. Variants
    

    View Slide

26. Interactive Components (β)
    Variants がプロトタイプで変えられる。

    Variants がどんな状態遷移をするかを示せるぞ☝️
    

    View Slide

27. でもこんなにしっかり
    
    作るのめんどくさいなぁ…
    

    View Slide

28. 聞きなさい、
    
    愚かなる人の子よ…
    

    View Slide

29. 意図が伝わりやすいデザイン
    =
    メンテナンスしやすいデザイン
    

    View Slide

30. これらのものはきっとデザイナーにとっても
    嬉しいもののはず。そもそもこれらの機能は
    デザイナーが中長期的に楽するために提案さ
    れたものだからです。

    初期の Freeform でデザインいじいじしている
    時には使うのも手間ですが、ある程度デザイ
    ンが固まってからちゃんと作っておくと過去
    の自分に感謝すること間違いなしです。
    

    View Slide

31. 2. 変更に強いデザイン
    

    View Slide

32. - デザイン自体の修正が楽
    
    - デザインを変えた結果のコードの修正が楽
    変更に強いデザインとは？
    

    View Slide

33. 先程 “意図を伝える” で話したことがで
    きていれば Structured Designになって
    いるはず。
    デザイン自体の修正が楽
    =
    Structured Design になっている
    

    View Slide

34. デザインがシステム化されていると既に
    定義されたデザイントークンやコンポー
    ネントを使って一貫した UI を作ることが
    できる。

    優れたデザインシステムがあると View の
    部分の実装がヒュヒュヒュンと終わる。
    これはガチ
    デザインを変えた結果のコードの修正が楽
    =
    デザインがシステム化されている
    

    View Slide

35. デザインをシステム化するって何
    それはここでは語りきれない…

    もうそれだけで一つの大きなテーマになるからだ。

    なんならそれだけで本が書ける。
    Design Systems ―デジタルプロダクトのための
    デザインシステム実践ガイド
    { 著者：アラ・コルマトヴt
    { 監訳：佐藤伸q
    { 定価：3,080円（本体2,800円＋税10%‘
    { 発行・発売：株式会社 ボーンデジタル
    
    

    View Slide

36. 1. デザイントークンを定義する
    2. コンポーネントを作る
    3. Variants を作る
    という訳でここでは Figma が関わる How だけ書きます
    

    View Slide

37. 1. デザイントークンを定義する
    Style を作る
    

    View Slide

38. https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens
    Figma Tokens を使う
    色やタイポグラフィー以外にもスタイルが作れるプラグイン
    

    View Slide

39. View Slide

40. 定義したデザイントークンをコードと同期
    https://github.com/amzn/style-dictionary
    

    View Slide

41. 2. コンポーネントを作る
    

    View Slide

42. Master を使う
    https://dominate.design/
    

    View Slide

43. コンポーネントの粒度をいい感じに設計する
    あとは他のデザインシステムのコンポーネントとか見て学ぶ
    

    View Slide

44. コンポーネントの API をコードと揃える
    揃えるとデザインをどう修正してもコードの修正もシ
    ンプルになるから
    

    View Slide

45. どんなデータがその状態を決定するかに思いを馳せる
    

    View Slide

46. 他のデザインシステムを見て学ぶ
    

    View Slide

47. エンジニアにレビューしてもらう
    

    View Slide

48. でもさぁ…
    

    View Slide

49. ここまで作るならもう
    コードでデザインした
    方が早くない？
    

    View Slide

50. 「…」
    

    View Slide

51. うるせぇ！
    

    View Slide

52. というのは冗談で私は Freeform なデザインから段階的に
    カチカチにできるところが Figma の真髄と考えています

    デザインは意図を伝えるためだけでなく、デザイナーが仮
    説を試すのにも使われるからです。
    

    View Slide

53. 段階が進んできた「コードからデザインするツール」の活
    用も考えてみてもいいかも。e.g. UXPin Merge
    (あと私が作ってる Figma to React とか)
    

    View Slide

54. 最後に
    

    View Slide

55. 開発の生産性を上げるような
    
    デザインを作っていきましょう！
    

    View Slide

56. 開発の生産性を上げるような
    
    デザインを作っていきましょう！
    というのはあまり考えなくていいかも
    

    View Slide

57. なぜなら…
    ユーザにとって一貫性のある体験を作ろうとすれば…
    デザイナーにとって中長期的に生産性が上がるよ
    うなことをすれば…
    ”結果的”に
    
    エンジニアとって嬉しいデザインになる
    

    View Slide

58. シンプルに最高のデザイン・
    
    デザインプロセスを目指す
    

    View Slide

59. 参考文献 - もっとディープな内容を知りたい方へ
    Using the Figma Inspect panel to help engineers build your designs
    https://blog.prototypr.io/using-the-figma-inspect-panel-to-help-engineers-build-your-design-208b2e998b76
    Crafting Component API, Together
    https://medium.com/eightshapes-llc/crafting-ui-component-api-together-81946d140371
    Design Tokens in Figma
    https://www.youtube.com/watch?v=Ka1I5TphDb0
    Mastering design systems components in Figma
    https://www.youtube.com/watch?v=3bBWYDvaONY&t=1142s
    Mastering the art of crafting code-aligned UI kits
    https://www.youtube.com/watch?v=yJmRglpvP8Q
    

    View Slide

60. ご静聴ありがとうございました
    

    View Slide