Figmaオートレイアウト攻略｜要素を横に移動できない時の解決法
designmoFigmaのオートレイアウト使用中に、要素を思い通りの場所に配置・移動できずに困った際のステップバイステップの解決ガイドです。
力づくでは動かない！オートレイアウトの「戻る」問題
前回の『Figmaのオートレイアウトで要素が逃げる！後付けで文字を重ねる解決法』と似てるんですが、やはり初心者の私だと同じようにてこずってしまうので、自分なりの攻略法をメモ代わりに残しておこうと思います。
今回は、この状態の「ここに画像タイトル」の文字を、移動させたい、とします。
これ↓を、
こうしたい↓
「クリックして掴んで右に移動させたらいいじゃん」という単純な話ではないことは、もうやる前から分かっています。
わかっていても一応、やってみます。
もちろん、力づくでぐいぐい引っ張ってきても…
戻る！！
…知ってた。
救世主「オートレイアウト無視」ボタンを使ってみる
前回の記事の最後に追記したように、右サイドバーの右上に「オートレイアウト無視」ボタンがあります。これは、オートレイアウトがかかった状態を保ちつつも、それを無視して動かせるボタンです。
押してみましょう。
それから「ここに画像タイトル」の要素を引っ張ってくると…
逃げ戻られずに仮置きが！ できた！
もちろん、このままでは体裁が悪すぎるので、整えます。
下の画像の補足文字情報欄も選択。
これに対しても「オートレイアウトを無視」ボタンを押してから、いい感じに移動させます。
出来た！！できましたぞ！！（拍手）
バラバラの要素を「オートレイアウト」で再構築する
これで解決！ といいたいところですが…
これでは、右の要素二つがオートレイアウト同士になっていません。
つまり、このままだと「ここに画像タイトル」と補足テキスト、左のグレー四角がばらばらの動きをしてしまうし、要素同士のパディング設定もできません。
ですから2つを選択して……
…オートレイアウトをかけます。（イヤな予感）
すると、
知ってた。
親の顔より見た展開。
やっぱり崩れた！でも慌てないための設定チェック
でも慌てない！
これは大枠のフレームの中のオートレイアウトの並び方が「縦並び」になっているから。
右サイドのオートレイアウト部分を確認する。
ほらね！！ 垂直並びだね！
というわけで、「水平」並びをクリックします。
ほら、出来ました！
