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

Transcript

1. フロントエンド開発のための Figma by seya (@sekikazu01)
2. このトークで話すこと Figma を駆使してフロントエンドの 生産性もあげちゃう使い方・考え方
3. デザインってなに？
4. このトークでは... デザイナーが実装者に UI の “意図”を伝えるためのもの と定義します
5. では、そんな“デザイン”は フロントエンドの生産性に どう関係するのでしょう？
6. 5C “意図”を伝わりやすくする -> Structured Desig8 ÇC 変更に強いデザインを作る -> デザインをシステム化
7. 1. 意図を伝わりやすくする
8.  フォント、色、影、角丸、etc Å レイアウ  レスポンシÁ Ã 状態 “意図”とは
9. Çà フォント、色、影、角丸、etcà )à レイアウ à レスポンシ à 状態 “意図”とは
10. ÈÄ フォント、色、影、角丸、etc. Figma の右の方で大体見れる 特に何か作り方に気をつけな くても普通に作ってたら見れる はず
11. Ç フォント、色、影、角丸、etcÇ ÉÇ レスポンシÀ Ç 状態 )Ç レイアウ# “意図”とは
12. Auto Layout!!!
13. Auto Layout の何が嬉しいか Auto Layout で組まれているとほぼ意図通り再現できる！ (エンジニア的にもそのまま実装すればいいだけで考えなくて良くなるから楽) CSS の flexbox とほぼ一緒 n flex direction - row, columg n flex gap - itemSpacin– n paddin– n justify-content, align-items
14. 構造をコードと一緒にする https://medium.com/eightshapes-llc/crafting-ui-component-api-together-81946d140371
15. どうやったら一緒にできるか…
16. HTML と CSS (特に flexbox) を学ぼう！ https://web.dev/learn/css/
17. https://note.com/seyanote/n/n7f74df9acebb Spacer を使おう！ Figma の Auto Layout では個別の margin を指定できないため
18. É フォント、色、影、角丸、etcÉ ÂÉ レイアウ É 状態 0É レスポンシ( “意図”とは
19. →
20. Constraint Constraint は正に画面幅(親の Frame)が変わった時にどう Scale するかを指定する機能
21. Auto Layout の Resize Auto Layout の Frame が 中身の高さ/長さによって 変わるか/変わらないかを 指定できる
22.  フォント、色、影、角丸、etc à レイアウ  レスポンシÀ ( 状態 “意図”とは
23. UI Stack 忘れがち…
24. プロトタイプ で動かすと気付きやすくなるかも
25. Variants
26. Interactive Components (β) Variants がプロトタイプで変えられる。
 Variants がどんな状態遷移をするかを示せるぞ☝️
27. でもこんなにしっかり 作るのめんどくさいなぁ…
28. 聞きなさい、 愚かなる人の子よ…
29. 意図が伝わりやすいデザイン = メンテナンスしやすいデザイン
30. これらのものはきっとデザイナーにとっても 嬉しいもののはず。そもそもこれらの機能は デザイナーが中長期的に楽するために提案さ れたものだからです。
 初期の Freeform でデザインいじいじしている 時には使うのも手間ですが、ある程度デザイ ンが固まってからちゃんと作っておくと過去 の自分に感謝すること間違いなしです。
31. 2. 変更に強いデザイン
32. - デザイン自体の修正が楽 - デザインを変えた結果のコードの修正が楽 変更に強いデザインとは？
33. 先程 “意図を伝える” で話したことがで きていれば Structured Designになって いるはず。 デザイン自体の修正が楽 = Structured Design になっている
34. デザインがシステム化されていると既に 定義されたデザイントークンやコンポー ネントを使って一貫した UI を作ることが できる。
 優れたデザインシステムがあると View の 部分の実装がヒュヒュヒュンと終わる。 これはガチ デザインを変えた結果のコードの修正が楽 = デザインがシステム化されている
35. デザインをシステム化するって何 それはここでは語りきれない…
 もうそれだけで一つの大きなテーマになるからだ。
 なんならそれだけで本が書ける。 Design Systems ―デジタルプロダクトのための デザインシステム実践ガイド { 著者：アラ・コルマトヴt { 監訳：佐藤伸q { 定価：3,080円（本体2,800円＋税10%‘ { 発行・発売：株式会社 ボーンデジタル
36. 1. デザイントークンを定義する 2. コンポーネントを作る 3. Variants を作る という訳でここでは Figma が関わる How だけ書きます
37. 1. デザイントークンを定義する Style を作る
38. https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens Figma Tokens を使う 色やタイポグラフィー以外にもスタイルが作れるプラグイン
40. 定義したデザイントークンをコードと同期 https://github.com/amzn/style-dictionary
41. 2. コンポーネントを作る
42. Master を使う https://dominate.design/
43. コンポーネントの粒度をいい感じに設計する あとは他のデザインシステムのコンポーネントとか見て学ぶ
44. コンポーネントの API をコードと揃える 揃えるとデザインをどう修正してもコードの修正もシ ンプルになるから
45. どんなデータがその状態を決定するかに思いを馳せる
46. 他のデザインシステムを見て学ぶ
47. エンジニアにレビューしてもらう
48. でもさぁ…
49. ここまで作るならもう コードでデザインした 方が早くない？
50. 「…」
51. うるせぇ！
52. というのは冗談で私は Freeform なデザインから段階的に カチカチにできるところが Figma の真髄と考えています
 デザインは意図を伝えるためだけでなく、デザイナーが仮 説を試すのにも使われるからです。
53. 段階が進んできた「コードからデザインするツール」の活 用も考えてみてもいいかも。e.g. UXPin Merge (あと私が作ってる Figma to React とか)
54. 最後に
55. 開発の生産性を上げるような デザインを作っていきましょう！
56. 開発の生産性を上げるような デザインを作っていきましょう！ というのはあまり考えなくていいかも
57. なぜなら… ユーザにとって一貫性のある体験を作ろうとすれば… デザイナーにとって中長期的に生産性が上がるよ うなことをすれば… ”結果的”に エンジニアとって嬉しいデザインになる
58. シンプルに最高のデザイン・ デザインプロセスを目指す
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
60. ご静聴ありがとうございました