デザイナーのM です。
私はstakに入るまでFigmaをほぼ使用したことがありませんでした。
前職ではAdobe IllustratorでWebもDTPもまとめて作成していました。
まだ入社して2ヶ月ほどですが、業務の中で感じたIllustratorからFigmaへの移行でつまずくポイントについて書いてみようと思います。
オートレイアウト機能
IllustratorとFigmaで一番違う部分です。
IllustratorはDTPに特化しているのに対し、FigmaはWeb制作に特化しているため、コーディング前提のデザインが得意です。
オートレイアウトはグループやフレームに追加できる機能で、子要素のオブジェクトを整列、整形する機能があります。
オートレイアウトの細かい機能は沢山あるので今回は割愛しますが、その後のコーディング作業に関わってくる部分になります。
そのため、チームの他のメンバーが見てもわかりやすい、作業しやすいデータにするためにオートレイアウトの活用は必須になってきます。
（私はコーダーの方に指摘されて気がつきました。）
画像の取り扱い方
一番理解するまでに時間のかかったところです。
Illustratorでデザイン制作を行う場合、画像を配置し、希望のサイズの図形を重ねてクリッピングマスクでトリミングをすることが一般的だと思います。
私は最初Figmaでもマスク機能で作業していましたが、めちゃめちゃ使いにくい・・・！
グループ解除してもマスク効果が残ってるし、解除方法がよくわからない、マスクの重ね順がIllustratorと逆なのでマスク範囲がわかりにくい・・・
図形の塗り（Fill）でコントロールする
作業をしていくうちに、Figmaで画像のトリミングを行うときは、マスクでコントロールするより図形の塗り（Fill）で画像を指定した方が管理しやすいことに気がつきました。
- 任意のサイズで図形を作る
- Fillをダブルクリックし、タブを開く
- imageに設定を変更し、画像を指定する
- 画像の貼り付け方を変える
4の画像の貼り付け方ですが、Fill、Fit、Crop、Tileの４種類があります。
Fill
図形の長辺に合わせてサイズを自動調整する（全面表示）
Fit
図形の短辺に合わせてサイズを自動調整する（画像の全体を表示）
Crop
Illustratorのクリッピングマスク機能に一番近く、拡大縮小で調整するので感覚的に操作できます。
図形のサイズも変更できるので選択を間違えないように注意が必要です。
Tile
任意のサイズでタイルのように画像を敷き詰めます。
テクスチャを貼る時に使えるかも？
最後に
FigmaはWeb制作やアプリ制作に特化したアプリなので、Illustratorより論理的に制作することで作業効率が上がるアプリだと感じました。
DTPデザイナーからWebに移行する方や、コーディングの基礎知識のないデザイナーでも、
HTMLやCSSの基礎知識を入れておくとFigmaの基礎原理がわかって使いやすくなると思います。
