チームではじめるUIデザイン / Getting Started with 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は ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき