【Figma】Auto Layoutに拒絶反応が出てしまうエンジニアへ
2026年2月9日
「オートレイアウトだるい！Figma使いにくすぎ！」という方に向けての記事です。
最近のWebフロントエンド開発において、UI設計はもはや「Figma一択」と言っても過言ではない状況ですよね。ただ、プロジェクトで多くの方とご一緒する中で、Figmaを「実装しやすい形」で適切に使いこなせる方は、まだそれほど多くないのかもしれない……と感じることもあります。
実際、私の関わっているプロジェクトでも、チームメンバーから「Figmaのオートレイアウトって、どうやって組めばいいんですか？」「なんかレイアウトが崩れちゃって……」と相談を受ける機会がかなり増えてきました。
もちろん、エンジニアが本来の業務の傍らでデザインツールまで習熟するのは大変なことだと思います。ですが、Figmaを適切に扱える人が増えれば、開発はもっとスムーズになるはず。そんな思いから、今回は初心者の方向けに「これだけは押さえておきたいFigmaの肝」をまとめてみました。
ですが、Figmaはこれまでデザインツールに触れてこなかった方にとっては、少しハードルの高いツールに感じられるかもしれません。
私自身、最初からスムーズに扱えたわけではありませんでした。そこで改めて初心者の視点に立ち返り、「どこが使いにくいのか？」「なぜ設計が崩れてしまうのか？」を深掘りしてみると、ある一つの機能にたどり着きました。
それが、Figmaの重要機能である「オートレイアウト」です。
一見難しそうに見えますが、ここを理解するだけで「単なるお絵描きツール」が「論理的な設計ツール」に変わります。この記事が、皆さんのこれからの作業において、何らかのヒントや助けになれば幸いです。
「グループ化」と「オートレイアウト」は何が違うの？
Figmaを触り始めたとき、多くの人が「要素をまとめるなら『グループ化（Ctrl + G）』で十分じゃない？」と感じるはずです。
しかし、結論から言うと、適切にUIを設計するなら「グループ化」を卒業して「オートレイアウト」を使いこなす必要があります。
この両者の決定的な違いは、「中身の変化に合わせて自動で形を変えてくれるかどうか」にあります。
グループ化：ただの「まとめ」
グループ化は、複数の要素をひとまとめにするだけの機能です。配置した場所が固定される（絶対座標的な管理）ため、中身の文字を書き換えても枠の大きさは変わりません。
「虫眼鏡アイコンを真ん中において、文字列を右において。。。」という作業が発生します。これはまさに、お絵描きソフトのやり方です。
オートレイアウト：構造を持った「設計」
一方、オートレイアウトは「中身に合わせて枠がどう振る舞うか」というルール（構造）を決める機能です。
フォームに対して虫眼鏡アイコンの位置、上下の間隔、ギャップの指定を数値ベースで管理することができます。
エンジニアの方ならピンとくるかもしれませんが、これはCSSの display: flex; そのものです。
Padding（余白）： 文字の周りにどれくらいスペースを空けるか。
Gap（間隔）： アイコンと文字の間にどれくらい隙間を作るか。
Alignment（整列）： 中央揃えにするのか、上揃えにするのか。
これらを一度設定してしまえば、あとは中身を変えるだけで「常に正しい見た目」を維持してくれます。
なぜ「グループ化」は設計しにくいの？
私たちが普段コードを書くとき、ボタンの幅を「固定の200px」で指定することは少ないですよね。中身に応じて伸び縮みするように書くはずです。
グループ化で作られたデザインデータは、エンジニアから見ると「すべてが絶対座標で置かれた、レスポンシブではないデータ」に見えてしまいます。
グループ化： 「この文字は左から24px、上から12pxの場所に置いてある」という情報の集まり。
オートレイアウト： 「この要素は内側に12pxのパディングを持っている」という実装に直結する情報の集まり。
Figmaを「正しく設計する」ということは、「エンジニアがそのままコードに落とし込める構造を作ること」と言っても過言ではありません。
検索ボックスを「オートレイアウト」で設計しよう
単一のボタンなら簡単ですが、少し複雑な「検索ボックス」を作ろうとすると、オートレイアウトの真価が発揮されます。
ここで大事な考え方は、「一気に作らず、小さな塊から組み上げる」ことです。
Step 1：まずはパーツをオートレイアウト化する
まずは、アイコン、入力テキスト、検索ボタンといった「最小単位」を準備します。
ここで、まず「検索ボタン（文字＋背景）」だけで Shift + A を押し、オートレイアウト化します。これで、文字数に応じて伸び縮みするボタンが完成します。
同じように、検索フォームのコンポーネントたちもまとめてあげましょう。
フォームの幅が短くなっちゃった！
今、右側のメニューの幅（W）を見てみると、「内包」と書かれています。「内包（Hug Contents）」は中身にぴったり合わせる設定なので、中身が短いとフォーム全体もキュッと縮まってしまいます。
フォーム幅を「固定値」にして安定させる 「中身に合わせて伸び縮みしてほしい」ときもありますが、フォーム全体としては「横幅は〇〇pxで固定したい」というケースがほとんどですよね。
そんなときは、幅（W）の設定を「内包」から「固定（Fixed）」に切り替えます。
余裕が生まれましたね。 では、次はこのフォームとボタンを選択してオートレイアウトを指定してあげましょう。
個別のパーツが整ったら、次はいよいよそれらを組み合わせて「ひとつのUIコンポーネント」として完成させましょう。
操作は簡単。フォームの入力エリアと、隣にある検索ボタンの2つを同時に選択して、Shift + A を押すだけです。
2つの要素を選択し、オートレイアウトを適用した瞬間に「Frame」という新しい親要素に包まれる様子。
構造の「入れ子（ネスト）」を意識する これで、以下のような階層構造（ドミトリー）が出来上がりました。
親：オートレイアウト（検索ユニット全体） 子1：オートレイアウト（アイコン＋入力テキスト） 子2：オートレイアウト（検索ボタン）
エンジニアの皆さんならお気づきかもしれませんが、これはHTMLでdivを入れ子にしながら組んでいく作業と全く同じです。Figmaが「デザインツール」でありながら「設計ツール」と呼ばれる理由は、まさにこの構造化のプロセスにあります。
隙間（Gap）を数値でコントロールする
2つの要素をオートレイアウトでまとめると、右側のプロパティパネルにある「項目の間隔（Gap）」という項目で、ボタンとフォームの間の距離を「8px」「16px」といった具合に数値で正確に管理できるようになります。
「なんとなく目分量で置く」のではなく、「ここは8px空ける」とルールを決めて設計する。この積み重ねが、エンジニアにとっての「実装のしやすさ」に直結していきます。
【中級編】高速に設計するために
おおまかですが、 オートレイアウトの概念をつかむことができたのではないでしょうか。 オートレイアウトの仕組みがわかったら、次は「いかに手を止めずに組むか」です。現場で重宝するショートカットと小技を紹介します。
① 「Shift + A」／「Alt + Shift + A」
すでに紹介した Shift + A（オートレイアウト適用）は基本ですが、実は解除のショートカットも重要です。
適用：Shift + A
解除：Alt + Shift + A （Macは Opt + Shift + A）
「一度組んでみたけど、やっぱりバラしたい」という時に、右パネルをカチカチ触る必要はありません。
② パディングを調整する「Cmd (Ctrl) + クリック」
右サイドバーの数値入力欄をいちいちクリックするのは面倒ですよね。
一括調整： パディングのアイコンを Cmd (Ctrl) を押しながらクリックすると、上下左右のパディングを一気に入力できるモードになります。
キャンバス上で調整： オートレイアウト要素を選択した状態で、中にあるピンク色のバーをドラッグしてみてください。マウス操作だけで、数値を直感的に（かつ8px刻みなどで）調整できます。
③ 「絶対配置（Absolute Position）」でルールを無視
オートレイアウトは強力ですが、「右上に通知バッジを少し重ねたい」といった、ルールを無視した配置をしたい時があります。
以前のFigmaではこれが困難でしたが、今は「絶対配置ボタン」ひとつで解決します。
要素を選択して、右パネルの「サイズ（W/H）」の横にある「＋」が書かれたアイコン（絶対配置）をクリック。
これで、オートレイアウトの整列ルールを無視して、自由な位置に置けるようになります。
④ レイヤー名の「一括置換」
これはオートレイアウト直接の機能ではありませんが、設計を「正しく」仕上げるための重要テクニックです。 大量の「Frame 123...」を整理するのは苦行ですが、 Cmd (Ctrl) + R を使えば一括置換が可能です。
Cmd (Ctrl) + R ：選択した複数のレイヤー名を一括でリネーム。正規表現も使えます。
いかがでしたでしょうか。 私自身、最初はFigmaの挙動に振り回されてばかりでしたが、構造が理解できるようになった瞬間、デザインが「パズルを組み立てるような楽しさ」に変わりました。
ツールを使いこなすことは、単に作業を速くするだけでなく、チームメンバーとの意思疎通をスムーズにするための大きな一歩です。この記事が、皆さんのFigmaアレルギーを少しでも解消し、日々の業務がより楽しく、円滑になるきっかけになれば嬉しいです。
最後まで読んでいただき、ありがとうございました！