基本的な使い方(データ構造, レイヤーのまとめかた, オブジェクトの整列)

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

デザインファイル内のデータ構造

Figmaのファイルでは、以下のような概念でデザインデータを管理しています。

748-figma-how-to-use_00.png
下記のようにデータを分割・集約して管理しています。
  • Page1
    • Frame
      • Group1
      • Group2
      • Frame1
      • Frame2
  • Page2
  • Page3

Page は、以下の用途などで活用できます。

  • プラットフォームごとのデザインを分割する
  • ComponentsやStylesを別途管理する

Group Frame など Layer をまとめる仕組みが用意されています。

効率よく利用するための準備

Layout Grid

748-figma-how-to-use_30.png

Layout Gridを利用すると、FrameにGridを表示することができます。Gridを表示することでオブジェクトを正確に配置しやすくなります。

移動幅調整(Nudge Amount)

748-figma-how-to-use_32.gif

Nudge Amountの設定にて Shift を押しながら移動する幅を調整できます。Grid幅に合わせると作業しやすくなります。

748-figma-how-to-use_31.png

Nudge Amountの設定画面は Preferences - Nudge Amount から開けます。

よく使う操作

拡大・縮小

command + + で拡大します。 command + - で縮小します。

距離測定

748-figma-how-to-use_12.gif

Layerを選択して optionをクリックすると距離が表示されます。カーソル位置によって測定される箇所が変わります。

複数オブジェクト選択

shift を押しながら別オブジェクトをクリックすることで、複数オブジェクトを選択できます。

Layer直接選択

748-figma-how-to-use_13.gif

見えている箇所をクリックしてもFrameが選択されます。中のLayerを直接選択したい場合、commandを押しながらクリックします。

複製

748-figma-how-to-use_14.gif

以下手順で簡単に複製できます。

1. option を押しながらドラッグします。
2. command + Dで複製コピーされます。

Layerをまとめる

結合・合成(Boolean Group)

748-figma-how-to-use_40_booleangroup.gif

複数Layerを選択すると上部メニューに Boolean Group のメニューが表示されます。Boolean Operation でLayerをまとめることができます。

Groupの作成
( command + G )

748-figma-how-to-use_41_group.gif
複数Layerを選択後、command + Gでグループ化できます。

Frameの作成
( command + option + G )

748-figma-how-to-use_42_frame.gif
複数Layerを選択後、command + option + GでFrame化できます。
748-figma-how-to-use_43_frame.gif

Frameの枠からはみ出た部分を非表示にできるなど、Groupより高機能です。

Group, Frameの解除
( command + shift + G )

Group、Frame両方とも command + shift + G で元に戻せます。

オブジェクトの整列

748-figma-how-to-use_50.gif

Distribute Horizontal Spacingで水平方向のスペースが等間隔になるように整列後、Align Vertical Centersで垂直方向を中心に揃えるようにしています。

プロトタイプ機能でページ遷移

遷移設定

748-figma-how-to-use_60.gif

プロパティパネルのprototypeを選択するとオブジェクトに青丸が表示されます。青丸をクリックして遷移するフレームを紐付けます。

動作確認

748-figma-how-to-use_61.png

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

748-figma-how-to-use_62.gif

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