今回もタイトルが如く、Figmaでコンポーネントを作ったものの、サイズ変更が適応されない時の解決法を記録しておきます。
どういう状況？
例えば、下の図のような猫ちゃんのイラストをコンポーネントにするとします。
このコンポーネントをもとに、デザイン上で縮小して使用する時、事件は起こります。
なんということでしょう…
サイズを縮小すると、そこには正方形にトリミングされた猫ちゃんが。
これでは猫なのかネズミなのかアザラシなのかわかりません。
ちなみに拡大するとこんな感じになります。
猫ちゃんのサイズが変わらないまま枠だけ拡大されてしまい、一緒にでかくなってほしいのに！！となります。
原因
この問題の原因は、コンポーネントに設定しているレイヤーの下、アイコン自体のレイヤーの位置設定にあることが多いです。
上記イメージにある「img」レイヤーの情報を見てみます。
右パネルの「位置」設定を確認し、「制約」部分が「中央」、または「左・上」などになっていると、コンポーネント内の要素がその位置で固定されてしまい、コンポーネントのサイズを変更しても「img」レイヤーはサイズそのまま、位置も指定されたところから動かなくなります。
画像などをコンポーネント化して、サイズに合わせて自動でトリミングしてほしい、という時には大変便利なのですが、アイコンやイラストではちょっと困ります。
解決方法
右パネルの位置設定の制約を縦・横どちらも「拡大縮小」に変更します。
以上！
それだけ⁉︎という感じなのですが、なんとそれだけで解決します。
（コンポーネントをオートレイアウトにしている場合、位置の制約が設定できなくなるのでフレームに変更しましょう）
まとめ
コンポーネント全てにこの設定をする必要はなく、制約が有効な場面もあるので、使い分けていくのが良いと思います。
今回のような設定は、以下の要素をコンポーネント化するときに便利です。
- レスポンシブ対応させたいイラストやグラフィック
- スマホ版とPC版でサイズを変えて使い回したいアイコン
- 比率を保ったまま大きさを変えたいバッジやラベル
せっかく労力をかけてコンポーネントを設定したのにうまくいかないよ〜〜というストレス軽減の助けになれれば幸いです。