本記事では、Figmaでデザインをしていく上で必須の「フレーム」の使い方について解説していきます。「フレーム」は、Figmaの肝（キモ）ともいえる機能ですので、しっかり学んで使いこなしてくださいね！

ONE POINT 〜フレームって何？〜

Figmaの「フレーム」を理解するには、次の２つのイメージをもっておくとよいでしょう。ひとつめは「（photoshopなどでいうところの）アートボード」の役割、もうひとつは「フレックスボックスの親要素」のような役割です。

※フレックスボックスとは、webページのレイアウトを調整するためのCSSの機能で、要素の配置を「縦並び、横並び、中央寄せ…」などに指定することができます。Figmaのフレームでは、「オートレイアウト」という機能を用いることで、フレックスボックスのような「要素の自動整列」が可能です。

こちらが実際にフレームを使って作ったWEBサイトのイメージです。各ページ黒枠で囲った部分がフレームです（HOMEのみわかりやすいよう赤枠にしてあります）。 アートボードのようにページ全体のサイズを決めるフレームの他、各セクションの親ボックスとして、または複数の子要素をグルーピングするときの親ボックスとして使用します（※「グループ」との違いは後述します）。特に、子要素を一定の規則（縦or横or中央揃え、均等配置など）に従って配置したいときに使います。

Figmaのフレーム　〜アートボードとしての使い方〜

まずは、「デザインファイルを新規作成」からキャンバスに移動しましょう。

この辺りがよくわからない方は、こちらの記事をどうぞ！ Figma初心者向け使い方解説【複数アカウント管理＆ファイル管理】

フレームを呼び出すには、ツールバーの「フレーム」を選択します。「フレーム」が選択されていると、画面右のメニューにフレームの選択肢が現れますので、ここからデザインの外枠となるスクリーンサイズを選びます。

このとき、「スマホ」「タブレット」「デスクトップ」…などのデバイス名を選択すると、さらに「iPhone14, iPhone14Pro…」などといった細かい選択肢が展開されます。PCやスマホだけでなく「用紙（A4, A5…）」などからも選択できますよ！

こういったフレームは、ひとつのキャンバスにいくつでも作成することができます。また、フレームを削除するときは、削除したいフレームが選択された状態で（選択されているフレームは青枠で表示されます）「delete」キーを押します。

フレームに名前つける

作成したフレームには、名前を付けることができます。キャンバス上またはレイヤーパネルで、デフォルトのフレーム名をダブルクリックすると、文字を入力できるようになります。「HOME」「ABOUT」「CONTACT」…など、名前をつけてコンテンツを整理しましょう。

フレームのサイズ変更

フレームのサイズ変更にはいくつかの方法があります。

その１「フレーム」の選択肢から変更 サイズ変更したいフレームを選択し、画面右の「デザイン」タブの「フレーム」から、先程のようなフレームの選択肢を呼び出します。この中から変更したいサイズをクリックすればOKです。

その２「フレーム」の数値から変更 サイズを変更したいフレームを選択し、画面右のW（wide=幅）、H（Hight=高さ）の数値を入力します。

その３「フレーム」をドラッグして変更 フレームの各辺（上・下・左・右）にカーソルを合わせると、矢印（「⇔」）が現れます。この状態で、その辺を引っ張る（ドラッグする）と、その方向にフレームが拡大or縮小します。

デザインをしていてフレームの長さが足りなくなってしまった場合は、「その２」または「その３」を活用しましょう！

Figmaのフレーム　〜オートレイアウトの使い方〜

Figmaのフレームには、アートボードのようなサイト全体のサイズを定義する使い方の他に、ある子要素に対する親要素（親ボックス）としての使い方があります。※フレームの中にフレームを入れる（ネストする）こともできます。

フレームが本領を発揮するのは、ある要素の「親ボックス」として「オートレイアウト」を適用するときだといえます。

…というわけで早速、オートレイアウトとはどのような機能か見てみましょう！

まず、適当なサイズのフレームを用意し、中に要素（今回は図形３つ）を加えます。そして、３つの図形の親ボックスであるフレームを選択し、画面右の「オートレイアウト」をクリックしてみましょう。

適当に並べた３つの図形が一瞬で整列しましたね！…同時に、「オートレイアウト」のメニューが現れました。ここでレイアウトの詳しい設定をしていきます。 ※オートレイアウトは「中の要素をどのように並べるか」を決めるためのものです。ですので、設定したいときは、並べられる側の子要素ではなく、それらの親要素を選択しましょう。

オートレイアウト　〜縦並べ・横並べの設定〜

中の要素を縦に並べたい時は「オートレイアウトメニュー」で「↓」アイコンを選択します。また、横に並べたい時は「➞」アイコンを選択します。

オートレイアウト　〜要素の配置の設定〜

「オートレイアウトメニュー」内のパネルでは、親ボックスのどの位置に子要素を配置するかを設定します。以下に、例として「中央」および「中央上」を設定した場合を示しました。

オートレイアウト　〜要素間の間隔の設定〜

次は、要素間の間隔を設定してみましょう。これには、「オートレイアウトメニュー」内の要素間隔を表す数値を入力する方法と、キャンバス上で矢印をドラッグすることで間隔を伸縮させる方法があります。

また、「オートレイアウトメニュー」内の「・・・」アイコンからさらに詳細メニューを展開し、要素を「詰めて配置」するか「間隔を空けて配置」するかを選択できます。

オートレイアウト　〜パディングの設定〜

「オートレイアウトメニュー」から、水平方向（「上下」）および垂直方向（「左右」）のパディングを調整することができます。なお、「上」「下」または「左」「右」のパディングを個別に設定したい場合は、「四隅が切れた四角形アイコン」から個別設定ができます。

パディングは、キャンバス上でパディング部分をドラッグすることで伸縮させることもできます。 パディングを設定する際、「フレームメニュー」の「コンテンツをハグ」を選んでおくと、設定したパディングに合わせて親ボックスのサイズが自動調整されます。便利な機能ですのでぜひ覚えておきましょう

オートレイアウト削除（解除）

オートレイアウトを削除（解除）したいときは、「オートレイアウトメニュー」の「−（マイナス）」アイコンをクリックしましょう。オートレイアウトが解除されると、子要素を再び個別に選択・移動できるようになります。

Figma フレームとグループの違い

「フレーム」と似た機能に「グループ」があります。グループもフレームも、包含する複数の子要素をまとめて移動させたり、まとめて表示/非表示の切り替えができる便利な機能です。

そして、グループとフレームは相互に変換可能です。

今、この状態でグループをフレームに変更しても、一見何も変化が起こりません。…では、グループとフレームは何が違うのでしょうか？

ONE POINT　〜グループ化の方法〜 グループ化したい要素を選択し（「Shift」キーを押しながら要素をクリックしていくことで、複数選択ができます）、「Command＋G」でグループ化できます。あるいは、「右クリック➞選択範囲のグループ化」でもOKです。

フレームの特徴

フレームの最大の特徴は、先程述べたような「オートレイアウト」が適用できることです。ただのグループには、これが適用できません。

また、フレームはグループと違って、それそのものが一つの要素です。つまり、フレームは単体（子要素を含まない状態）でも存在できます。

そして、中に子要素がある場合は、それらの「親ボックス」として機能します。親ボックスであるフレームには背景色もつけられますし、パディングなどの設定もできます。

グループの特徴

グループは、ただ単に要素をまとめたものです。

よって、フレームと違い「グループ」が単体で存在することはできません。そして、フレームのように背景色やパディングなどを設定することもできません。

この章の冒頭のように「グループからフレーム」に切り替えたときは見た目の変化がありませんでしたが、「フレームからグループ」に切り替えると、背景色やパディングの設定は消えてしまいますので、注意しましょう

また、フレームとグループでは「まとめて拡大/縮小」したときの子要素の動きも異なります。フレームでは、親要素のフレームを拡大/縮小しても、フレームそのものがサイズ変更されるだけですが、グループでは中の子要素も連動してサイズ変更されることにも注意が必要です。