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

by kurita

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

無料の「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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

• ローカル環境でライブプレビューを行えるアプリ 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/

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

使えるプラグイン5選

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

QAタイム

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

おすすめの参考サイト・「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を導入しデザインプロセスが劇的に進化した過程が面白く書かれている。

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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