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

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

kgsi
November 28, 2019

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

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

kgsi

November 28, 2019
Tweet

More Decks by kgsi

Other Decks in Design

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 5 ・どのツールも現状ソフトウェア単体で完結しにくい ・一人で開発することを念頭に設計されている* *SketchはSketch for

    Teamsで実装予定、XDはコラボレーション機能が11月のUpdateで搭載済 ・OSが限定されるアプリもある
  4. © kgsi / Shinichi Kogiso 8 “Where teams Design together”

    チームのためのデザインツール
  5. © 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
  6. © 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 などなど...
  7. © kgsi / Shinichi Kogiso 16 1. 簡単な操作説明 2. コンポーネント作成

    3. プロトタイプを作成 4. 開発者向け機能 5. チームでの作業(実践)