Figma に「アートボード」はない？ — XD 経験者のためのフレーム作成・サイズ変更・書き出しガイド

「Figma でアートボードってどうやって作るんだろう?」「XD ではアートボードだったものは Figma だと何て呼ぶの?」「アートボードのサイズ変更や書き出しのやり方が分からない」 — Adobe XD や Illustrator から Figma に移ってきた方が、最初につまずきやすいのが 「アートボード」という言葉です。

結論から言うと、Figma には正式には「アートボード」という名称がありません。XD や Illustrator で「アートボード」と呼んでいたものは、Figma では Frame（フレーム） という名前になっています。この記事では、XD 経験者の視点で、フレームの 作成・追加・サイズ変更・書き出し の手順と、混同しやすい フレーム / セクション / グループの違いまでを整理します。

XD のアートボードが Figma へ変換されるときに どうマッピングされるか（変換時の挙動）については XD アートボードを Figma フレームに変換を参照してください。本記事は Figma 側でフレームをどう作って操作するかに焦点を当てています。

📝 はじめに — 「Figma でアートボードどう作るの?」

Adobe XD、Illustrator、Photoshop — これらのツールには共通して 「アートボード」 という概念があります。1 つのファイルの中に複数の画面（カンバス）を並べて、それぞれを独立したデザイン領域として扱う仕組みです。

Figma にも同じ役割の機能がありますが、呼び名が違います。Figma ではこれを Frame（フレーム） と呼びます。そのため、XD から移ってきて「アートボード」という言葉でメニューやツールを探しても、どこにも見つからず戸惑うことになります。

この記事では、以下を XD 経験者向けに整理します。

Figma の「アートボード」= フレーム という用語の対応
フレームの作り方 — F キーとサイズプリセット
フレームの追加・サイズ変更・書き出し
フレーム / セクション / グループの違い — Figma 特有の整理単位
XD のアートボードとの違い — ネスト、Auto Layout など

🎯 そもそも Figma に「アートボード」はない

Figma の公式ドキュメントやツールバー、メニューを探しても「Artboard」「アートボード」という言葉は出てきません。Figma で画面の器にあたるのは Frame（フレーム） です。

主要ツールの用語対応

ツール	画面の器の呼び名
Adobe XD	アートボード (Artboard)
Illustrator	アートボード (Artboard)
Photoshop	アートボード (Artboard)
Sketch	フレーム (Frame) ※ 2025 年に Artboard から移行
Figma	フレーム (Frame)

フレームはアートボードより少し広い概念

Figma のフレームは、XD のアートボード（トップレベルの画面）の役割に加えて、ボタンやカードなどの部品の器としても使われます。フレームの中にフレームを入れる（ネストする）こともでき、Auto Layout や制約（Constraints）の単位にもなります。「アートボードの上位互換」とイメージすると掴みやすいです。

XD 経験者にとってまず大事なのは、「アートボード」で探すのをやめて「フレーム」で覚え直すことです。これだけで Figma 公式ヘルプやコミュニティの情報を調べたときに一気に見つけやすくなります。

🖼️ フレーム（アートボード）の作り方

フレームを作る方法はいくつかありますが、最も基本的なのはフレームツールを使う方法です。

フレームツールで作る

F キー（または A キー）を押してフレームツールを起動する
右側の Design パネルに、デバイス別のサイズプリセット（Phone / Tablet / Desktop / Social media など）が表示される
プリセットを選ぶと、そのサイズのフレームがキャンバスに配置される
プリセットを使わず、キャンバス上を ドラッグして任意サイズのフレームを描くこともできる

フレームツールのショートカットは F

Figma のフレームツールは F キーで起動します（A キーでも起動します）。XD の「アートボードツール」に相当するもので、迷ったらまず F を押す、と覚えておくと早いです。

サイズプリセットの中身

フレームツールを選ぶと、Design パネルに代表的なデバイスサイズが並びます。たとえば以下のようなカテゴリです。

Phone — iPhone / Android の各画面サイズ
Tablet — iPad 等
Desktop — 1440 / 1920 等の Web デザイン向け幅
Social media — 各 SNS の投稿サイズ
Paper — A4 等の印刷向けサイズ

XD でアートボードを新規作成するときにデバイスプリセットを選んだのと同じ感覚で使えます。

➕ フレームを追加する

1 つのページに 複数のフレームを並べて、画面遷移やバリエーションを管理できます。XD で 1 つのファイルに複数のアートボードを並べたのと同じ運用です。

フレームツール（F）を再度使って、別の場所に新しいフレームを作る
既存のフレームを選択して コピー & ペースト（Cmd/Ctrl + C → Cmd/Ctrl + V）で複製する
フレームを選択して Cmd/Ctrl + D で複製する

フレームとページの関係

Figma では、フレームの上位に ページ (Pages) という単位があります。1 ページの中に複数のフレームを置き、デザインが大きくなったらページ自体を分けて整理します。「ページ > フレーム > 中の要素」という階層で、XD の「ファイル > アートボード」よりも 1 段深い構造です。

Adobe XD のアートボードを Figma フレームへ変換 Figma Community から無料でインストール

Figma Communityから1クリックで追加できます

↔️ フレームのサイズを変更する

作成したフレームのサイズは、後からいつでも変更できます。

数値で変える

フレームを選択する
右側の Design パネルの W（幅）/ H（高さ） に数値を入力する

ピクセル単位で正確に指定したいときはこの方法が確実です。

ドラッグで変える

フレームを選択すると四隅と各辺にハンドルが表示されます。ハンドルをドラッグすると、その方向にサイズが変わります。Shift を押しながらドラッグすると縦横比を保ったままリサイズできます。

サイズプリセットから変える

フレームを選択した状態で、Design パネルのフレーム名（サイズ）部分から別のデバイスプリセットに切り替えることもできます。

中身の挙動は Constraints で決まる

フレームのサイズを変えたとき、中の要素がどう追従するかは各要素の 制約（Constraints） の設定で決まります。たとえば「右に固定」「左右に伸縮」などを設定しておくと、フレーム幅を変えてもレイアウトが崩れにくくなります。XD のレスポンシブサイズ変更に近い考え方ですが、Figma では要素ごとに Constraints を明示的に設定します。

📤 フレームを書き出す（エクスポート）

完成したフレームは、PNG や SVG、PDF などの形式で書き出せます。

書き出しの手順

書き出したいフレームを選択する
右側の Design パネルを一番下までスクロールし、Export セクションの + をクリックする
倍率（1x / 2x / 3x など）と形式（PNG / JPG / SVG / PDF）を選ぶ
Export [フレーム名] ボタンをクリックして書き出す

形式	主な用途
PNG	透過が必要な画像、UI スクリーンショット
JPG	写真など、ファイルサイズを抑えたい画像
SVG	アイコン・ロゴなどのベクター素材
PDF	印刷用、複数フレームをまとめた資料

倍率の使い分け

Web 用なら 1x、高解像度ディスプレイ向けには 2x を併用するのが一般的です。Export セクションでは + を押して複数の倍率・形式を同時に登録できるので、1x PNG と 2x PNG を一度に書き出すといった運用ができます。なお、SVG と PDF は 1x のみの対応で、倍率を変えられるのは PNG / JPG です。

🗂️ フレーム / セクション / グループの違い

Figma には、要素をまとめる単位が フレームのほかにも セクション (Section) と グループ (Group) があります。XD 経験者が混乱しやすいポイントなので、役割を整理しておきます。

単位	役割	ショートカット
フレーム (Frame)	デザインの器。クリッピング・Auto Layout・制約・書き出しの単位。XD のアートボードに相当	`F`
セクション (Section)	ページ内で複数のフレームをまとめて領域として整理する。フローや状態ごとのグルーピングに使う	`Shift + S`
グループ (Group)	複数の要素を単純にまとめるだけ。独自のサイズ枠やレイアウト機能は持たない	`Cmd/Ctrl + G`

セクションは「アートボードをまとめる箱」

セクションは、複数のフレームを 1 つの領域としてまとめて、ラベルを付けて整理できる機能です。「ログインフロー」「管理画面」のように、関連するフレーム群をまとめるのに向いています。XD には直接の対応機能がないため、最初は戸惑いやすいですが、フレーム（アートボード）が増えてきたときの整理に役立ちます。

ざっくり使い分けると、画面 1 枚 = フレーム、画面のまとまり = セクション、要素の一時的な集合 = グループ、と覚えておくと迷いません。

🔄 XD のアートボードとの違い

「アートボード = フレーム」と分かっても、両者は完全に同じではありません。XD 経験者がつまずきやすい差分を挙げておきます。

ネスト（入れ子）できる — Figma のフレームはフレームの中に入れられます。XD のアートボードはトップレベル固定でしたが、Figma では「画面の中のカード」もフレームで作るのが一般的です
Auto Layout の単位になる — フレームに Auto Layout を設定すると、中の要素が自動で整列・伸縮します。XD のスタックに近い機能で、フレームが前提になります
制約（Constraints）を持つ — フレームのリサイズ時に中の要素がどう追従するかを、要素ごとに設定できます
書き出し・コンポーネント化の単位 — フレームはそのまま書き出し対象になり、コンポーネント化の起点にもなります

XD からまとめて移行したいとき

個別にフレームを作り直すのではなく、既存の XD ファイルのアートボードをまとめて Figma フレームへ持ち込みたい場合は、変換プラグインを使う方法があります。アートボードがそのままフレームへ、各要素の構造を保ったまま移行できます。具体的な操作手順は Figma で XD ファイルを開く手順で UI クリック単位で解説しています。

❓ FAQ

Q1. Figma で「アートボード」という言葉が見つかりません

Figma に「アートボード」という名称はありません。XD や Illustrator でいうアートボードは、Figma では フレーム (Frame) です。ツールバーやメニュー、公式ヘルプを調べるときは「フレーム」で検索してください。

Q2. フレームを作るショートカットは?

F キーです（A キーでも起動します）。押すとフレームツールに切り替わり、右パネルからデバイスサイズを選ぶか、キャンバス上をドラッグして任意サイズのフレームを作れます。

Q3. フレームのサイズを後から変えるには?

フレームを選択し、右側の Design パネルの W / H に数値を入力するか、フレームの四隅・各辺のハンドルをドラッグします。中の要素の追従は各要素の 制約（Constraints） で決まります。

Q4. フレームを画像で書き出すには?

フレームを選択 → Design パネル下部の Export で + をクリック → 倍率と形式（PNG / JPG / SVG / PDF）を選んで Export ボタンを押します。複数の倍率・形式を登録して一度に書き出すこともできます。

Q5. フレームとセクションはどう使い分けますか?

フレームは画面 1 枚やデザイン部品の器で、Auto Layout や書き出しの単位になります。セクションは複数のフレームをまとめてフロー単位で整理するための上位の箱です。1 枚 1 枚はフレーム、まとまりはセクション、と考えると整理しやすくなります。

🎯 まとめ

XD から Figma に移ってきたときの「アートボードが見つからない」問題は、用語の違いを知るだけで解消します。要点を振り返ります。

Figma に「アートボード」はない — 正式名は フレーム (Frame)
フレームの作成は F キー — 右パネルのデバイスプリセット or ドラッグ
サイズ変更は W/H 入力 or ドラッグ — 中身の追従は Constraints
書き出しは Design パネル下部の Export — PNG / JPG / SVG / PDF + 倍率
フレーム / セクション / グループ — 画面 = フレーム、まとまり = セクション、一時集合 = グループ
XD との違い — フレームはネスト・Auto Layout・制約に対応した上位互換

「アートボード」を「フレーム」に読み替えるだけで、Figma の公式情報も一気に調べやすくなります。XD の資産を Figma に移したいときは、アートボードをフレームへまとめて変換できるプラグインを使うと、作り直しの手間を大きく減らせます。

Pixel Fine Converter をインストール Figma Community から無料