lt37

1.
GIG社内勉強会
Figma UIキットを活用して
デザインを楽しもう
2020年2月19日(水)

2. 社内勉強会の主旨
従業員のスキルアップ・ノウハウの共有
✕
社外ブランディング
皆さんのスキルアップが目的なので、どんどん質問して吸収しましょう！

3. 本日のアジェンダ
▼基礎編 10分
Figma UI kit 10選
▼実践編 30分
実際にUIキットを使ってデザインしてみよう
▼レビュー 10分
私がレビューします
▼質疑応答 10分
私へのQ&A

4. はじめに
・UIキットはデザインシステムとは異なる
・GIGのWEB受託に使えるものは今のところない
・使う際は作りたいものに合ったキットを選ぶ

5. Figma UI kit 8選
基礎編

6. Figma UIキット紹介 1.
SaaS CRM UI Kit
ダッシュボードのUI
グラフやステータスが明確に定義されている
ミニマルだからこそ理解しやすく使いやすい？
https://00m.in/kThYH Figmaファイル：
PC

7. Figma UIキット紹介 2.
GOGE AFRICA UI KIT
WEBのPCのUIキット
いろんな用途のページが有りモダンさもある
コーポレート、サービスサイト一番使えそう
https://00m.in/W7rBT Figmaファイル：
PC

8. Figma UIキット紹介 3.
e-Wallet Figma app template
かわいいトンマナの電子ウォレットUI
ポップカラーリング
イラストがかわいい
https://00m.in/cBEtS Figmaファイル：
モバイルアプリ

9. Figma UIキット紹介 4.
Hotelify - Hotel Booking App
宿泊施設予約システムのUIキット
https://00m.in/S1zDy Figmaファイル：
モバイルアプリ

10. Figma UIキット紹介 5.
to-do-app-concept
TO DO リストのUI
モバイル
https://00m.in/C3NHe Figmaファイル：

11. Figma UIキット紹介 6.
Onboarding APP UI
カメラのUIやオンボーディング、一覧のUI等最新のIOSのUIのよ
うなデザインで
モバイル
https://www.figma.com/file/rVqQ8noFFMazeL8SipSMEE/Atro-
Mobile-UI-kit?node-id=0%3A1 Figmaファイル：
アプリ

12. Figma UIキット紹介 7.
Grada
by Vareo
グラデーションを用いたイケてる感あふれるUIキット。
モダンな表現。
多様なコンポーネントがそろっている。
コーポレートサイト用のコンポーネントもある。
ダーク・ライトモード対応のクールなトンマナ。
https://00m.in/FJVwN Figmaファイル：
デスクトップ モバイル アプリ

13. Figma UIキット紹介 8.
Dashboard user interface
by uixNinja
ダッシュボードのUIキット。
ダークUIで質感を感じられるニューモーフィズムという
デザイン手法。
個人的にニューモーフィズムでのアプリデザインは
めっちゃやってみたい
デスクトップ モバイル
https://00m.in/j15cL Figmaファイル：
アプリ

14. UIキットを使って勤怠管理システムの
打刻画面のUIをデザインしてみよう
実践編

15. 実践編
お題
以下の要素を入れてUIデザインを作ってください
【サイトID】
【ナビゲーション】
【ページタイトル】
【構成要素】
「勤怠システム」ロゴを使用
打刻、出勤簿、申請、設定
打刻
・現在時刻の表示(19:00)
・ステータス(勤務中)
・打刻ボタン
・夜勤モードを選択できる
・打刻グループの選択ができる(プルダウン)
・備考の自由入力ができる

16. 実践編 Figmaの準備
下記にアクセス
https://00m.in/c1OL9
iPhone8サイズのアートボードを選んでください。
UIキットは各ページのURLからfigmaページに飛んでコピペ。
figmaの使い方でわからないことがあれば私まで質問してください。