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

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

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

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

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

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

注:「Constraints」の仕組みを知らないまま作業すると、せっかく作ったデザインが崩れてたなんてことも、、、。
「Constraints」の設定を正しく理解すれば、今後のWebデザイン作業もはかどること間違いなし。
簡単に読めるので、ぜひ最後まで読んでみてくださいね!

原因は「Constraints」という設定

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

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

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

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

2つの方法で解決!

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

  • 「Mac:Commandキー(⌘)」「Windows:Ctrlキー」を押しながらフレームを操作する
  • 「Constraints」機能で要素を固定する

1.「Mac:Command(⌘)」「Windows:Ctrl」を押しながらフレームを操作する

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

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

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

「Constraints」機能で要素を固定する

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

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

全要素の「Constraints」を確認するのは大変

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

  • 1つ目に紹介した方法でフレームサイズを変更する
  • 全ての要素を選択(⌘+A/Ctrl+A)→「Constraints」を設定する

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

まとめ

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

「Constraints」について理解して、これからのWebデザインにぜひ生かしてくださいね!