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プロジェクト管理術～
2. 皆さん、 普段お仕事で 何のUIデザインツールを 使ってますか？
3. 各ツールのメリット・デメリット 出典： https://twitter.com/nkmomonzu/status/1437001682672500741
4. 出典： https://twitter.com/nkmomonzu/status/1437001682672500741 今日はFigmaについて深堀してゆきましょう！ 各ツールのメリット・デメリット
5. 今日のゴール ①Figmaを仕事で使うことのメリットを知ろう。 ②プロジェクト管理にもFigmaが使えることを知ろう。 ③簡単なWFを作ってみよう。
6. アジェンダ --本編-- ・Figmaってなに？ ・Figmaの登場でアップデートした仕事の進め方とは？ ・プロジェクト管理の場にもFigma ・基本的な操作 ・Figmaの使える機能（プラグインなど） ・質問タイム --ハンズオン-- ・WFを作ってみよう
7. 複数人で同時作業可能なデザインツール ・デザイン作業、データ共有、プロトタイプ作成、デザインシステムの運用が可能なツール ・デザイナーだけでなくディレクターやエンジニアも触れる機会が多い 同じ一つの画面で わいわいガヤガヤ はなれていても 知くにいる感じ チーム全員で一体感 ＝リモートワーク環境にも最適! Figmaって何？ Director Engineer Engineer Designer
8. 無料の「Starter」プランで、かなりの機能が使える 料金：無料 対象：個人、 小規模PJT向け 今年4月に「Starter」無料 プランの内容が変更 料金：有料 （月15$/エディター） 対象：中小企業向け 料金：有料 （月45$/エディター） 対象：大企業向け ※料金は月額の場合
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
10. アジェンダ --本編-- ・Figmaってなに？ ・Figmaの登場でアップデートした仕事の進め方とは？ ・プロジェクト管理の場にもFigma ・基本的な操作 ・Figmaの使える機能（プラグインなど） ・質問タイム --ハンズオン-- ・WFを作ってみよう
11. コラボレーションでデザインしてゆく時代 シェアなどに手間がかからないし、解決に必要 なコトに注力できるのが、すごく便利～ デザイナーのAさん エンジニアのCさん デザインを元にアイデアと実装を加速できるよ うになった！ フィードバックを受ける手間を省けるし、シェ アしやすいから工数削減になってる ディレクターのBさん ①エンジニア、マネージャなど周りの人を巻き込んで進められる Figmaの登場でアップデートした仕事の進め方とは？
12. 変更が加わるたびに自動的にアップデート プロジェクトがより簡単かつ迅速に進める ことができるようになった！ ▼仕様書の質をあげると同時に得 られる効果 ①実装時の正確さ ②一貫性 ③コミュニケーションコスト削減 Figmaで作るデザイン仕様書の書き方ひとつで仕事の質が変わる ▼WF ▼インタラクション
13. 今までのツール ②デザイン作業、デザインデータの共有、プロトタイプの作成 がFigma１つで完結 デザインデータ 加工 ・画像に書き出して資料化 ・ツールを介する手間も シェア 作成 ・Verが変わったら 更新が必要 Figma デザインデータ ・URLでデザインをシェア ・いつでも最新が見れる そのままシェア！ とにかく シェアが楽！ Figmaの登場でアップデートした仕事の進め方とは？ 作成
14. Figmaなら誰でも簡単にUIデザインを作れる デザインツールは 習得が大変なイメージ Figmaはとてもシンプル、 直観的に使える 似てる！ しかも
15. 業務の効率化と同時に、コスト削減につながるので、 国内でもかなりの企業が導入
16. ここでちょっと余談： Figmaの世界的シェア ちょっとティブレーク～♪
17. Appendix –2020年のシェア状況 https://uxtools.co/survey-2020 UIデザインの部
18. Appendix –2020年のシェア状況 https://uxtools.co/survey-2020 プロトタイピングの部
19. Appendix –2020年総合ランキング https://uxtools.co/survey-2020
20. 今後も世界的にシェアの拡大が される予感… ＝いつでも使える準備をしておこう！
21. アジェンダ --本編-- ・Figmaってなに？ ・Figmaの登場でアップデートした仕事の進め方とは？ ・プロジェクト管理の場にもFigma ・基本的な操作 ・Figmaの使える機能（プラグインなど） ・質問タイム --ハンズオン-- ・WFを作ってみよう
22. 壁や迷いが生じることがつきもの…＞＜ プロジェクト管理って、大変ですよね。
23. 不確実性をいかに乗りこなすか が、プロジェクト成功の秘訣！ 独自性 × 有期性 不確実性 ＝ 1回きり やったことがない 期限がある やってみないとわからない やったことがないことを計 画・実行して、期限までに 終わらせること ・プロジェクト型の業務の特徴
24. 先人たちがつくった「フレームワーク」を 活用して、不確実性をなるべく小さくする ことと見える化が大事！
25. プロジェクト型業務のワークフロー 制作のフロー ディレクター ①制作依頼がくる ②ヒアリング ③市場調査・分析 ④提案 ⑤デザイン制作 ⑥システム開発 ⑦検証 ⑧納品（リリース） 要件定義 画面・仕様設計 フロントエンド バックエンド のアウトプットも Figmaで作って シェア＆一括管理！ 課題管理リスト ▼主なアウトプット SWOT分析など WBS、コンセプトシート、 カスタマジャーニーマップ など WFやインタラクション、 プロトタイプなど
26. 現場ですぐに使える各種フレームワーク その1：WBS
27. 現場ですぐに使える各種フレームワーク その2：WorkFlow
28. 現場ですぐに使えるコンポーネント Tool Collection
29. とことん一元管理！ 「フレームワーク」系の資料もFigma化しよう。
30. ご紹介した各種フレームワーク by Figmaで、 以下においています。 自由にコピーしてご活用ください。 随時アップデート！ ▼Flame_works ～URL割愛～
31. 『ディレクションの現場からのTips』 ～こんな風にFigma使ってます～ ちょっとティブレーク～♪
32. Figmaを使ったディレクションの現場 by Dir/川口
33. そうならないために、 はじめの段階でFigmaのファイル管理の仕方を ルール化しておくと◎ ・⾧期にわたるPJTだと、 フェーズごとに人が変わったときに カオス状態になることも…。
34. 作成するFigmaデータのイメージ プロジェクトの概要や デザインのガイドラインなど デザインデータ プロジェクト管理 やマーケティング系 アーカイブ（古いデータ） コンポーネント フェーズごとのデザインデータ 話し合って決めたアイディアや 参考データ（いつでも立ち返れる） ボツになった案なども溜めておく プロジェクトに関わる基本情報 主にデザイナーが管理 Figmaのファイルの管理イメージ こんな感じ。
35. Figmaを使ったディレクションの現場 by Dir/栗田さん
36. Figmaを使ったディレクションの現場 KANBANボードを使った制作フロー カンバン ボードは、タスクを視覚化し、進行中の作業を制限し、効率 (またはフロー) を最大化するために設計さ れたアジャイル プロジェクト管理ツールです。 運用はバックログやJIRAなどのプロジェクト管理ツールでタスクを管理するが、運用ルールや状況を視覚化して おくことで制作ディレクションにおいてミスや漏れを発見し、交通整備が容易になる。
37. Figmaを使ったFigma中心設計 PPT Excel Word Figma Figma Figma コーディング デザイン制作 WF作成 企画書・原稿・資料 PS Git VSCode リリース AI
38. Figmaを使ったディレクションサンプル PPT PPT Excel Excel
39. アジェンダ --本編-- ・Figmaってなに？ ・Figmaの登場でアップデートした仕事の進め方とは？ ・プロジェクト管理の場にもFigma ・基本的な操作 ・Figmaの使える機能（プラグインなど） ・質問タイム --ハンズオン-- ・WFを作ってみよう
40. • 以下公式サイトでアカウントを取得 • 「Try Figma for Free」をクリック Figma公式サイト https://www.figma.com/ デスクトップアプリ https://www.figma.com/downloads/ 事前準備
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/
42. • ヘルプページ（英語版のみ） https://help.figma.com/hc/en-us わからないことがあったら
43. • Teamの中にProjectフォルダがあり、その中にファイルがある三段構造 チーム構成
44. 操作画面はこんな感じ。 操作画面
45. 6つのメニュー構成 メニュー構成 画面右下の「？」⇒keyboard shortcutsから 以下の各種ツールのショートカット一覧が見れる
46. • 繰り返し使うUIを登録できる機能 コンポーネント機能 ※親のスタイルを子が継承する、親が変更されれば子に反映するが、子の変更は親に変更 されない。
47. Constraints（コンストレインズ）機能 • デザインの要素を親フレームの様々な側面に固定できる。 ※下部のメニューバーには下部のConstrainsが適用 されており、フレームの高さのサイズが変更された ときも下部に固定される。
48. Constraints（コンストレインズ）機能 • デザインの要素を親フレームの様々な側面に固定できる。 ※入力フィールドとボタンには左右のConstrainsが 適用されており、フレームの幅のサイズが変更され ると、Viewportも拡張する。
49. 共有する • URLを伝えるだけで、制作したデザインを他の人に確認 してもらうことができる Taro Yamada Hanako Yamada Ichiro Tanaka Jiro Tanaka
50. コメントする • 他の人にデザインをチェックしてもらう際に大変役立つ のがコメントツール
51. データを書き出す • データをPDFやPNGに書き出す
52. プロトタイプ化 • プロトタイプの作成は、プロトタイプモードに切り替え て設定し、再生ボタンを押下 再生ボタン
53. アジェンダ --本編-- ・Figmaってなに？ ・Figmaの登場でアップデートした仕事の進め方とは？ ・プロジェクト管理の場にもFigma ・基本的な操作 ・Figmaの使える機能（プラグインなど） --ハンズオン-- ・ WFを作ってみよう
54. 使えるプラグイン5選
55. Unsplash ダミーの画像を入れる • 無料で利用できる画像素材サイト • 100 万点以上の画像素材を商用・非商用 問わず利用可 https://www.figma.com/community/plugin/738454987945972471/Unsplash おすすめプラグイン：その①
56. Iconify アイコンを入れる https://www.figma.com/community/plugin/735098390272716381/Iconify • 約5万点以上のアイコンを利用可能 • ベクターデータのため拡大も大丈夫 おすすめプラグイン：その②
57. HTML to Figma URLを入力すると、そのwebページのコードを読み、自動でレイヤー を作成する機能 おすすめプラグイン：その③ https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML • Figmaデザインを高品質でレスポンシ ブなHTML、CSS、React、Vueなど に変換 • スピード重視で効率よくWFを作成し たいときに役立つ
58. Clean Document 自動的にFigma内のオブジェクトサイズの小数点を調整（削除）してくれる おすすめプラグイン：その④ https://www.figma.com/community/plugin/767379019764649932/Clean-Document
59. Stark 色の明度やコントラストを定量的に判断 • Colorblind Simulation （色盲の方にデザインがどう見えるか） • Check Contrast （コントラストが問題ないか） https://www.figma.com/community/plugin/732603254453395948/Stark ▼Colorblind Simulation ▼Check Contrast おすすめプラグイン：その⑤
60. ・ダッシュボードの左ペイン「Community」からインストール可 右上のメニューから Plugin→当該プラグインを選択 プラグインの使い方
61. https://note.com/mc_kurita/n/nbf0c0233a750 ・ブランチ・マージ・ワークフローで、まるでGitのように ファイルの更新が行える おすすめ機能：Branching（Beta） • 承認を得ないままデザインがアップ デートされてしまうことを解決 • デザイナーは新しいデザインが承認さ れたらマージを実行、保留またはリ ジェクトとなればプランチを残すか削 除を実施するだけ（まさにGit） 栗田さんのnote記事に詳しく説明がありますので要チェックです！
62. QAタイム
63. FigmaとXDの違い ・機能的にそんなに変わらない。 以下を参考にPJTに最適なツールをチョイスしよう！ ・デザイン力なら・・・ ・コラボレーション力なら・・・
64. まとめ Figmaは、 コラボレーションすることで、 アイデアを効率よく取り込み、 デザインを加速するツール チームの中心にFigma!
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を導入しデザインプロセスが劇的に進化した過程が面白く書かれている。
66. Happy Figma! 本編はここまで！ ご清聴ありがとうございました。 お時間の許す方は、引き続きハンズオンをお楽しみください。
67. タイムテーブル 20:00～21:00 本編 途中休憩 ハンズオン ※ハンズオンは希望者のみ参加 21:00～21:05 21:05～21:30
68. Figmaアカウント取得のご案内 本日は、Figmaで簡単なWFを作成するハンズオンを予定しています。 （視聴のみでもOK） ハンズオンを希望する方は、Figmaの公式ページから「無料アカウント」 を取得してください。 取得の仕方に関して以下のページで詳しく説明していますので、ご参考ください。 ▼Figmaのアカウント作成の手順 https://bit.ly/3l6G5Ar https://www.figma.com/
69. アジェンダ --本編-- ・Figmaってなに？ ・Figmaの登場でアップデートした仕事の進め方とは？ ・プロジェクト管理の場にもFigma ・基本的な操作 ・Figmaの使える機能（プラグインなど） --ハンズオン-- ・ WFを作ってみよう
70. FigmaでWFを作成してみよう！ 以下のURLにアクセスしてください。 ～URL割愛～
71. Happy Figma! ハンズオンはここまで！ ありがとうございました。 以上にて本日のイベントは終了となります。 アンケートのご協力をお願いします！