見出し画像

【Figma】編集中、制約(Constraint)が表示されないんだけど

以前、Figma編集中、どうしても、制約(Constraint)が見つからない場合があったが・・・、わかってしまえばなんてことはない。
ということでメモ。


■おさらい

通常操作だと、特に問題なく制約(Constraint)は表示されるはず・・・。

まず、複数オブジェクトをグループ化した後、グループをフレームに設定し直す。

複数オブジェクトをグループ化

設定方法は、プロパティパネルのグループをクリックしてポップアップメニューを開き、フレームに設定する。

セクション、フレーム、グループ

※フレーム化については、上記以外の方法は、マウス右クリックメニューで、選択範囲のフレーム化 を実行すると1回の手間で済む。

マウス右クリックメニュー

で、フレーム化できた。

グリープがフレームに設定された状態

フレーム内のオブジェクトを選択すると、
プロパティパネルに制約(Constraint)が表示される。

制約が表示された状態


■絶対座標として表示されるケース

複数オブジェクトを選択後、オートレイアウトを適用して、フレーム化した場合、少し注意が必要。

オートレイアウトを適用してフレーム化

この状態だとオブジェクトを個別選択しても制約は表示されない。
この状態は、オートレイアウトが有効なので、オブジェクト毎に無視設定する必要があるオートレイアウトを無視して絶対座標優先)。

フレームのオートレイアウトが有効な状態

そこで、プロパティパネルの絶対座標をクリックする。

絶対座標

すると制約(Constraint)が表示される。<解決!

制約が表示された状態


■オートレイアウトと一緒に制約が表示されるケース

複数フレームが階層状態になっていると、適用したオートレイアウトと制約(Constraint)が一緒に表示される場合がある。

参考チュートリアル動画を視聴している時に、気づくときがあるが、このような入れ子のレイヤー構造等に慣れていない時期は、自分で再現できずにモヤモヤするのかも。

オートレイアウトと一緒に制約が表示される


■関連記事

以上。

いいなと思ったら応援しよう!