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

by seya

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

デザインってなに？

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Auto Layout!!!

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

→

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

UI Stack 忘れがち…

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Variants

Slide 26

Slide 26 text

Interactive Components (β) Variants がプロトタイプで変えられる。  Variants がどんな状態遷移をするかを示せるぞ☝️

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

これらのものはきっとデザイナーにとっても嬉しいもののはず。そもそもこれらの機能はデザイナーが中長期的に楽するために提案されたものだからです。  初期の Freeform でデザインいじいじしている時には使うのも手間ですが、ある程度デザインが固まってからちゃんと作っておくと過去の自分に感謝すること間違いなしです。

Slide 31

Slide 31 text

2. 変更に強いデザイン

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

デザインがシステム化されていると既に定義されたデザイントークンやコンポーネントを使って一貫した UI を作ることができる。  優れたデザインシステムがあると View の部分の実装がヒュヒュヒュンと終わる。これはガチデザインを変えた結果のコードの修正が楽 = デザインがシステム化されている

Slide 35

Slide 35 text

デザインをシステム化するって何それはここでは語りきれない…  もうそれだけで一つの大きなテーマになるからだ。  なんならそれだけで本が書ける。 Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド { 著者：アラ・コルマトヴt { 監訳：佐藤伸q { 定価：3,080円（本体2,800円＋税10% { 発行・発売：株式会社ボーンデジタル

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

でもさぁ…

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

「…」

Slide 51

Slide 51 text

うるせぇ！

Slide 52

Slide 52 text

というのは冗談で私は Freeform なデザインから段階的にカチカチにできるところが Figma の真髄と考えています  デザインは意図を伝えるためだけでなく、デザイナーが仮説を試すのにも使われるからです。

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

最後に

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

参考文献 - もっとディープな内容を知りたい方へ 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

Slide 60

Slide 60 text

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