Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

381ea09c5a26fb7d63ddfc3ccb1d746b?s=47 kgsi
November 28, 2019

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

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

381ea09c5a26fb7d63ddfc3ccb1d746b?s=128

kgsi

November 28, 2019
Tweet

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