2020/04/19

学んだこと

UI/UXデザインツール『Figma』入門

https://chot.design/figma-beginner/ee5072822846/

 1-1. Figmaの概要

わかったこと

  • Figmaは2016年9月に正式リリースされたUIデザインツール
  • デスクトップアプリケーションだけでなく、ブラウザでもデザイン作成ができるところが革新的だった
  • WindowsMacLinuxなどいろいろなOSに対応している
  • リアルタイムでコラボレーションできるデザインツールとして人気
  • インターフェースはすべて英語
  • インストールや初期設定をしていなくても共有されたデザインがみれる
  • シンボル機能=繰り返し使うパーツはグループ化して一括管理できる
  • 管理しやすさは Figma<Sketch(ただFigmaはその分柔軟)
  • ライブラリ機能=共通のパーツを一つのファイルで一括管理できる(チーム開発に便利!)
  • デザインファイルに直接コメントができる
  • バージョン管理もできる
  • CSSなどを表示するコードモードもある
  • 職種に縛られずプロダクト開発に関わる全員が使うことができるツール
  • Photoshop=画像編集に特化
  • Illustratorベクター編集に特化
  • Sketch=機能は似ているが、現在MacOSでしか使えない
  • AdobeXD=Adobe製品との連携が強い
  • Figma=共有・同時編集が強い

 1-2. 初期設定とインストール

わかったこと

  • Figma利用にはアカウントが必要
  • ほとんどの機能は無料でも利用できる
  • Figmaは日本のユーザーがまだ少ない
  • デフォルトではNotosansの和文フォントのみ対応
  • それ以外を利用するには使用PCのフォントファイルだを読み込む必要がある
  • Account Setting>Fonts>Download installer to enable local fonts
  • ブラウザ上では機能に制限がある

わからなかったこと、困ったこと

  • ブラウザ上での制限ってなんなんだろ(今度調べましょう)

1-3. Figmaの初回フィル起動時チュートリアルの解説

わかったこと

  • チュートリアルで以下の紹介がある
    - Constraints(制約)
    可変レイアウト時にレイヤーがどのようなサイズに変化するかあらかじめ決めておくことができる(デバイスのサイズがたくさんあるプロダクトでは時間短縮になる)
    - Vector Networks(ベクターネットワーク)
    Figmaではベクターをドローイングするための「Vector Networks」と呼ばれる独自の手法がある(ベクターのオブジェクトをより柔軟で編集しやすい構造にしたもの)
    - Comments(コメント)
    デザイン上に直接だれでもコメントを残せる
    - Sharing and Permissions(共有と権限)
    チームメイト、クライアント、ステークホルダーなど共有相手に応じて権限を使い分けることができる(※権限によっては料金が発生する)
    - Multiplayer(マルチプレイヤー
    複数人数と同時作業が可能。コンフリクトをマージする必要もなし。
    - Team Library(チームライブラリ)
    コンポーネントやスタイルをまとめて一つのファイルにして、チームメイトに公開(現在、有料版のみの機能)
    - Export(書き出し)
    PNGJPEGSVG、PDFで書き出しができる
    - Live Device Preview(実機プレビュー)
    Figma Mirror」というアプリを段ロードすることで実機プレビューができる。(デザインを変更すると即時反映)

1-4. Figmaの料金プランと権限管理の説明

わかったこと

  • Figmaにはプランが3つある
    -Starter
    ・個人向けプラン
    ・無料
    ・編集者2名まで招待できる
    ・プロジェクトは3つまで
    ・履歴保存は30日前まで
    ・ファイル容量の上限はなし
    -Professional
    ・チーム向けプラン
    ・有料
    ・編集者の人数制限は無し
    ・自分含めた編集者の人数分料金が発生する
    ・プロジェクト数上限無し
    ・全履歴の保存
    ・プライベートプロジェクト(チーム内に招待された人のみ開示)
    ・チームライブラリが作れる
    ・Slack連携可能
    -Organization
    ・チーム向けプラン
    ・有料
    ・セキュリティを強化したもの
  • チーム構成によって選ぶべきプランが決まってくる
  • 権限が2種類ある
    -Viewer(閲覧者)
    コメントのみ可能
    -Editor(編集者)
  • チームごとに料金が発生する
  • 1チームにつき、支払いを行えるのは1ユーザーのみ
  • 権限付与は簡単にできてしまうので注意

1-5. Figmaのファイル管理とSketchファイルのインポート方法

わかったこと

  • 他のデザインツールと違いファイルをクラウドに保存する
  • ネットにつながっていればすぐ上書き保存される
  • オフラインで保存できてない場合はファイル名に白い●が表示される
  • 「.fig」ファイルとして一時的にローカルに保存もできる
  • shift+⌘+Sでローカルに保存できる
  • 拡張子は「.fig」(Figmaでしか開かない)
  • Figmaのファイル管理はファイルブラウザと呼ばれるダッシュボードで行っている
  • Recent=最近開いたファイル(50個が上限)
  • Draft=下書き(Recentから新規作成した場合は自動的にDraftに格納される)
  • Delete Files=ゴミ箱
  • チームの中にファイルを束ねる「プロジェクト」を作成することができる
  • プロジェクト内にはファイルをいくつでも置ける
  • プロジェクトごとに共有もできる(その場合相手は中の全てのファイルにアクセスできる)
  • Editorができること
    名前やデザイン、他の人の権限変更や削除含めほぼすべての機能が使える(オーナーをプロジェクトから退出されることだけはできない)
  • Viewerができること
    コメント機能は使える。他のユーザーに共有もできる(共有相手に編集権限は付与できない)
  • Skecthファイルはドラック&ドロップするとインポートできる

本日の感想

  • なんとなくわかったつもりでいたところを改めて知るのはめちゃくちゃ大事…