Figmaのオートレイアウトで要素が逃げる！後付けで文字を重ねる解決法
designmoFigmaのオートレイアウトを設定した後、要素の上に文字を置こうとして「シュッシュと逃げられた」経験はありませんか？本記事では、その原因と確実に重ねる手順、そして便利な最新機能について解説します。
webデザイン初心者です。
元々少し紙デザインの方をしておりましたが、一年ほど前に初めてサイトデザインのお仕事をさせてもらって、その際に指定されたツールがfigmaでした。
紙モノでは次の工程で印刷の方にお世話になるように、webではコーダーさんにお世話になるわけです。
というわけで、コーダーさんにご迷惑のかからないような、web独自のお作法を守ったデザインを心掛けるデザイナーを目指しています。
そのためにもfigmaくんとは理解を深めて早くお友達になりたい、と勉強中です。（AIの覇権におびえつつ）
それにしてもfigma、便利ですよね。
特にオートレイアウトが。
要素の入れ替えをするたびに余白を考え直す面倒もない。
コンポーネントを使えば、共通の要素を持つものを一度に置き換えられる。
いやぁ、便利です。
最近では、illustratorで紙物を作っているときにも「これがfigmaなら、この変更はもっと簡単に済むものを…」と少々焦れったく思うようになってきました
いや、しかしそれにしてもfigma、まだまだ理解できませんね。
特にオートレイアウトが。
さっきと言ってることが180度全然違いますが、要するにまだまだ使いこなせていません。
特に最初に悩まされたのは、
「後づけで入れたくなった要素、足そうと思ったら元のオブジェクトにスルっと逃げられる問題」
です。
Figmaのオートレイアウトで「要素が逃げる」原因とは？
たとえば、仮デザインを共有して、クライアントさんに「こんな風に使うのでこういう素材が欲しいです」とお願いすることもあるので、
↓この状態の画像配置予定地（グレーの四角部分）に、
↓このように文字を入れて、誰が見てもわかりやすくしたい、とします。
一見簡単そうです。
「ココに画像」の文字をタイピングしてそれを四角の上に持っていけばいいのでしょ？ と最初は思います。
しかし！
オートレイアウトで大枠を作っちゃった後に「ココに画像」の文字を後から足そうとすると…
四角に逃げられる！！
反対から入れても…逃げられる！！
そこでジッとしといてくれ、頼むから！！
「ココに画像」を黙って受け入れてくれ！！
もちろん、figmaさんは指定された設定を実行しているだけなので、そんな融通は利きません。
そう、figmaさんは、設定を実行しているだけなのです。忠実に仕事をしているだけなので、何も悪くありません。少々歯痒くはありますが。
というわけで、当然ながらこちらの方で一度、設定を変えてやらねばいけません。
今まではいじくり回しているうちに「よくわからないけど何とかなったぜ。でも偶然出来ただけだから、次もまた同じところで躓くぜ」という状況でしたが、最近やっと、「こうすればできる」と説明できる程度にはなってきました。
後付けの文字をピタッと重ねる4ステップ
では、私なりのやり方を説明していきます。
まず、文字を乗せたいグレー四角を「画像予定地」と仮称します。
左サイドのレイヤー構造でも迷子にならないようにフレーム名も「画像予定地」に変えておきます。
Step1.対象のフレーム（画像予定地）を直接選択する
まず、「画像予定地」のフレームを直接選択します。
間違って外枠とかのフレームを選択しないように。あくまでも、文字を乗せたい要素をのフレームのみを直接クリックして選択します。
Step2. 右サイドバーでオートレイアウト設定を確認
↓右サイドのデザインバーを確認すると、オートレイアウトがかかっています。
このオーレイアウトにより、横並び配置になるよう指示がされています。
だから先ほど追加した「ココに画像」の文字と横並びになるべく、画像予定地の四角はシュッシュと左右に逃げていたんですよね。ちゃんと指示通りに動いてくれた結果がアレです。
でも今は逃げられたら困るので、一旦このオートレイアウトを解除します。
Step3. 「絶対位置」への切り替え（または解除）で自由配置に
↓オートレイアウトを解除しました。
オートレイアウトが解除され、普通の「レイアウト」になっています。配置も「自由形式」というものになっています。どこでも好きに置いていいよ、上に重ねても構わないよ、という指示です。
「ココに画像」の文字を、画像予定地の四角の上に持っていきます。
はい、ちゃんと文字が重なってくれました。
Step4. 文字を重ねてオートレイアウトを再適用する
というわけで、画像予定地の四角のフレームを、もう一度オートレイアウトに戻しておきましょう。
オートレイアウトかけなおして左のレイヤー構造を確認。
きちんと「ココに画像」の文字が「画像予定地」のフレームの下層に入っているのが確認できました。よかったよかった。
ちなみに、figmaのバージョンアップのスピードはすさまじく、今はオートレイアウトを維持したまま要素を重ねる「絶対位置（Absolute position）」というボタンがあり、その『絶対位置』ボタンを使っても同じことができる、らしいです。
AIがそう言ってました。
私にはなんのこっちゃかまだわかりませんが。そのボタンがどこにあるのかもわからん。わからないものを紹介しようもないので、理解出来たらまたメモ代わりにご紹介します。
追記：『絶対位置』ボタンについて
例のボタン、これだそうです。右上にある枠に囲まれた四角。
このマークを押すとオートレイアウトを無視して上に乗せることが出来るそうです。
つまり、私のやり方はとっくに古いうえに手間がかかるので紹介する意味もなさそうですが（たぶん私も今後は使わぬ）、オブジェクトにシュッシュと逃げられる理由自体は説明できてるので、この記事はその点だけでもお役に立てるかなと残しておきます。……せっかく書いたんだし。
