オートレイアウトの余白でアイコンサイズを調整したいが小数点になる。解決方法はありますか？

こんにちは、カイクンです。
今日も、コミュニティ「BONO(ボノ)」に寄せられた質問に答えていきます。レッツラゴー！

‍

質問はこちら

①iconのサイズについてです。iconにオートレイアウトかけて余白をつけることでタップ範囲を確保したいときに、＃icon→Shift＋Aすると、＃iconのサイズに小数点が自動でついてしまって余白をつけてもキリのいい数字にすることができないという現象が起きます。これってなんででしょう？

②結局これって別でフレームを用意してその中に＃iconを入れるのが正解ですか？Figmaのリンク内でも質問内容を書き込みましたので確認いただけると嬉しいです。
初歩的な質問で申し訳ありません！

いえいえ、初歩的な質問してください〜！

‍

回答サマリー

• オートレイアウトは中の要素に伴ってサイズが大きくなる
• 正解はオートレイアウトの余白使う必要がない

‍

オートレイアウトは中の要素の大きさになる

オートレイアウトをかけると中の要素の大体の大きさに、Frameのサイズが自動で変化します。
今回のアイコンが微妙なサイズ感（アイコンの線の中心に、Figma上はサイズが当たる）なので、小数点になることもあると思います。
かつ、アイコン自体が正方形のサイズではないので正方形にもなりません

‍

正解は？→ アイコンは画像素材なのでオートレイアウトする必要がない

ちょっと元も子もないですが、アイコン自体は実装上「画像素材」として扱うので無理に以下のようなことをする必要がないです

▼ アイコン素材の部分でやる必要がないこと

• オートレイアウトをかける
• オートレイアウトの余白で正方形にする

理由としては

• アイコン素材自体は「正方形」かつ「同じ正方形サイズ」で管理する
• そのためサイズは全て一定→無理にオートレイアウトでやる必要はない
• アイコンは画像素材として使われる
• オートレイアウトは実際の実装上でどう余白をつけるか、レイアウトするかの仕組みである。

なのでオートレイアウトの余白でサイズを調整する必要がそもそもありません。
これが正解かなと思います！

‍

オートレイアウトでやりたいなら

余白でサイズを調整せずに、Frameのサイズを固定サイズで変更しましょう。
Cmd/Ctrl を押しながらクリックして引き伸ばしたりすることでFrameのサイズだけ変更できます。

‍

‍

BONOメンバーからの質問を募集中です

質問はこちらのページのフォームから！
https://www.bo-no.design/question

‍

‍

‍

こんにちは、カイクンです。
今日も、コミュニティ「BONO(ボノ)」に寄せられた質問に答えていきます。レッツラゴー！

‍

質問はこちら

①iconのサイズについてです。iconにオートレイアウトかけて余白をつけることでタップ範囲を確保したいときに、＃icon→Shift＋Aすると、＃iconのサイズに小数点が自動でついてしまって余白をつけてもキリのいい数字にすることができないという現象が起きます。これってなんででしょう？

②結局これって別でフレームを用意してその中に＃iconを入れるのが正解ですか？Figmaのリンク内でも質問内容を書き込みましたので確認いただけると嬉しいです。
初歩的な質問で申し訳ありません！

‍

回答サマリー

• オートレイアウトは中の要素に伴ってサイズが大きくなる
• 正解はオートレイアウトの余白使う必要がない

‍

オートレイアウトは中の要素の大きさになる

オートレイアウトをかけると中の要素の大体の大きさに、Frameのサイズが自動で変化します。
今回のアイコンが微妙なサイズ感（アイコンの線の中心に、Figma上はサイズが当たる）なので、小数点になることもあると思います。
かつ、アイコン自体が正方形のサイズではないので正方形にもなりません

‍

正解は？→ アイコンは画像素材なのでオートレイアウトする必要がない

ちょっと元も子もないですが、アイコン自体は実装上「画像素材」として扱うので無理に以下のようなことをする必要がないです

▼ アイコン素材の部分でやる必要がないこと

• オートレイアウトをかける
• オートレイアウトの余白で正方形にする

理由としては

• アイコン素材自体は「正方形」かつ「同じ正方形サイズ」で管理する
• そのためサイズは全て一定→無理にオートレイアウトでやる必要はない
• アイコンは画像素材として使われる
• オートレイアウトは実際の実装上でどう余白をつけるか、レイアウトするかの仕組みである。

なのでオートレイアウトの余白でサイズを調整する必要がそもそもありません。
これが正解かなと思います！

‍

オートレイアウトでやりたいなら

余白でサイズを調整せずに、Frameのサイズを固定サイズで変更しましょう。
Cmd/Ctrl を押しながらクリックして引き伸ばしたりすることでFrameのサイズだけ変更できます。

‍

‍

BONOメンバーからの質問を募集中です

質問はこちらのページのフォームから！
https://www.bo-no.design/question

‍

‍

‍

‍