$30 off During Our Annual Pro Sale. View Details »

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

seya
October 20, 2021

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

seya

October 20, 2021
Tweet

More Decks by seya

Other Decks in Design

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