[Figma] 13 Figmaでのアートボードの作り方

「Figma」でアートボードを作る方法の解説です。

アートボードを作る流れ

アートボードを作るための流れは以下です。

1. フレームツールでアートボードを作る。
2. アートボードのサイズを変更する。

01. フレームツールでアートボードを作る。

アートボードを作るにはフレームツールを使います。
まずツールバーのフレームツールをクリックすると、右サイドバーの表示がフレームツールのプロパティに変わります。
デスクトップのデザインを作る場合、フレームのプリセットの中から「デスクトップ > デスクトップ」の順にクリックすると、
キャンバスにデスクトップの一般的なサイズのアートボードが作られます。

同じ手順でアートボードを複数作ることができ、同一キャンバス内でサイト内の複数ページのデザインや端末別のデザインなどを作ることができます。

02. アートボードのサイズを変更する。

プリセットにあるサイズはモニターサイズ、つまりスクロール前の初期表示のサイズです。
アートボードの横幅・高さに過不足がある場合はサイズを変更しておきましょう。

レイヤーパネルのフレームツールのアイコンがついているレイヤーはアートボードです。
まずはアートボードのレイヤー名をクリック選択して有効にします。
他のアートボードの選択もこの方法で行うことができます。

アートボードを選択した状態で、レイアウトパネルの「W:横幅」「H:高さ」のサイズ指定(数値入力)するか、
アートボードの境目の矢印カーソルを直感的にドラッグするとアートボードのサイズを変更することができます。