Figma

Figmaのオートレイアウトの基本的な使い方

最終更新日:2024.10.16編集部
Figmaのオートレイアウトの基本的な使い方

Figmaには複数の要素をまとめる方法に「グループ」と「フレーム」が存在します。今回解説するオートレイアウトは、「フレーム」の中の要素を整列させたり、配置・間隔を自動で調整する機能です。

使いこなせるととても便利な機能なので、まずは基本から習得しましょう!

最初に、オートレイアウトの適用方法を説明します。

適用の仕方は、

  1. 複数の要素を選択

  2. 右メニューから「オートレイアウト」を選択(shift+A)

次に、要素の間隔、周りの余白(パディング)を指定する方法を説明します。

① 要素の間隔を指定する場合

要素の間隔を指定する場合

② 横の余白を指定する場合

横の余白を指定する場合

③ 縦の余白を指定する場合

縦の余白を指定する場合

④ 周りの余白を4箇所別々で指定したい場合

最後に、配置・整列の方法を説明します。

配置の種類は3つです。

  1. 縦に並べる:要素を縦並びに配置する

  2. 横に並べる:要素を横並びに配置する

  3. 折り返す:要素をフレームの中で折り返すように配置する

整列は上下・左右のどこに要素を固定するかを選ぶことができます。

オートレイアウトは入れ子構造のように利用するとさらに便利になります。

整列・配置・間隔を整えたいときは、まずはオートレイアウトを利用してみましょう!

この記事の関連シリーズ
Figma

関連記事

Related Articles

  • Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
    Figma2025.05.08
    Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
  • Figmaで画面遷移図やフローチャートをつくる方法
    Figma2024.10.10
    Figmaで画面遷移図やフローチャートをつくる方法
  • Figmaのコンポーネント化を解除してフレームに戻す方法
    Figma2024.10.08
    Figmaのコンポーネント化を解除してフレームに戻す方法
  • Figmaで日本語テキストを縦書きにする方法
    Figma2024.09.19
    Figmaで日本語テキストを縦書きにする方法

最新の記事

Latest Articles

  • 「育児と仕事の両立」を支える「ヘルプチーム」を結成 有名マンガアプリを手がけるand factoryの育児支援
    育児支援2025.06.06
    「育児と仕事の両立」を支える「ヘルプチーム」を結成 有名マンガアプリを手がけるand factoryの育児支援
  • “また使いたくなる“を生み出す「ゲームフルデザイン」の極意 セガ エックスディー COO・伊藤 真人氏に聞く
    UXデザイン2025.05.13
    “また使いたくなる“を生み出す「ゲームフルデザイン」の極意 セガ エックスディー COO・伊藤 真人氏に聞く
  • メンタル乱れる夜も。自分の機嫌は自分とAIでとる時代?
    エッセイ2025.05.09
    メンタル乱れる夜も。自分の機嫌は自分とAIでとる時代?
  • Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に
    Figma2025.05.08
    Figma Config 2025キーノートレポート!これまでにない速さで"アイデアをプロダクトに"できる世界に

デジタルデザインの最新情報をお届け!

unprintedのメールマガジンにご登録いただくと、デジタルデザインの最新情報をメールで受け取ることができます。今までに配信したバックナンバーも公開中!

※登録ボタンを押すと利用規約に同意されたものとします。