Tweet
Tweet

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

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