Figmaを使ったAtomic Designのワークフロー

Figma ✕ Atomic Designの良さを語りながら、
ビザスク lite リニューアル時のデザインフローについて説明したスライドです。

Transcript

1. Figma をつかった Atomic Design のワークフロー ビザスクリニューアル 　デザイナー編
2. Fumi Nagaoka Visasq inc. designer
3. ×
4. 前提
5. Figmaとは？
6. デザインツール（ex. Sketch, Adobe XD） リアルタイムに複数人で共同作業 コンポーネント化 オブジェクトを できる プロトタイプを作成できる チーム内で同じデザインシステムを共用 好きな場所にコメントを残せる
7. Atomic Designとは？
8. デザインの手法 Atomを組み合わせて全体をデザインする デザインを最小単位「Atoms」まで分解 コンポーネント化 デザイン段階で されている ので、フロントエンド開発と相性が良い
9. コンポーネントの単位 Atoms Molecules Organisms Templates Pages
10. 本題
11. Figma をつかった Atomic Design のワークフロー
12. 課題の洗い出し 1 プロジェクトの目的を設定 2 デザインの作成 3 コンポーネント化 4
13. 課題の洗い出し 1
14. リニューアル前の ビザスク
16. Interface Inventoryを実施  主要な画面の一覧を把握する 現状のコンポーネントの一覧を把握する 現状のUIについての理解を深める 具体的な課題を認識 
17. Interface Inventory 
18. Interface Inventory 
19. 自分の現在地がわからなくなる 名称の表記揺れがあり、ややこしい 似たコンポーネントが乱立している 一度に表示される要素が多く、混乱する 洗い出された課題 
20. プロジェクトの方針決め 2
21. ワークショップの開催  社長、CS、エンジニア、デザイナー等 合計10人ぐらい
22. 理想的なユーザーストーリーとは？ それを実現させるUIの全体像とは？ 認知されていない機能をどう認知させるか 今後追加したい機能をどう実現させるか ビザスクの新しいカラーについて プロジェクトの方針を決める 
23. デザインの作成 3
24. デザインリサーチ 
25. ※30枚以上 ペーパープロトタイピング 
26. ※100以上 Figmaでパターンの書き起こし 
27. ※100以上 メリットデメリットを書き出す 
28. 足りていない視点からの指摘 デザイン案の共有 解決できなかった課題の解決方法について 伝わりづらい部分の指摘 今後のTODOやスケジュールの確認 PJメンバー全員で議論 
29. デザインの完成  ※一旦
30. コンポーネント化 4
31. デザインデータをこの単位で分割 コンポーネント化 Atoms Molecules Organisms Templates Pages
32. Atomsコンポーネントを組み合わせて Moleculesコンポーネントをつくる 何度も使うものはコンポーネント化 Moleculesコンポーネントを組み合わせて Organismsコンポーネントを作る それぞれを組み合わせてTemplatesを作る 方針 
33. Label Status Status Status Status Status Status label label label label label label User Image Atoms   Right Center Left Right  Center  Left  Center Top Bottom Center  Top  Bottom  Form Place holder  Place holder Value  Text :focus error Button 1 2  on  off label label label :hover :active :hover :active :hover :active label :hover :active label label label :hover :active :hover :active :hover :active label :hover :active  1 2 3 :hover  label  Place holder Text Heading List Heading  List Heading Card Heading label  Card Heading label Section Heading  label label label label Section Heading
34. label label Page Heading label  Table Heading すべて見る List YYYY/MM/DD hh:mm NewsTitle YYYY/MM/DD hh:mm :hover Name  ComapnyName :hover  ComapnyName TopicTitle  :hover Name CompanyName ¥00,000 Alert YYYY/MM/DD Type Status ステータス アラート 更新日時 タイプ 金額 相談相手 タイトル IssueTitle Name CompanyName ¥00,000 Alert YYYY/MM/DD Type Status 編集 期限： YYYY/MM/DD Title 応募数： N人 Status 編集 期限： YYYY/MM/DD :hover 応募数： N人 Status YYYY/MM/DD hh:mm NotificationTitleNotificationTitleNotificationTitleNotificationTitleNotificationTi tleNotificationTitle YYYY/MM/DD hh:mm :hover YYYY/MM/DD hh:mm 　 　 UnreadNotificationTitle UnreadNotificationTitle Unread Notification Title UnreadNotificationTitle 未読 MenuLabel :hover ChildMenuLabel :hover ExperienceTitle ¥15,000〜  ExperienceTitle ¥15,000〜  ExperienceTitle ¥15,000〜  ExperienceTitle ¥15,000〜  Heading Card texttexttexttexttexttexttext texttexttexttext texttexttexttexttexttexttexttexttext texttexttexttexttext label Form キーワード（例：サイト集客 SEO） すべての業務  すべての業界  label 任意 必須 label 任意  label label Topic title ¥00,000〜  Topic title ¥00,000〜  Topic title ¥00,000〜  BiographyBiographyBiographyBiographyBiographyBiographyBiographyBiography BiographyBiographyBiographyBiographyBiographyBiographyBiographyBiographyBiographyBiographyBiographyB… Company name　Position Name  候補に入れる label label Molecules
35.  無料会員登録 ご利用方法  ログイン   北島 安結 個人プラン  1 アドバイスする  依頼する  案件管理  案件管理  YYYY/MM/DD hh:mm 「ピザ屋の経営のビジネス経験についてのアンケー ト」が届いています。 YYYY/MM/DD hh:mm 　 双葉 杏 さんから「ランディングページにおける数 値検証と改善...」にメッセージが届きました。 YYYY/MM/DD hh:mm 「ピザ屋の経営のビジネス経験についてのアンケー ト」が届いています。 YYYY/MM/DD hh:mm 「ピザ屋の経営のビジネス経験についてのアンケー ト」が届いています。 YYYY/MM/DD hh:mm 「ピザ屋の経営のビジネス経験についてのアンケー ト」が届いています。 あなたへのお知らせ  すべて見る プロフィール編集 支払い履歴 受け取り履歴 アカウント設定 ログアウト チーム 株式会社ビザスク よくあるご質問 お問い合わせ ご利用ガイド アドバイスする 依頼する ヘルプ  フッター （現状UIをベースに、まとめら れそうなメニューはまとめる） Organisms
36. 共通化できそうなのに微妙に違うパーツ 色んな意味を持っていて分類しづらいもの 統一できそうなのに微妙に違う色 デザインの調整  なるべく統一できるように調整 
37. 完成
38. Before
39. After
40. デザイナー以外のメンバーとの コミュニケーションが取りやすくなった 複数人で同時に作業ができるようになった ミーティング中に修正しやすくなった プロジェクトでファイルをまとめることで ドキュメントを探しやすくなった Figmaを使って良くなったこと 
41. 別のページを作る時の効率が上がった デザインの統一感が増した フロントエンド開発でもコンポーネント化し やすくなった 同じ機能の見た目が統一されることで、 機能のわかりやすさが増した Atomic Designで良くなったこと 
42. 開発時のコンポーネント化の単位と デザインデータの不一致 Atoms・Molecules・Organismsの区分け …今の所大きな課題はないけど、今後は？ 今後の課題 
43. Thank you! NEXT： ビザスクリニューアル　〜エンジニア編〜 Vue.js + CSS Modules でコンポーネント設計をしてみた Figma × Atomic Design オススメです