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

Slide 1

Slide 1 text

Figma をつかった Atomic Design のワークフロービザスクリニューアル　デザイナー編

Slide 2

Slide 2 text

Fumi Nagaoka Visasq inc. designer

Slide 3

Slide 3 text

Slide 4

Slide 4 text

前提

Slide 5

Slide 5 text

Figmaとは？

Slide 6

Slide 6 text

デザインツール（ex. Sketch, Adobe XD）リアルタイムに複数人で共同作業コンポーネント化オブジェクトをできるプロトタイプを作成できるチーム内で同じデザインシステムを共用好きな場所にコメントを残せる

Slide 7

Slide 7 text

Atomic Designとは？

Slide 8

Slide 8 text

デザインの手法 Atomを組み合わせて全体をデザインするデザインを最小単位「Atoms」まで分解コンポーネント化デザイン段階でされているので、フロントエンド開発と相性が良い

Slide 9

Slide 9 text

コンポーネントの単位 Atoms Molecules Organisms Templates Pages

Slide 10

Slide 10 text

本題

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

課題の洗い出し 1 プロジェクトの目的を設定 2 デザインの作成 3 コンポーネント化 4

Slide 13

Slide 13 text

課題の洗い出し 1

Slide 14

Slide 14 text

リニューアル前のビザスク

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Interface Inventoryを実施  主要な画面の一覧を把握する現状のコンポーネントの一覧を把握する現状のUIについての理解を深める具体的な課題を認識 

Slide 17

Slide 17 text

Interface Inventory 

Slide 18

Slide 18 text

Interface Inventory 

Slide 19

Slide 19 text

自分の現在地がわからなくなる名称の表記揺れがあり、ややこしい似たコンポーネントが乱立している一度に表示される要素が多く、混乱する洗い出された課題 

Slide 20

Slide 20 text

プロジェクトの方針決め 2

Slide 21

Slide 21 text

ワークショップの開催  社長、CS、エンジニア、デザイナー等合計10人ぐらい

Slide 22

Slide 22 text

理想的なユーザーストーリーとは？それを実現させるUIの全体像とは？認知されていない機能をどう認知させるか今後追加したい機能をどう実現させるかビザスクの新しいカラーについてプロジェクトの方針を決める 

Slide 23

Slide 23 text

デザインの作成 3

Slide 24

Slide 24 text

デザインリサーチ 

Slide 25

Slide 25 text

※30枚以上ペーパープロトタイピング 

Slide 26

Slide 26 text

※100以上 Figmaでパターンの書き起こし 

Slide 27

Slide 27 text

※100以上メリットデメリットを書き出す 

Slide 28

Slide 28 text

足りていない視点からの指摘デザイン案の共有解決できなかった課題の解決方法について伝わりづらい部分の指摘今後のTODOやスケジュールの確認 PJメンバー全員で議論 

Slide 29

Slide 29 text

デザインの完成  ※一旦

Slide 30

Slide 30 text

コンポーネント化 4

Slide 31

Slide 31 text

デザインデータをこの単位で分割コンポーネント化 Atoms Molecules Organisms Templates Pages

Slide 32

Slide 32 text

Atomsコンポーネントを組み合わせて Moleculesコンポーネントをつくる何度も使うものはコンポーネント化 Moleculesコンポーネントを組み合わせて Organismsコンポーネントを作るそれぞれを組み合わせてTemplatesを作る方針 

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

 無料会員登録ご利用方法  ログイン   北島安結個人プラン  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

Slide 36

Slide 36 text

共通化できそうなのに微妙に違うパーツ色んな意味を持っていて分類しづらいもの統一できそうなのに微妙に違う色デザインの調整  なるべく統一できるように調整 

Slide 37

Slide 37 text

完成

Slide 38

Slide 38 text

Before

Slide 39

Slide 39 text

After

Slide 40

Slide 40 text

デザイナー以外のメンバーとのコミュニケーションが取りやすくなった複数人で同時に作業ができるようになったミーティング中に修正しやすくなったプロジェクトでファイルをまとめることでドキュメントを探しやすくなった Figmaを使って良くなったこと 

Slide 41

Slide 41 text

別のページを作る時の効率が上がったデザインの統一感が増したフロントエンド開発でもコンポーネント化しやすくなった同じ機能の見た目が統一されることで、機能のわかりやすさが増した Atomic Designで良くなったこと 

Slide 42

Slide 42 text

開発時のコンポーネント化の単位とデザインデータの不一致 Atoms・Molecules・Organismsの区分け …今の所大きな課題はないけど、今後は？今後の課題 

Slide 43

Slide 43 text

Thank you! NEXT：ビザスクリニューアル　〜エンジニア編〜 Vue.js + CSS Modules でコンポーネント設計をしてみた Figma × Atomic Design オススメです