Tweet
Tweet

Slide 1

Slide 1 text

© kgsi / Shinichi Kogiso 1 Getting Started with Figma チームではじめるUIデザイン さくらインターネット社内ハンズオン - 2019.11.28

Slide 2

Slide 2 text

© kgsi / Shinichi Kogiso 2 kgsi / Shinichi.kogiso Sakura Internet Inc. ・Figma歴1年未満 ・Fireworks歴5年

Slide 3

Slide 3 text

© kgsi / Shinichi Kogiso 3 昨今のデザインツール事情

Slide 4

Slide 4 text

© kgsi / Shinichi Kogiso 4

Slide 5

Slide 5 text

© kgsi / Shinichi Kogiso 5 ・どのツールも現状ソフトウェア単体で完結しにくい ・一人で開発することを念頭に設計されている* *SketchはSketch for Teamsで実装予定、XDはコラボレーション機能が11月のUpdateで搭載済 ・OSが限定されるアプリもある

Slide 6

Slide 6 text

© kgsi / Shinichi Kogiso 6 Figmaとは？

Slide 7

Slide 7 text

© kgsi / Shinichi Kogiso 7 Figmaとは？

Slide 8

Slide 8 text

© kgsi / Shinichi Kogiso 8 “Where teams Design together” チームのためのデザインツール

Slide 9

Slide 9 text

© kgsi / Shinichi Kogiso 9

Slide 10

Slide 10 text

© 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

Slide 11

Slide 11 text

© kgsi / Shinichi Kogiso 11 ・Webブラウザベース（ネイティブアプリもある） ・Win/Macで利用可能 大まかな特徴 ・ワイヤーフレーム、プロトタイピング、開発者向け機能... 　 外部ツールが不要 ・個人利用は基本無料でとっつきやすい* *Starter Plan https://www.figma.com/pricing/

Slide 12

Slide 12 text

© kgsi / Shinichi Kogiso 12 ・チーム単位でのプロジェクト管理 ・強力なチームライブラリ・コンポーネント機能 チームのための機能 ・バージョン管理 ・コラボレーション機能 ・豊富で開発しやすいプラグイン

Slide 13

Slide 13 text

© 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 などなど...

Slide 14

Slide 14 text

© kgsi / Shinichi Kogiso 14 ・チーム開発の機能が揃っているので、チーム開発が唸る Good ・Pluginが開発しやすい、エンジニアとも連携しやすい ・機能を標準網羅しているので高速に開発できる ・Webベースが故のパフォーマンス問題 Bad ・オフライン環境では使いにくい

Slide 15

Slide 15 text

© kgsi / Shinichi Kogiso 15 ハンズオンタイム

Slide 16

Slide 16 text

© kgsi / Shinichi Kogiso 16 1. 簡単な操作説明 2. コンポーネント作成 3. プロトタイプを作成 4. 開発者向け機能 5. チームでの作業（実践）

Slide 17

Slide 17 text

© kgsi / Shinichi Kogiso 17 質問タイム

Slide 18

Slide 18 text

© kgsi / Shinichi Kogiso 18 まとめ

Slide 19

Slide 19 text

© kgsi / Shinichi Kogiso 19 チームのためのデザインツール ・Figmaは ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき