【Figma】フレームをサイズ変更したときに中の画像やアイコンも動く問題をパパッと解決！

この記事では、デザインツール『Figma』でよくあるトラブルの一つ、

「フレームサイズを変更すると、中の要素も一緒に動いてしまう問題」

を、パパっと解決します。

FigmaでWebページをデザインしていると、途中でフレームのサイズを変更することがあります。
フレームのサイズだけを変更したいのに、画像やアイコンなどの要素が一緒に動いたり、勝手に形が変わったなんてことはないですか？

これらの原因には、Figmaの「Constraints」という設定が関係しています。

注：「Constraints」の仕組みを知らないまま作業すると、せっかく作ったデザインが崩れてたなんてことも、、、。

「Constraints」の設定を正しく理解すれば、今後のWebデザイン作業もはかどること間違いなし。

簡単に読めるので、ぜひ最後まで読んでみてくださいね！

原因は「Constraints」という設定

Figmaの編集画面右側にある「Constraints」は、フレーム内で要素をどのように固定するか決めるもの。
上図の赤枠のようにデフォルトではLeftとTopに設定されており、フレームサイズを変えてもその要素は動かないという設定になっています。

ただし、一部の画像やアイコンなど、その設定が解除されていることがあります。

例えば上の図では、3つのアイコンのうち、
真ん中の『instagram』アイコンのみ「Constraints」が解除されています。

そのためフレームサイズを変更すると、『instagram』アイコンも一緒に伸びてしまいました。

この現象を解消する方法は次の2つです。

簡単なのは、1つ目の方法。

「Mac：Commandキー（⌘）」「Windows：Ctrlキー」を押しながらフレームを操作することです。
基本的には、この方法で対応すれば問題ありません。

「command（⌘）」や「Ctrl」には、全ての制約（Constraints）を無視するという役割があります。

二つ目の解決策は、「Constraints」の設定でアイコンを固定する方法。
「Constraints」は先ほどお伝えしたとおり、Figmaの編集画面右側にあります。

フレームに固定したい要素は、あらかじめ「Constraints」をLeftとTopに設定しておくことで予期せぬ誤作動を防げます。

とはいえ、全ての要素を確認するのは骨が折れるので、、

のいずれかの方法で対応するのがオススメです。

今回は、デザインツール『Figma』の「フレームサイズを変更したときに中身の大きさも変わる問題」について解説しました。

Figmaをもっと勉強したい方には、オンライン講座のデイトラがおすすめです。

わたしもデイトラのWebデザインコースを3カ月で無事に卒業し、現在はフリーランスWebデザイナーとして活動しています。

＼最短１０秒で登録可能！／
デイトラを無料で体験する