Figmaでアートボード（ページ）を作る方法

2024年11月23日

Adobeなどのデザインアプリでは新規ドキュメントを作成する際にサイズを指定するとそのサイズのドキュメントが作成されますが、Figmaではサイズ指定の画面が表示されません。
Figmaで新規ドキュメントを作成すると、図のようにグレーの画面が表示されるため Adobe XDやIllustratorに慣れた方、初心者の方などは、まず何をすればいいのかで戸惑ってしまいますよね。

そこでこのページではXDやIllustratorでいうところの『アートボード（ページ）』をFigmaで作成する方法を解説します。

※FigmaではいわゆるWebサイトの１ページを表す「ページ」とは別に「ページ」という機能がありますが便宜上この解説ではアートボードのことをページと併記しております。

Contents

1. Figmaではアートボードの代わりにフレームを使用する
2. フレームの作り方
3. フレームを使う利点

Figmaではアートボードの代わりにフレームを使用する

実はFigmaではアートボードという機能は採用しておらず『アートボード』の代わりに『フレーム』をという機能を使用します。

『フレーム』は文字や画像をレイアウトする際に使用するもので、Webサイト内のパーツ作成にも利用します。フレームを使うときれいに整列されたレイアウトや、修正に対応しやすいデータを作ることができます。グループ化の機能を、より高度にしたような機能です。

フレームの作り方

フレームは【フレームツール】を使用して作ります。
長方形ツールと似ているので間違えないようにしましょう。

旧UIの場合

アートボード（ページ）の用途としてフレームを作りたい場合は【フレームツール】を選択後、画面右に表示されるテンプレートからサイズを選択します。 XDでディフォルトのWebのサイズ1980×1080と同じものは【プレゼンテーション】→【スライド16:9】です。（ドキュメント上で斜めにドラッグして自由なサイズでフレームを作ることもできます。）

フレームにはグリッド機能も備わっているので、XDのアートボードと同様にグリッドを設定することもできます。グリッドの設定も細かくでき、複数のグリッドを組み合せることもできます。さらには、フレーム単位でグリッドを設定できるので、ページ内の各パーツごとにフレームを用意してグリッドを設定することもできるのでとても便利です！

個人的には、XDのように入力順で計算がおかしくなるといったことも無くなったのが良かったです。

フレームを使う利点

XDではアートボードはアートボードとして独立した機能になっており、できることも限られていました。
そのため、ページ全体に関わるようなデザインなど、場合によってはアートボードと同じサイズのオブジェクトを作るなどして対応する必要がありました。

一方、Figmaではフレームを使ってアートボード（にあたるもの）を作ります。
フレームは単にページとして利用するだけでなく、画像やテキストをきれいにレイアウトしたり、塗りや線などを設定して通常のオブジェクトと同じようにデザイン処理ができます。そのため、フレームの扱いに慣れればデザインがとても楽になります。