はじめに
Figma上で、第三者が作ったデザインデータをはじめて編集するとき、
思わぬトラブルが起きることってありますよね。
その一つが、リサイズ時のオブジェクトの配置・大きさが変わってしまうこと。
たとえば...
このようなデザインに、
下のようなコンテンツを追加して縦幅を広げるときに
なぜか全く別の箇所が動いたり、変倍がかかってしまったりと...
予期しない動作が発生します。
一つひとつは微々たるものでも、修正・調整が重なると、時間がもったいない！
このような現象はどうして起こるのでしょうか？
原因と対策について、しらべてみました！
原因
①オブジェクト同士の関係性に問題がある
チェックすべき項目
- フレームとオブジェクトの位置関係が適切か？
- 親要素｜固定幅orコンテンツに合わせて内包？
- 子要素｜固定幅orコンテンツに合わせて拡大？
- 最小幅・最大幅の設定はされている？
→ 今回は、位置関係について対策の項目で詳細を説明します。
②拡大縮小の方法が適切でない
Figmaには様々なサイズ変更の方法がありますが、
操作方法を変えるだけで思い通りのサイズになってくれます。
用途に応じたリサイズの方法を使い分けていきたいですね。
対策
① オブジェクトの親子要素の関係を理解する
フレームとオブジェクトの位置関係
まずは子要素の位置関係を確認します。
親要素に対して子要素の制約があると、親要素のリサイズに伴って、子要素の大きさも変わります。
自動で調整してくれるのは便利な半面、予期しない挙動の原因にもなります。
ひとつひとつの位置関係の設定を把握することで、想定通りのリサイズの実現が素早くできます。
制約に混在とある時は、位置関係を見直してみましょう。
また、拡大縮小の設定
になっているときも要注意！
変倍がかかってしまい、デザインが台無しになります。
そのなかで、縦幅のフレームを変更したときに影響が出ないようにするには、
横の制約：左
縦の制約：上
に固定します。
※小技として、Shiftキーを押しながら制約を選択すると、選択したオブジェクト全体に制約の変更を適用することもできます。
② コンテンツに応じたフレームにリサイズする
オブジェクトが同じ幅で揃っている様に見えていても...
データ上の見えないフレームにばらつきがあると、
このようにガタガタになってしまう場合があります。
ひとつひとつ直していくのも手間ですよね。
そんなときは、「Ctrl + shift + alt + R」キーを押してみましょう。
フレームがオブジェクトにぴったりと沿ってくれます。
小さなフレームのズレが全体に影響するので、私はこのコマンドを頻繁に使用しています。
③ 倍率を保ったまま拡大縮小する
複数のオブジェクトをドラッグでサイズ変更すると、オブジェクト間の余白が崩れることがよくあります。
ベクターデータも、バラバラになったり...
そんなときは、Figma上でKキーを押してみてください。
右メニューに拡大縮小を数値で指定できる画面が出現します。
数値を指定するだけで、元の比率を保ったままきれいにサイズを変えてくれます！
複雑な設定をせずに、きれいなサイズ違いのデータができるのはうれしいですね！
④ どうしても原因がわからない場合
フレームを右クリックしてオートレイアウトをすべて削除を選択すると、
その名の通り、フレーム内のオートレイアウトの設定が解除されます。
ただ、レイアウトの設定に大幅に影響するので、避けたい手段ではあります。
おわりに
現職でFigmaを本格的に触り始めて、最初に直面したのがこの課題でした。
少しでも作業時間を短縮するためになれば嬉しいです！
今回は以下のサイトから画像を使用しました。
Unsplash
https://unsplash.com/ja
icooon-mono
https://icooon-mono.com/