PR|3日で初案件

Figma オートレイアウト解除は3手順|Mac・Windows別ショートカットと自由配置の使い分け

◆ ◆ ◆

Homeフリーランスの仕事術 › Figma オートレイアウト解除...

FREELANCE CAREER GUIDE
フリーランスの仕事術
Figma オートレイアウト解除は3手順|Mac・Windows別ショートカットと自由配置の使い分け
フリ転。

Figmaのオートレイアウトは、右パネル操作・右クリック・ショートカットの3手順で解除できます。Macは Option + Shift + A、WindowsはAlt + Shift + A が対応するショートカットです。この記事では解除の3手順に加え、全解除せず一部だけ自由に置ける絶対位置の使い方まで、納品前修正をすぐ終わらせたい方向けにまとめます。

目次

この記事でわかること

Figmaオートレイアウトの解除方法を3手順で習得できます。Mac・Windows別ショートカット(Option/Alt + Shift + A)を1分で確認できます。全解除不要なケースで絶対位置を使った部分修正のコツがわかります。

今の仕事について、一番近いものは?

この記事の結論

Figmaのオートレイアウト解除は、右パネルのオートレイアウト欄の「-」ボタン1クリックで完了します。ショートカット(Mac: Option + Shift + A / Windows: Alt + Shift + A)でも同じ操作が可能です。全解除を避けたい場合は絶対位置を使うと、フレーム構造を保ったまま一部要素だけ自由に動かせます。

最初に確認すること

選択しているのがフレームかどうかを確認してください。グループやコンポーネントのインスタンスを選択している状態では解除操作が表示されないため、レイヤーパネルでフレームを直接選択してから操作します。この確認だけで「解除ボタンが見つからない」の大半は解決します(確認所要時間:約30秒)。

状況別ショートカット

状況読むべきセクション所要時間
まず手順を知りたいFigma オートレイアウト解除は3手順で完了2分
ショートカットだけ確認したいMac・Windows 別ショートカットは1キー操作で解除1分
一部だけ自由に動かしたい解除せず自由配置する方法は絶対位置と無視の2択3分
解除できないときの原因を知りたい解除できない原因を3パターンで診断3分
複数フレームをまとめて解除したい複数フレームの一括解除はプラグインで対応2分

Figma オートレイアウト解除は3手順で完了

オートレイアウトの解除ボタンが見つからない、という状況は実務でよく起きます。右パネルの表示はフレームを選択しているときにだけ現れるため、グループを選んだままだと何も見えません。

手順1:右パネルから解除する方法(基本)

フレームを選択した状態で、右パネル上部に「オートレイアウト」セクションが表示されます。セクション右端の「-」ボタンをクリックすると、オートレイアウトが解除されフレームは通常のフレームに戻ります。解除後、フレーム内の要素は元の位置を維持したまま配置が固定されます(Figma公式ヘルプ:オートレイアウトのガイド)。

解除直後に起きやすい問題として、テキスト要素の幅が「Hug」設定のまま残り、意図しないサイズになるケースがあります。解除後は幅・高さの設定を右パネルで必ず確認する習慣をつけると、余計なやり直しを減らせます。

手順2:右クリックメニューから解除する方法

フレームを右クリックすると「オートレイアウトの削除」という項目が表示されます。クリックすると手順1と同じ操作が完了します。右パネルが狭い画面や、パネルの表示が崩れているときに有効な代替手順です。

複数フレームを選択した状態で右クリックしても「オートレイアウトの削除」が表示されないことがあります。その場合は1フレームずつ選択して解除するか、後述のプラグインを使ってください。

手順3:キーボードショートカットで解除する方法

作業中にマウスを最小限にしたい場面では、ショートカットが最速です。フレームを選択した状態で以下のキーを押すと即座に解除されます。

Mac: Option + Shift + A

Windows: Alt + Shift + A

ショートカットが効かないように見えても、実際にはフレームではなく子要素が選択されていることが多くあります。Escキーで1段階上に戻り、フレーム自体が選択されているかレイヤーパネルで確認してから再度押してみてください。

CHECK

▶ 今すぐやること: 解除したいフレームをレイヤーパネルで直接選択し、Option + Shift + A(Mac)または Alt + Shift + A(Windows)を押す(1分)

Q: オートレイアウトを解除するとコンポーネントはどうなりますか?

A: コンポーネントのメインに対してオートレイアウトを解除すると、インスタンス側にも変更が反映されます。インスタンスだけを修正したい場合は、インスタンスを切り離してから解除してください(Figma公式ヘルプ:Components とオートレイアウト)。

Q: 解除したらフレームの中身がずれてしまいました。戻せますか?

A: Cmd + Z(Mac)または Ctrl + Z(Windows)でひとつ前の状態に戻せます。解除前に複製(Cmd + D / Ctrl + D)を取っておくと、元の状態を保ちながら確認できます。

Q: ショートカットの「追加」と「解除」はどう違いますか?

A: オートレイアウトの追加は Shift + A、解除はそこに Option(Mac)または Alt(Windows)を加えたキーです。追加と解除でOptionの有無だけが異なると覚えると混乱しにくくなります。

Mac・Windows 別ショートカットは1キー操作で解除

ショートカットがMacとWindowsで違うと戸惑う場面があります。「Alt + Shift + A を押してもうまくいかない」という相談がnoteの実務記事でも取り上げられています(Figmaオートレイアウトの使い方と対策|しばデザイン)。

なお、Figmaのショートカット操作とあわせてChrome拡張機能で作業効率を上げる方法も活用すると、デザイン作業全体のスピードを底上げできます。

Mac のショートカット一覧と確認手順

操作ショートカット
オートレイアウト追加Shift + A
オートレイアウト解除Option + Shift + A

MacでFigmaを使う場合、Option キーは通常キーボード左下に2つあります。どちらを押しても同じように動作します。解除前に必ずフレームを選択した状態かを確認してください。フレームが選択されていない状態でショートカットを押しても何も起きません。

Windows のショートカット一覧と確認手順

操作ショートカット
オートレイアウト追加Shift + A
オートレイアウト解除Alt + Shift + A

Windowsでは日本語入力がオンのままだとショートカットが効かないことがあります。ショートカットを使うときは半角英数入力に切り替えてから操作すると確実です。右Altが別の機能に割り当てられているキーボードがあるため、左Altを使うことを習慣にすると安定します。

ショートカットが効かないときの確認手順

レイヤーパネルでフレームが選択されているか確認します(子要素が選択されていないかを必ず確認してください)。次に日本語入力をオフにします。ブラウザ版Figmaを使っている場合、ブラウザのショートカットと競合することがあるため、デスクトップアプリ版への切り替えを試みてください。それでも反応がなければ、右パネルまたは右クリックから手動で解除します。

「ショートカットが効かない」案件の多くはフレームではなく子要素が選択された状態です。ショートカットより先に選択状態を疑うと解決が早まります。

Q: ブラウザ版とデスクトップアプリ版でショートカットは同じですか?

A: キー自体は同じですが、ブラウザのショートカットと競合する場合があります。Alt キーを使う解除操作は特にブラウザで干渉しやすいため、デスクトップアプリ版での利用を推奨します。

Q: Figmaを日本語UIで使っていますが、ショートカットは英語表記と同じですか?

A: UI言語を日本語に設定していてもショートカットキー自体は変わりません。同じキー操作で動作します。

Q: キーボードに Option キーがありません。どうすればいいですか?

A: 外付けキーボードによってはOptionの刻印がなくAltと印字されているものがあります。その場合はAltキーを押せばOptionキーと同じ動作になります。

解除せず自由配置する方法は絶対位置と無視の2択

全解除は避けたいが一部の要素だけ動かしたい、という場面は制作中によく出てきます。ボタンの上にバッジを重ねたい、カードの角にアイコンを固定したいなど、自動整列のフローから特定要素だけ外したいときが該当します。

絶対位置(absolute position)の使い方

オートレイアウトが設定されているフレームの内部で、対象の子要素を選択します。右パネルの「配置」セクションに「絶対位置」のアイコンが表示されるので、それをクリックします。絶対位置を有効にした要素はオートレイアウトのフローから除外され、フレーム内を自由に移動できます(Figma公式ヘルプ:オートレイアウトのガイド)。

絶対位置は「フレームのサイズを基準に座標で固定される」挙動をします。フレームのサイズが変わると座標が相対的に動くため注意が必要です。フレーム拡大時に絶対位置要素がずれた、という経験は多くの制作者が一度は遭遇します。

「オートレイアウトを無視」の使いどころ

子要素を右クリックすると「オートレイアウトを無視」という選択肢が表示されます。これを選ぶと、その要素はオートレイアウトのフロー計算から除外されますが、見た目の位置は元の場所に残ります。絶対位置との違いは座標指定の有無です。

絶対位置は位置を数値で固定したいときに使い、オートレイアウトを無視は「とりあえずフローから外して手動で動かす」段階に向いています。完成形が固まった後は絶対位置で座標を確定させる、という流れが実務では安定します。

「解除」「絶対位置」「無視」の使い分け比較

操作対象向いているケース
解除(全体)フレーム全体オートレイアウト自体が不要になったとき
絶対位置フレーム内の子要素一部要素をフレームに座標固定で重ねたいとき
オートレイアウトを無視フレーム内の子要素フローから外してとりあえず手動調整したいとき

一部の要素だけ絶対位置にしてバッジを重ねられると知ってから全解除するケースが減った、とFigma実務ユーザーは語っています。フレーム構造を壊さずに修正できる点が実務での評価につながっています(Figmaオートレイアウト実務体験|stacker team note)。

CHECK

▶ 今すぐやること: 自由に動かしたい子要素を選択し、右パネルの「絶対位置」アイコンをクリックしてフローから外す(2分)

Q: 絶対位置にした要素は他のメンバーも編集できますか?

A: チーム共有ファイルでも通常通り編集できます。絶対位置の設定はファイルに保存されるため、他のメンバーが開いたときも同じ状態で表示されます。

Q: コンポーネント内の子要素に絶対位置を設定できますか?

A: メインコンポーネント内であれば設定できます。設定後はすべてのインスタンスに反映されます。インスタンス側だけを変えたい場合はインスタンスを切り離してから操作してください。

Q: 「オートレイアウトを無視」した要素の位置を数値で固定するには?

A: 「オートレイアウトを無視」状態の要素を選択し、右パネルで絶対位置アイコンをクリックすると座標固定に切り替えられます。最終的な配置が決まったら絶対位置に移行してください。

事務作業に時間を取られている方へ

フリーランスの働き方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

解除できない原因を3パターンで診断

「解除を試みたのに反映されない」「ボタンが見つからない」という場面は珍しくありません。以下の診断で自分のケースを特定してください。

Q1: 右パネルにオートレイアウトのセクションが表示されていますか?

表示されていない場合、選択している要素がフレームでない可能性があります。レイヤーパネルで対象の種別を確認し、フレームを直接選択してください。グループを使っている場合、オートレイアウトは設定されていないためボタンも表示されません。表示されている場合はQ2へ進んでください。

Q2: 「-」ボタンを押しても見た目が変わりませんでしたか?

見た目に変化がなくても、右パネルのオートレイアウトセクションが消えていれば正常に解除されています。その場合は解除完了です。変化がなかった場合はQ3へ進んでください。

Q3: 対象フレームの外側にも別のオートレイアウトフレームがありますか?

外側に別フレームがある場合、親フレームのオートレイアウトが残っているため内側のフレームを解除しても外側のフローが動作しています。親フレームも選択して解除してください。外側に別フレームがない場合、解除後に幅・高さが「Hug」のまま残っている可能性があります。右パネルで幅と高さの設定を確認し、固定値またはFillに変更してください。

「解除できていないと思っていたら、親フレームのオートレイアウトが残っていただけだった」というFigmaユーザーの報告があります(Figmaオートレイアウト実務体験|stacker team note)。

Q: 解除したのに要素がフレームからはみ出してしまいます。

A: 解除後にフレームの「クリッピング」設定が変わった可能性があります。右パネルでフレームを選択し「コンテンツのクリッピング」にチェックが入っているか確認してください。

Q: インスタンスのフレームは解除できますか?

A: インスタンスのオートレイアウトを直接解除することはできません。メインコンポーネントで解除するか、インスタンスを切り離してから解除してください。

Q: 複数フレームを選択して一括解除できますか?

A: 標準操作での一括解除は対応していません。複数フレームをまとめて解除したい場合はプラグインを使ってください。

複数フレームの一括解除はプラグインで対応

大量のフレームが積み重なったファイルを受け取り、すべてのオートレイアウトを解除して構造をフラットにしたい場面があります。制作者間で引き継いだファイルや、テンプレートを流用した際によく起きます。

プラグインを使った一括解除の流れ

Figmaのプラグインとして「Remove Auto Layout」系のものが公開されています。Figmaのプラグインメニュー(メニューバーのPlugins → Find more plugins)で「auto layout remove」と検索すると複数の選択肢が見つかります。

解除したいフレームをすべて選択し(Shift + クリック、またはCtrl + A / Cmd + A で全選択)、Plugins メニューからインストール済みのプラグインを起動します。「Remove Auto Layout」または「Flatten」に相当するボタンを実行した後、処理後に元に戻せるようCtrl + Z / Cmd + Z で確認してから保存してください。

プラグインは開発者ごとに挙動が異なるため、本番ファイルで使う前に必ずテスト用の複製ファイルで動作を確認してください。「解除できた」と思ったら制約設定が消えていた、という事態も起きることがあります。

一括解除前に必ずやること

一括解除は元に戻しにくい変更を伴うため、以下を実行してから操作します。まずファイルを複製して作業します(File → Duplicate)。次に解除対象のフレームをコメントで記録しておきます(変更前の構造を残す)。さらにプラグインをテスト用ファイルで先に試し、挙動を確認してください。本番ファイルへの直接実行は避けてください。特にチーム共有ファイルでは他のメンバーの作業に影響することがあります。

引き継ぎファイルでプラグインを使って一括解除したが、一部のコンポーネントのインスタンスが崩れたというFigmaユーザーの報告があります。複製しておいたおかげで元の状態に戻せたとのことです(Figmaオートレイアウト実践メモ|computer.sarujincanon.com)。

Q: プラグインは無料で使えますか?

A: Figma公式のプラグインマーケットには無料で使えるものが多数あります。有料のものもあるため、インストール前に価格を確認してください。

Q: プラグインを使わずに複数フレームを解除する方法はありますか?

A: 標準機能では1フレームずつの解除になります。フレーム数が少ない場合は手動で対応し、10フレーム以上になる場合はプラグインを検討するのが現実的です。

Q: プラグインで解除した後、コンポーネントの接続は残りますか?

A: オートレイアウトの解除とコンポーネント接続は別の設定のため、コンポーネント接続はそのまま残ります。プラグインの種類によっては挙動が異なるため、複製ファイルで先に確認してください。

納品前修正は3ステップで最小化

フリーランスの納品前修正でよく遭遇するのは「クライアントからの修正指示で、意図せずレイアウトが崩れた」という状況です。オートレイアウトを使っているフレームでひとつのサイズを変えると、連動して別の部分が動いてしまうことがあります。

フリーランスの開業資金や日々の業務管理と同様、Figmaの修正作業でも「事前に複製を取る」習慣が後のリスクを大幅に下げます。

解除前に複製を取る理由

解除操作は元の状態を保つのが難しいため、複製を取ることが最初のステップです。修正後に「やはり元のレイアウトに戻したい」という依頼は制作現場では珍しくなく、複製があれば数分で対応できます。複製のないまま解除したあとに依頼が変わると、全体を作り直す羽目になることもあります。

解除後に確認する3項目

解除が完了した後、幅と高さの設定(Hug / Fill / 固定値)が意図どおりかを確認します。次にテキスト要素の折り返しが崩れていないかを確認します。最後に画像のトリミング範囲がずれていないかを確認します。この3項目を確認するだけで解除後の崩れの大半に気づけます。

チーム案件でのコメント運用

複数人が関わるファイルでは、解除前後の状態をコメントで残す運用が有効です。Figmaのコメント機能(Cキーで追加)でフレームに「解除前の構造を保持した複製あり」と記録しておくと、引き継ぎ時の混乱を防げます。クライアントからの差し戻し期間が終わるまでは複製を保持しておくほうが安全です。

フリーランスとして作業効率を上げる仕組みを整えておくと、こうした修正対応の速度も自然と上がります。

Q: 納品後にクライアントからファイルを修正したいと言われた場合、解除済みファイルで対応できますか?

A: 解除済みでも修正は可能ですが、オートレイアウトがある状態のほうがサイズ変更への追従が自動化されているため対応が楽です。納品ファイルとは別にオートレイアウトを残したマスターファイルを保持しておくことを推奨します。

Q: 解除後のファイルを再度オートレイアウトに戻すことはできますか?

A: フレームを選択して Shift + A を押すか、右パネルのプラス(+)ボタンでオートレイアウトを再追加できます。解除前のパディングや間隔設定は自動では戻らないため、手動で再設定が必要です。

Q: 解除前の複製はどこに保存しておくべきですか?

A: 同じFigmaファイルのページを分けて保存するか、別ファイルとして複製する(File → Duplicate)のが一般的です。プロジェクト名に「_backup」を付けて区別すると管理しやすくなります。

Figma オートレイアウト解除は選択状態の確認が最初の一手

Figmaのオートレイアウト解除は、フレームを正しく選択した上で右パネル・右クリック・ショートカットの3手順で完了します。解除できない場合は、フレームの選択状態と親子構造の両方を確認することで原因の大半を特定できます。全解除が不要な場面では絶対位置と「オートレイアウトを無視」を組み合わせると、フレーム構造を保ったまま部分的な自由配置が実現します。

フリーランスの納品作業では「解除して再調整」より「絶対位置で部分修正」のほうが時間を短縮できる場面が多くあります。解除・絶対位置・無視の3つの使い分けを身につけると、クライアントからの修正依頼に落ち着いて対応できます。外注契約書のテンプレートなど周辺の実務も整えておくと、トラブル時の対処がよりスムーズになります。

状況次の一歩所要時間
解除ボタンが見つからないレイヤーパネルでフレームを直接選択する30秒
ショートカットが効かない日本語入力をオフにしてフレームを再選択する1分
一部だけ自由に動かしたい対象子要素に絶対位置を適用する2分
複数フレームをまとめて解除したい複製ファイルでプラグインをテストしてから実行する5分

Figma オートレイアウト解除に関するよくある質問

Q: オートレイアウトを解除すると、元のフレームサイズは保持されますか?

A: フレームサイズは解除後も基本的に保持されます。幅・高さが「Hug」設定だった場合、内容に応じてサイズが変わることがあります。解除後に右パネルでサイズを確認し、必要に応じて固定値に変更してください。

Q: オートレイアウトが設定されているかどうかを素早く確認する方法はありますか?

A: フレームを選択したときに右パネルの上部に「オートレイアウト」セクションが表示されていれば設定されています。レイヤーパネルでフレームアイコンの形が異なって表示される場合もオートレイアウトが設定されているサインです。

Q: Figmaのバージョンによって解除手順は変わりますか?

A: 右パネルの表示位置やアイコンの形が変わることがありますが、基本的な解除手順(右パネルから削除・右クリック・ショートカット)は変わりません。Figmaは常時アップデートされるため、Figma公式ヘルプ:オートレイアウトのガイドで最新の表示を確認してください。

【出典・参照元】

Figma公式ヘルプ:オートレイアウトのガイド

Figma公式ヘルプ:Components とオートレイアウト

Figmaオートレイアウトの使い方と対策|しばデザイン

Figmaオートレイアウト実務体験|stacker team note

Figmaオートレイアウト実践メモ|computer.sarujincanon.com

事務作業に時間を取られている方へ

フリーランスの働き方をLINEで受け取る

3日で初案件

登録1分・情報収集だけでもOK・ブロック自由

タップするとLINEの友だち追加画面が開きます

未経験から45日

フリーランス
Webデザイナーへ

無料セミナーに参加する →

所要60分・オンライン

PR提供: 日本デザインスクール(デザスク)

フリ転編集部 jpndesft
フリーランス専門メディア「フリ転。」編集部。独立・案件獲得・税務など、フリーランスが直面する課題をわかりやすく解説することを使命としています。

フリーランスデザイナーのためのキャリア・案件・税務情報をお届けしています

お問い合わせ →

人気キーワード

フリーランスの案件・単価を調べる

フリーランス求人を探す週1〜2日・リモートOKの案件を毎日自動収集職種別の単価相場を見る48職種の月額単価を実データから集計実務ツールを使う見積・請求書・税金計算など51種を無料で

カテゴリから記事を探す

フリーランスの独立術フリーランスの資金術フリーランス職種図鑑