Figma で自動レイアウトを使用する方法

2023/08/23

自動レイアウトは、すべてのデザイナーと Figma ユーザーにとって不可欠なツールです。この機能を使用すると、フレームやオブジェクトのサイズ変更や位置変更などの変更を行うことができます。自動レイアウトを使用すると、たとえば自動設定で要素の高さと重さを調整できるため、作業が半分になります。

画面サイズはユーザーが Web サイトへのアクセスに使用するデバイスやブラウザーに基づいて変化するため、自動レイアウトではフレーム内の要素がそれらの変化に合わせて調整されます。これにより、レイアウトと構造がより正確になり、相乗効果を発揮します。Figma での自動レイアウトの使用方法とその機能については、以下をお読みください。

自動レイアウトの使用

自動レイアウトとそのすべての機能を使用するには、まず作業中のフレームに自動レイアウトを追加する必要があります。これは、新しいフレームでも、コンテンツ、オブジェクト、コンポーネントを含むフレームでもかまいません。フレームまたはオブジェクトを選択した後、それに自動レイアウトを追加する方法は次のとおりです。

キーボードの「Alt + A」を押します (Mac および Windows で動作します)。
オブジェクトまたはコンポーネントを右クリックし、[自動レイアウト] をクリックします (一括で行うことは不可能なので、この機能を各コンポーネントに追加する必要があります)。
Figma のメニューで「自動レイアウト」オプションの横にあるプラスアイコンをタップします。

フレームに自動レイアウトを追加するだけでなく、フレームの積み重ねから、オブジェクトの複製、配置、削除まで、さまざまなことができます。

オブジェクトの追加と削除

フレームにオブジェクトを追加するのは非常に簡単です。追加したいオブジェクトをつかみ、インジケーターに従うだけです。削除する場合は、ドラッグして元に戻し、削除を押します。親フレームよりも大きなオブジェクトを追加する場合は、Figma のデフォルト設定を回避する必要があります。これを行うには、Windows の場合は「Ctrl」ボタン、Mac の場合は「Command」ボタンを押します。

オブジェクトの複製

2 つ以上の同一のオブジェクトをフレームに追加する場合は、それらを複製できます。これは便利な自動レイヤー機能です。これを行う方法は次のとおりです。

複製したいオブジェクトをタップします。
Windows を使用している場合は、「Ctrl」ボタンと「D」ボタンを同時に押し続けます。
Macの場合は「Command」ボタンと「D」ボタンを押しながら複製します。

オブジェクトの配置

フレームの外観や、フレーム内のオブジェクトやコンポーネントの構成が気に入らない場合は、それらを再配置できます。2 つのレイヤーを結合した場合は、Windows の場合は「Ctrl」、Mac の場合は「Command」を押して、Figma のデフォルト設定をバイパスして、詳細選択オプションにアクセスし、最初のレイヤーからコンポーネントを移動する必要があります。ただし、1 フレームの場合は、オブジェクトを追加する場合と同様に、オブジェクトを選択して別の場所に移動するか、矢印キーを使用することができます。

自動レイアウトレベル

自動レイアウトのもう 1 つの機能は、より多くのフレームを 1 つに結合して、ボタンとボタンの行、投稿、タイムラインなどのさまざまな自動レイアウトレベルをオーバーレイできる、より複雑なインターフェイスを作成することです。各レベルで、フレームにさらにオブジェクトを追加できます。ボタンとボタン行のレベルは水平ですが、投稿は説明や画像などを入力できる垂直のレイヤーです。

2 つのフレームをスタックすると、それらはマージされ、親フレームのプロパティが得られます。これにより、ユーザーは調整可能なオブジェクトを実装できるようになります。1 つを掴んで別のフレームに置くと、2 つのフレームを結合できます。これを行うには、次のことを行う必要があります。

フレームを 1 つ選択し、そこに追加したいものをすべて選択します。
「Shift + A」を押して自動レイアウトフレームを追加します。

自動レイアウト機能

Figma の自動レイアウトオプションには、方向や重ね順から間隔、サイズ変更、整列に至るまで、多くの貴重なプロパティや機能があります。このセクションでは、これらの各機能について詳しく説明します。

方向

名前が示すように、方向とはフレーム内のオブジェクトの順序を指します。自動レイアウトを使用する場合、オブジェクトを配置できます。

垂直 – オブジェクトは Y 軸上に配置されます。このオプションは、リスト、メニュー、ニュースフィードなどに適しています。
水平方向 – X 軸上のオブジェクトとコンポーネント (ボタン、アイコンなど)。
折り返し位置 – オブジェクトは複数の列と行に設定されます。

積み重ね順序

フレームに最適な積み重ね順序を選択できます。積み重ね順序は同じままであるため、これは視覚的な変更のみです (1、2、3 の場合は 1、2、3 のままですが、視覚的に調整されます)。オブジェクトを積み重ねる場合、どれを一番上に置くかを選択できます。たとえば、3 つのものに 1、2、3 のマークが付いている場合、1 または 3 のいずれかを選択できます。これを行う方法は次のとおりです。

自動レイアウトフレームを選択します。
画面の右側にある「自動レイアウト」オプションに移動します。
3 つの水平ドットをタップして詳細オプションを開きます。
「キャンバススタッキング」オプションを見つけます。
「最初が一番上」または「最後が一番上」を選択します。

絶対位置

もう 1 つの「レイヤーフロー」プロパティは、積み重ね順序や方向とは別に、絶対位置です。この機能を使用すると、フレームの境界を無視して、オブジェクトを任意の場所に配置できます。有効にする方法は次のとおりです。

オブジェクトをつかんでフレーム内に置きます。
右側のメニューで、「X」と「Y」の値の横にある、内側にプラスが付いた角のない正方形に似たアイコンをタップします。
枠線に沿ってオブジェクトを移動します。

ギャップ設定

ギャップなどの間隔に関して調整できる機能がいくつかあります。ギャップを変更するには 2 つの方法があります。自動で行う方法と、特定のギャップを入力する方法です。ギャップをできるだけ大きくしたい場合は、自動レイアウトメニューで自動設定を選択する必要があります。ただし、値を入力する場合は、割り当てられたボックス内に値を入力してください。

また、ギャップ設定は全方向に設定可能です。アイコンが水平と垂直のみの場合は、アイコン間の水平方向の間隔を選択できます。ただし、ラップ位置にある場合は、垂直および水平のギャップ設定を調整できます。

アライメント設定

方向、パディング、およびギャップ機能を設定した後、この機能は間隔設定に依存するため、フレーム内の子オブジェクトの位置合わせを調整できます。各オブジェクトの配置を変更することはできませんが、自動レイアウトのメニューで提供されるパターンを選択します。メニューの 3×3 グリッドをクリックして、希望の配置を選択できます。これは、キーボードの矢印キーまたは WSAD ボタンを使用して実行できます。

さらに、ここで自動設定を選択して、行としての水平方向と垂直方向の配置を切り替えることができます。特定の値を使用すると、9 つのオプション (左上、左下、左、左右、右下など) をすべて指定できます。

メニューからこのオプションを有効にして「B」ボタンを押し続けることで、テキストの配置を調整することもできます。

サイズ変更

自動レイアウトのサイズ変更オプションには、コンテンツのハグ、コンテナの塗りつぶしオプション、幅と高さの調整、寸法など、多くの追加プロパティがあります。値を固定したい場合は自動オプションを選択できますが、可能性は制限されます。サイズ変更の場合は、値を設定することをお勧めします。

固定値を選択することも、幅と高さの最大値または最小値に設定することもできます。Hug コンテンツを使用すると、子オブジェクトに基づいてフレームのサイズを調整できます。一方、Fill Container オプションを使用すると、親フレームに応じてオブジェクトのサイズが変更されます。

自動レイアウトで独自のフレームを作成する

Figma の重要な機能の 1 つである自動レイアウトでは、フレームとその内部のオブジェクトとコンパートメントを好みに合わせて調整できます。その特性と機能は複数あるため、適切できちんとした製品を作成することができます。自動レイアウトは、Figma で作業する前にマスターしておく必要がある基本ツールです。

どの自動レイアウト機能を最もよく使用しますか? 以下のコメントセクションでお知らせください。