
【Figma】編集中、制約(Constraint)が表示されないんだけど
以前、Figma編集中、どうしても、制約(Constraint)が見つからない場合があったが・・・、わかってしまえばなんてことはない。
ということでメモ。
■おさらい
通常操作だと、特に問題なく制約(Constraint)は表示されるはず・・・。
まず、複数オブジェクトをグループ化した後、グループをフレームに設定し直す。

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

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

で、フレーム化できた。

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

■絶対座標として表示されるケース
複数オブジェクトを選択後、オートレイアウトを適用して、フレーム化した場合、少し注意が必要。

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

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

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

■オートレイアウトと一緒に制約が表示されるケース
複数フレームが階層状態になっていると、適用したオートレイアウトと制約(Constraint)が一緒に表示される場合がある。
参考チュートリアル動画を視聴している時に、気づくときがあるが、このような入れ子のレイヤー構造等に慣れていない時期は、自分で再現できずにモヤモヤするのかも。

■関連記事
以上。