Figmaを学ぶ会Vol.2プロジェクトメンバー全員が幸せになるFigmaプロジェクト管理術

Figmaを学ぶ会Vol.2
プロジェクトメンバー全員が幸せになるFigmaプロジェクト管理術
https://note.com/mc_dir/n/n5cc2cb25bbae

Figmaを学びたいという社内の要望によりFigmaの有識者により仕事終わりに勉強会を開こう！と呼びかけに集まった勉強会として作ったスライドを今回こちらに一部共有することになりました。

タイムテーブル
20:00～21:00 本編
21:00～21:05 途中休憩
21:05～21:30 ハンズオン

Transcript

1. 第2回目 Figmaを学ぶ会
   スキルアップ委員 Director分科会 2021/10/06
   ～プロジェクトメンバー全員が幸せになるFigmaプロジェクト管理術～
   

   View Slide

2. 皆さん、
   普段お仕事で
   何のUIデザインツールを
   使ってますか？
   

   View Slide

3. 各ツールのメリット・デメリット
   出典： https://twitter.com/nkmomonzu/status/1437001682672500741
   

   View Slide

4. 出典： https://twitter.com/nkmomonzu/status/1437001682672500741
   今日はFigmaについて深堀してゆきましょう！
   各ツールのメリット・デメリット
   

   View Slide

5. 今日のゴール
   ①Figmaを仕事で使うことのメリットを知ろう。
   ②プロジェクト管理にもFigmaが使えることを知ろう。
   ③簡単なWFを作ってみよう。
   

   View Slide

6. アジェンダ
   --本編--
   ・Figmaってなに？
   ・Figmaの登場でアップデートした仕事の進め方とは？
   ・プロジェクト管理の場にもFigma
   ・基本的な操作
   ・Figmaの使える機能（プラグインなど）
   ・質問タイム
   --ハンズオン--
   ・WFを作ってみよう
   

   View Slide

7. 複数人で同時作業可能なデザインツール
   ・デザイン作業、データ共有、プロトタイプ作成、デザインシステムの運用が可能なツール
   ・デザイナーだけでなくディレクターやエンジニアも触れる機会が多い
   同じ一つの画面で
   わいわいガヤガヤ
   はなれていても
   知くにいる感じ
   チーム全員で一体感
   ＝リモートワーク環境にも最適!
   Figmaって何？
   Director
   Engineer
   Engineer
   Designer
   

   View Slide

8. 無料の「Starter」プランで、かなりの機能が使える
   料金：無料
   対象：個人、
   小規模PJT向け
   今年4月に「Starter」無料
   プランの内容が変更
   料金：有料
   （月15$/エディター）
   対象：中小企業向け
   料金：有料
   （月45$/エディター）
   対象：大企業向け
   ※料金は月額の場合
   

   View Slide

9. 無料の「Starter」プランの変更点
   ■チーム内のプロジェクトやファイルについて
   【AS IS】
   ・最大2人のエディター
   ・無制限のファイル
   ・無制限のページ
   ・最大3つのプロジェクト
   ・無制限のエディター
   ・最大3ファイル
   ・ファイルあたり最大3ページ
   ・1プロジェクトのみ
   ・チームは無制限に作成可
   【TO BE】
   https://note.com/smartcamp_design/n/n43ead06e22e2
   UP
   DAWN
   DAWN
   DAWN
   ・Draftファイルは招待不可
   （完全に個人のファイルとしての扱いに）
   ■Draftファイルについて
   【AS IS ～2021/4/21】
   ・エディターは無制限
   【TO BE 2021/4/21～】
   DAWN
   

   View Slide

10. アジェンダ
    --本編--
    ・Figmaってなに？
    ・Figmaの登場でアップデートした仕事の進め方とは？
    ・プロジェクト管理の場にもFigma
    ・基本的な操作
    ・Figmaの使える機能（プラグインなど）
    ・質問タイム
    --ハンズオン--
    ・WFを作ってみよう
    

    View Slide

11. コラボレーションでデザインしてゆく時代
    シェアなどに手間がかからないし、解決に必要
    なコトに注力できるのが、すごく便利～
    デザイナーのAさん
    エンジニアのCさん
    デザインを元にアイデアと実装を加速できるよ
    うになった！
    フィードバックを受ける手間を省けるし、シェ
    アしやすいから工数削減になってる
    ディレクターのBさん
    ①エンジニア、マネージャなど周りの人を巻き込んで進められる
    Figmaの登場でアップデートした仕事の進め方とは？
    

    View Slide

12. 変更が加わるたびに自動的にアップデート
    プロジェクトがより簡単かつ迅速に進める
    ことができるようになった！
    ▼仕様書の質をあげると同時に得
    られる効果
    ①実装時の正確さ
    ②一貫性
    ③コミュニケーションコスト削減
    Figmaで作るデザイン仕様書の書き方ひとつで仕事の質が変わる
    ▼WF ▼インタラクション
    

    View Slide

13. 今までのツール
    ②デザイン作業、デザインデータの共有、プロトタイプの作成
    がFigma１つで完結
    デザインデータ
    加工
    ・画像に書き出して資料化
    ・ツールを介する手間も
    シェア
    作成
    ・Verが変わったら
    更新が必要
    Figma
    デザインデータ
    ・URLでデザインをシェア
    ・いつでも最新が見れる
    そのままシェア！
    とにかく
    シェアが楽！
    Figmaの登場でアップデートした仕事の進め方とは？
    作成
    

    View Slide

14. Figmaなら誰でも簡単にUIデザインを作れる
    デザインツールは
    習得が大変なイメージ
    Figmaはとてもシンプル、
    直観的に使える
    似てる！
    しかも
    

    View Slide

15. 業務の効率化と同時に、コスト削減につながるので、
    国内でもかなりの企業が導入
    

    View Slide

16. ここでちょっと余談：
    Figmaの世界的シェア
    ちょっとティブレーク～♪
    

    View Slide

17. Appendix –2020年のシェア状況
    https://uxtools.co/survey-2020
    UIデザインの部
    

    View Slide

18. Appendix –2020年のシェア状況
    https://uxtools.co/survey-2020
    プロトタイピングの部
    

    View Slide

19. Appendix –2020年総合ランキング
    https://uxtools.co/survey-2020
    

    View Slide

20. 今後も世界的にシェアの拡大が
    される予感…
    ＝いつでも使える準備をしておこう！
    

    View Slide

21. アジェンダ
    --本編--
    ・Figmaってなに？
    ・Figmaの登場でアップデートした仕事の進め方とは？
    ・プロジェクト管理の場にもFigma
    ・基本的な操作
    ・Figmaの使える機能（プラグインなど）
    ・質問タイム
    --ハンズオン--
    ・WFを作ってみよう
    

    View Slide

22. 壁や迷いが生じることがつきもの…＞＜
    プロジェクト管理って、大変ですよね。
    

    View Slide

23. 不確実性をいかに乗りこなすか
    が、プロジェクト成功の秘訣！
    独自性 × 有期性 不確実性
    ＝
    1回きり
    やったことがない
    期限がある
    やってみないとわからない
    やったことがないことを計
    画・実行して、期限までに
    終わらせること
    ・プロジェクト型の業務の特徴
    

    View Slide

24. 先人たちがつくった「フレームワーク」を
    活用して、不確実性をなるべく小さくする
    ことと見える化が大事！
    

    View Slide

25. プロジェクト型業務のワークフロー
    制作のフロー
    ディレクター
    ①制作依頼がくる
    ②ヒアリング
    ③市場調査・分析
    ④提案
    ⑤デザイン制作
    ⑥システム開発
    ⑦検証
    ⑧納品（リリース）
    要件定義
    画面・仕様設計
    フロントエンド
    バックエンド
    のアウトプットも
    Figmaで作って
    シェア＆一括管理！
    課題管理リスト
    ▼主なアウトプット
    SWOT分析など
    WBS、コンセプトシート、
    カスタマジャーニーマップ
    など
    WFやインタラクション、
    プロトタイプなど
    

    View Slide

26. 現場ですぐに使える各種フレームワーク
    その1：WBS
    

    View Slide

27. 現場ですぐに使える各種フレームワーク
    その2：WorkFlow
    

    View Slide

28. 現場ですぐに使えるコンポーネント
    Tool Collection
    

    View Slide

29. とことん一元管理！
    「フレームワーク」系の資料もFigma化しよう。
    

    View Slide

30. ご紹介した各種フレームワーク by Figmaで、
    以下においています。
    自由にコピーしてご活用ください。
    随時アップデート！
    ▼Flame_works
    ～URL割愛～
    

    View Slide

31. 『ディレクションの現場からのTips』
    ～こんな風にFigma使ってます～
    ちょっとティブレーク～♪
    

    View Slide

32. Figmaを使ったディレクションの現場
    by Dir/川口
    

    View Slide

33. そうならないために、
    はじめの段階でFigmaのファイル管理の仕方を
    ルール化しておくと◎
    ・⾧期にわたるPJTだと、
    フェーズごとに人が変わったときに
    カオス状態になることも…。
    

    View Slide

34. 作成するFigmaデータのイメージ
    プロジェクトの概要や
    デザインのガイドラインなど
    デザインデータ
    プロジェクト管理
    やマーケティング系
    アーカイブ（古いデータ）
    コンポーネント
    フェーズごとのデザインデータ
    話し合って決めたアイディアや
    参考データ（いつでも立ち返れる）
    ボツになった案なども溜めておく
    プロジェクトに関わる基本情報
    主にデザイナーが管理
    Figmaのファイルの管理イメージ
    こんな感じ。
    

    View Slide

35. Figmaを使ったディレクションの現場
    by Dir/栗田さん
    

    View Slide

36. Figmaを使ったディレクションの現場
    KANBANボードを使った制作フロー
    カンバン ボードは、タスクを視覚化し、進行中の作業を制限し、効率 (またはフロー) を最大化するために設計さ
    れたアジャイル プロジェクト管理ツールです。
    運用はバックログやJIRAなどのプロジェクト管理ツールでタスクを管理するが、運用ルールや状況を視覚化して
    おくことで制作ディレクションにおいてミスや漏れを発見し、交通整備が容易になる。
    

    View Slide

37. Figmaを使ったFigma中心設計
    PPT Excel Word Figma Figma Figma
    コーディング
    デザイン制作
    WF作成
    企画書・原稿・資料
    PS Git VSCode
    リリース
    AI
    

    View Slide

38. Figmaを使ったディレクションサンプル
    PPT PPT
    Excel Excel
    

    View Slide

39. アジェンダ
    --本編--
    ・Figmaってなに？
    ・Figmaの登場でアップデートした仕事の進め方とは？
    ・プロジェクト管理の場にもFigma
    ・基本的な操作
    ・Figmaの使える機能（プラグインなど）
    ・質問タイム
    --ハンズオン--
    ・WFを作ってみよう
    

    View Slide

40. • 以下公式サイトでアカウントを取得
    • 「Try Figma for Free」をクリック
    Figma公式サイト
    https://www.figma.com/
    デスクトップアプリ
    https://www.figma.com/downloads/
    事前準備
    

    View Slide

41. • ローカル環境でライブプレビューを行えるアプリ
    Figma Mirror for iOS
    https://apps.apple.com/jp/app/figma-mirror/id1152747299
    Figma Mirror for Android
    https://play.google.com/store/apps/details?id=com.figma.mirror&hl=ja
    確認用アプリ
    以下の記事も参考になります。
    https://crestadesign.org/figma-mirror/
    

    View Slide

42. • ヘルプページ（英語版のみ）
    https://help.figma.com/hc/en-us
    わからないことがあったら
    

    View Slide

43. • Teamの中にProjectフォルダがあり、その中にファイルがある三段構造
    チーム構成
    

    View Slide

44. 操作画面はこんな感じ。
    操作画面
    

    View Slide

45. 6つのメニュー構成
    メニュー構成
    画面右下の「？」⇒keyboard shortcutsから
    以下の各種ツールのショートカット一覧が見れる
    

    View Slide

46. • 繰り返し使うUIを登録できる機能
    コンポーネント機能
    ※親のスタイルを子が継承する、親が変更されれば子に反映するが、子の変更は親に変更
    されない。
    

    View Slide

47. Constraints（コンストレインズ）機能
    • デザインの要素を親フレームの様々な側面に固定できる。
    ※下部のメニューバーには下部のConstrainsが適用
    されており、フレームの高さのサイズが変更された
    ときも下部に固定される。
    

    View Slide

48. Constraints（コンストレインズ）機能
    • デザインの要素を親フレームの様々な側面に固定できる。
    ※入力フィールドとボタンには左右のConstrainsが
    適用されており、フレームの幅のサイズが変更され
    ると、Viewportも拡張する。
    

    View Slide

49. 共有する
    • URLを伝えるだけで、制作したデザインを他の人に確認
    してもらうことができる
    Taro Yamada
    Hanako Yamada
    Ichiro Tanaka
    Jiro Tanaka
    

    View Slide

50. コメントする
    • 他の人にデザインをチェックしてもらう際に大変役立つ
    のがコメントツール
    

    View Slide

51. データを書き出す
    • データをPDFやPNGに書き出す
    

    View Slide

52. プロトタイプ化
    • プロトタイプの作成は、プロトタイプモードに切り替え
    て設定し、再生ボタンを押下 再生ボタン
    

    View Slide

53. アジェンダ
    --本編--
    ・Figmaってなに？
    ・Figmaの登場でアップデートした仕事の進め方とは？
    ・プロジェクト管理の場にもFigma
    ・基本的な操作
    ・Figmaの使える機能（プラグインなど）
    --ハンズオン--
    ・ WFを作ってみよう
    

    View Slide

54. 使えるプラグイン5選
    

    View Slide

55. Unsplash
    ダミーの画像を入れる
    • 無料で利用できる画像素材サイト
    • 100 万点以上の画像素材を商用・非商用
    問わず利用可
    https://www.figma.com/community/plugin/738454987945972471/Unsplash
    おすすめプラグイン：その①
    

    View Slide

56. Iconify
    アイコンを入れる
    https://www.figma.com/community/plugin/735098390272716381/Iconify
    • 約5万点以上のアイコンを利用可能
    • ベクターデータのため拡大も大丈夫
    おすすめプラグイン：その②
    

    View Slide

57. HTML to Figma
    URLを入力すると、そのwebページのコードを読み、自動でレイヤー
    を作成する機能
    おすすめプラグイン：その③
    https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML
    • Figmaデザインを高品質でレスポンシ
    ブなHTML、CSS、React、Vueなど
    に変換
    • スピード重視で効率よくWFを作成し
    たいときに役立つ
    

    View Slide

58. Clean Document
    自動的にFigma内のオブジェクトサイズの小数点を調整（削除）してくれる
    おすすめプラグイン：その④
    https://www.figma.com/community/plugin/767379019764649932/Clean-Document
    

    View Slide

59. Stark
    色の明度やコントラストを定量的に判断
    • Colorblind Simulation
    （色盲の方にデザインがどう見えるか）
    • Check Contrast
    （コントラストが問題ないか）
    https://www.figma.com/community/plugin/732603254453395948/Stark
    ▼Colorblind Simulation
    ▼Check Contrast
    おすすめプラグイン：その⑤
    

    View Slide

60. ・ダッシュボードの左ペイン「Community」からインストール可
    右上のメニューから
    Plugin→当該プラグインを選択
    プラグインの使い方
    

    View Slide

61. https://note.com/mc_kurita/n/nbf0c0233a750
    ・ブランチ・マージ・ワークフローで、まるでGitのように
    ファイルの更新が行える
    おすすめ機能：Branching（Beta）
    • 承認を得ないままデザインがアップ
    デートされてしまうことを解決
    • デザイナーは新しいデザインが承認さ
    れたらマージを実行、保留またはリ
    ジェクトとなればプランチを残すか削
    除を実施するだけ（まさにGit）
    栗田さんのnote記事に詳しく説明がありますので要チェックです！
    

    View Slide

62. QAタイム
    

    View Slide

63. FigmaとXDの違い
    ・機能的にそんなに変わらない。
    以下を参考にPJTに最適なツールをチョイスしよう！
    ・デザイン力なら・・・
    ・コラボレーション力なら・・・
    

    View Slide

64. まとめ
    Figmaは、
    コラボレーションすることで、
    アイデアを効率よく取り込み、
    デザインを加速するツール
    チームの中心にFigma!
    

    View Slide

65. おすすめの参考サイト
    ・「chot.design」 UI/UXデザインツール『Figma』入門
    https://chot.design/figma-beginner/
    ⇒Figmaビギナー期の自分が大変お世話になったサイト。Figmaをやる人が誰もが一度は目にしているサイトだと思う。
    ・デザインを解決するカイクン[youtube]
    https://www.youtube.com/channel/UCghPjck_LzxNMs2tI4PPYlQ
    ⇒デザイナー必見!沢山の動画がすべて無料で見れる驚きのクオリティ。有料のBONOというサービスもかなり良さそう。
    ・コロナとFigmaで劇的に加速したデザイン業務
    https://fixel.co.jp/blog/accelerate_design_by_figma/
    ⇒ちょっと古い記事だがコロナを機に、Figmaを導入しデザインプロセスが劇的に進化した過程が面白く書かれている。
    

    View Slide

66. Happy Figma!
    本編はここまで！
    ご清聴ありがとうございました。
    お時間の許す方は、引き続きハンズオンをお楽しみください。
    

    View Slide

67. タイムテーブル
    20:00～21:00 本編
    途中休憩
    ハンズオン
    ※ハンズオンは希望者のみ参加
    21:00～21:05
    21:05～21:30
    

    View Slide

68. Figmaアカウント取得のご案内
    本日は、Figmaで簡単なWFを作成するハンズオンを予定しています。
    （視聴のみでもOK）
    ハンズオンを希望する方は、Figmaの公式ページから「無料アカウント」
    を取得してください。
    取得の仕方に関して以下のページで詳しく説明していますので、ご参考ください。
    ▼Figmaのアカウント作成の手順
    https://bit.ly/3l6G5Ar
    https://www.figma.com/
    

    View Slide

69. アジェンダ
    --本編--
    ・Figmaってなに？
    ・Figmaの登場でアップデートした仕事の進め方とは？
    ・プロジェクト管理の場にもFigma
    ・基本的な操作
    ・Figmaの使える機能（プラグインなど）
    --ハンズオン--
    ・ WFを作ってみよう
    

    View Slide

70. FigmaでWFを作成してみよう！
    以下のURLにアクセスしてください。
    ～URL割愛～
    

    View Slide

71. Happy Figma!
    ハンズオンはここまで！
    ありがとうございました。
    以上にて本日のイベントは終了となります。
    アンケートのご協力をお願いします！
    

    View Slide