Figmaを使ってみる会

Figmaをまだ使ったことがない、または使ってみたいと思ってる方を対象に、UIデザイン／プロトタイピングツール Figmaの勉強会を行いました。珍しくツールの紹介です。実務でFigmaをどのように使っているかの紹介も交えつつ、実際にFigmaを触って学びました。

Figmaとは？

ツールが無かった時代はグラフィックツールを使っていました。

プロトタイプツール戦国時代かも？カッコ内の数字は使い始めたり、見かけるようになった大まかな年です。他にもOrigami（2013〜）とかもありました。そしてFigma、XDと続いてくよ。

UIデザインツール&プロトタイピングツール
エンジニアに好まれてる？開発会社でよく使われてる印象
ブラウザでも使える、スタンドアロンアプリもある
作ったUIを実機で確認できる（Figmaアプリを入れる必要がある）
- これまではMirror機能しかなかったが、編集ファイルを見ることもできるようになった
- USBやWifiでつないでなくても使えるようになった（外で人に見せることができる）
かんたんなグラフィックなら作れる（AIほど高機能ではない）
- AIとの連携がしやすい
- 基本SVGなので、コピペでやり取りできる
プロトタイプを作れる
チームで共有可能
コミュニティがある
- 人のファイルが見れる（学習しやすい）
- プラグインが充実
- 自分でも作れる
UI以外でも使える
- 軽い（画像貼りすぎると重くなる）
- 授業のスライドとか

実際にちょっと触ってみましょうの時間（キャプチャ摂り忘れました…）

どういうときに使うかとか、どんなふうにして使うかとか、メリット・デメリットについて

いつ使う？以下のすべての工程で使ってる
1. ワイヤーフレーム
2. カンプ（モックアップ）
3. プロトタイプ
4. プロトタイピング
メリット
- フレームレベルでリンクを共有できる
- コメントが便利
- ブラウザ上で動く
- クライドに保存されている（PCの容量気にしないですむ）
デメリット
- DTPはできない
- 日本語じゃない（日本語化する方法があるっぽい）
- 保存形式が限定されている（コピペ前提）
- 画像のレタッチや合成ができない（）
💡 補足
- DTPに使うにはカラーマネジメントが貧弱（sRGBだけ）
- XDはカラーマネジメント自体がないのでアウト </aside>

実際使ってみて、AIとかPSと違うとことか、気をつけたほうがいいとことか、ここが難しい！ところについて。

フレームとグループがAIと違う（概念がちがうよね）
イラレのほうがムズいかも
- Figmaのほうが特化している分わかりやすい&使いやすい
すべて英語なので調べながらやってる
プラグインまだ使えてない
難しいところ
- フレームとグループの関係の理解
- 画像の扱い、難しいと言うよりは手間がかかる？
- プロトタイプがまだわからない
  - 順番に気をつけないと…
気をつけたほうが良いこと
- 広い画面なので、画面上の（オブジェクトの）整理をしっかりやらないとわからなくなる
レイヤーネームを定期的に付け直ししよう。特にフレーム