デザインツールであるFigmaの「基本的な概念」や「利用頻度の高い操作」について取り上げます。「Layerをまとめる方法」や「オブジェクトの整列方法」など図を交えて紹介します。
(動作確認はMacで行っています。)
デザインファイル内のデータ構造
Figmaのファイルでは、以下のような概念でデザインデータを管理しています。

下記のようにデータを分割・集約して管理しています。
- Page1
- Frame
- Group1
- Group2
- Frame1
- Frame2
- Frame
- Page2
- Page3
Page
は、以下の用途などで活用できます。
- プラットフォームごとのデザインを分割する
- ComponentsやStylesを別途管理する
Group
Frame
など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
を選択するとオブジェクトに青丸が表示されます。青丸をクリックして遷移するフレームを紐付けます。
動作確認

▷ボタン
をクリックします。

クリックすることで設定した遷移先フレームに切り替わりました。