チームではじめるUIデザイン / Getting Started with Figma

Figmaハンズオン@さくらインターネット社内で使用した資料です。

Transcript

1. © kgsi / Shinichi Kogiso 1 Getting Started with Figma チームではじめるUIデザイン さくらインターネット社内ハンズオン - 2019.11.28
2. © kgsi / Shinichi Kogiso 2 kgsi / Shinichi.kogiso Sakura Internet Inc. ・Figma歴1年未満 ・Fireworks歴5年
3. © kgsi / Shinichi Kogiso 3 昨今のデザインツール事情
4. © kgsi / Shinichi Kogiso 4
5. © kgsi / Shinichi Kogiso 5 ・どのツールも現状ソフトウェア単体で完結しにくい ・一人で開発することを念頭に設計されている* *SketchはSketch for Teamsで実装予定、XDはコラボレーション機能が11月のUpdateで搭載済 ・OSが限定されるアプリもある
6. © kgsi / Shinichi Kogiso 6 Figmaとは？
7. © kgsi / Shinichi Kogiso 7 Figmaとは？
8. © kgsi / Shinichi Kogiso 8 “Where teams Design together” チームのためのデザインツール
9. © kgsi / Shinichi Kogiso 9
10. © kgsi / Shinichi Kogiso 10 Sketch Figma Adobe Photoshop Adobe XD Framer 0 200 400 600 800 1000 1200 1400 1600 1800 2000 Compare Design Tools - Uxtools.co https://uxtools.co/tools/design/ Usage
11. © kgsi / Shinichi Kogiso 11 ・Webブラウザベース（ネイティブアプリもある） ・Win/Macで利用可能 大まかな特徴 ・ワイヤーフレーム、プロトタイピング、開発者向け機能... 　 外部ツールが不要 ・個人利用は基本無料でとっつきやすい* *Starter Plan https://www.figma.com/pricing/
12. © kgsi / Shinichi Kogiso 12 ・チーム単位でのプロジェクト管理 ・強力なチームライブラリ・コンポーネント機能 チームのための機能 ・バージョン管理 ・コラボレーション機能 ・豊富で開発しやすいプラグイン
13. © kgsi / Shinichi Kogiso 13 便利なプラグイン ・A11y - Color Contrast Checker https://www.figma.com/c/plugin/733159460536249875/A11y---Color-Contrast-Checker ・Chart https://www.figma.com/c/plugin/734590934750866002/Chart ・To Path https://www.figma.com/c/plugin/751576264585242935/To-Path などなど...
14. © kgsi / Shinichi Kogiso 14 ・チーム開発の機能が揃っているので、チーム開発が唸る Good ・Pluginが開発しやすい、エンジニアとも連携しやすい ・機能を標準網羅しているので高速に開発できる ・Webベースが故のパフォーマンス問題 Bad ・オフライン環境では使いにくい
15. © kgsi / Shinichi Kogiso 15 ハンズオンタイム
16. © kgsi / Shinichi Kogiso 16 1. 簡単な操作説明 2. コンポーネント作成 3. プロトタイプを作成 4. 開発者向け機能 5. チームでの作業（実践）
17. © kgsi / Shinichi Kogiso 17 質問タイム
18. © kgsi / Shinichi Kogiso 18 まとめ
19. © kgsi / Shinichi Kogiso 19 チームのためのデザインツール ・Figmaは ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき