デザインツールであるFigmaの「基本的な概念」や「利用頻度の高い操作」について取り上げます。「Layerをまとめる方法」や「オブジェクトの整列方法」など図を交えて紹介します。
(動作確認はMacで行っています。)
デザインファイル内のデータ構造
Figmaのファイルでは、以下のような概念でデザインデータを管理しています。
下記のようにデータを分割・集約して管理しています。
- Page1
- Frame
- Group1
- Group2
- Frame1
- Frame2
- Frame
- Page2
- Page3
Pageは、以下の用途などで活用できます。
- プラットフォームごとのデザインを分割する
- ComponentsやStylesを別途管理する
GroupFrameなどLayerをまとめる仕組みが用意されています。
- 参考
効率よく利用するための準備
Layout Grid
Layout Gridを利用すると、FrameにGridを表示することができます。Gridを表示することでオブジェクトを正確に配置しやすくなります。
移動幅調整(Nudge Amount)
Nudge Amountの設定にて Shift を押しながら移動する幅を調整できます。Grid幅に合わせると作業しやすくなります。
Nudge Amountの設定画面は、Preferences – Nudge Amount から開けます。
よく使う操作
拡大・縮小
command + + で拡大します。 command + - で縮小します。
距離測定
Layerを選択して optionをクリックすると距離が表示されます。カーソル位置によって測定される箇所が変わります。
複数オブジェクト選択
shift を押しながら別オブジェクトをクリックすることで、複数オブジェクトを選択できます。
Layer直接選択
見えている箇所をクリックしてもFrameが選択されます。中のLayerを直接選択したい場合、commandを押しながらクリックします。
複製
以下手順で簡単に複製できます。
1. option を押しながらドラッグします。
2. command + Dで複製コピーされます。
Layerをまとめる
結合・合成(Boolean Group)
複数Layerを選択すると上部メニューに Boolean Group のメニューが表示されます。Boolean Operation でLayerをまとめることができます。
Groupの作成
( command + G )
複数Layerを選択後、command + Gでグループ化できます。
Frameの作成
( command + option + G )
複数Layerを選択後、command + option + GでFrame化できます。
Frameの枠からはみ出た部分を非表示にできるなど、Groupより高機能です。
Group, Frameの解除
( command + shift + G )
Group、Frame両方とも command + shift + G で元に戻せます。
オブジェクトの整列
Distribute Horizontal Spacingで水平方向のスペースが等間隔になるように整列後、Align Vertical Centersで垂直方向を中心に揃えるようにしています。
プロトタイプ機能でページ遷移
遷移設定
プロパティパネルのprototypeを選択するとオブジェクトに青丸が表示されます。青丸をクリックして遷移するフレームを紐付けます。
動作確認
▷ボタンをクリックします。
クリックすることで設定した遷移先フレームに切り替わりました。
