FigmaのAuto layoutを活用して良かったことを3つ紹介します

例えばこのような入力フォームを作るとき、下記のような変更はよく起こるかと思います👇

・入力フォームに「コーヒー好き歴」という項目を追加する必要ができた
・「よくある質問」の回答文が変更された（文字量が大幅に増えそう）

このような変更って地味にコストがかかるんですよね...
やりたいこととしては、「ただ一項目追加するだけ」「ただ文章を直すだけ」だけど、その変更によっていろんな箇所のデザインの微調整が発生するし（項目数が多かったら尚更）...
とFigmaのAuto layoutを使いこなせていなかった時の僕は思っていました。

ですがAuto layoutを使ってデザインデータを作成するようになってからはそのような気持ちにならなくなりました。そこで、この記事では「Auto layoutを活用して生じた3つイイこと」をご紹介します！

1.デザイン変更＆修正への腰が軽くなった

冒頭でもあった通りAuto layoutを使えていない時は、要素の変更によって、いろいろな箇所のデザインの微調整が発生することがありました...
特に要素間のマージンの調整が多かったです。「行の挿入」や「文章の変更」という修正箇所そのものにかける作業よりも「行の挿入や文章を変更するためのマージンの調整」の方が時間がかかることも多くありました。

Auto layoutを活用できていると、パディング、マージンを常に一定に保つことができ、行う作業は「行の挿入」「文章の変更」だけになります。

こんな感じでパッと修正に対応できます👇（GIF）

その結果、変更＆修正への腰が軽くなりました！
プロダクトを改善していく上でこの作業に対する腰が軽い（時間の面でも気持ちの面でも）のは実はすごい大事なことだと思っています。

2.エンジニアさんとのコミュニケーションが取りやすくなった

Auto layoutを活用するためにはパディングやマージン、デーブルや要素の幅をデザインデータ上でしっかりと定義する必要があります。デザインデータでその辺りがしっかり定義されていると実装との差異も少なくなくなります。また、そもそも可能なレイアウトなのかもある程度Auto layoutで検討がつくようになりました。

3.耐久性の高いデザインになった

プロダクトを改善していく上で、デザインの変更は必ず生じるものです。Auto layoutを活用し要素の変更に強いデザインデータを作ることは、プロダクト改善の改善スピードにも大きく影響します。

さいごに

ということでこの記事では「Auto layoutを活用して生じた3つイイこと」をご紹介しました。
僕もまだまだ勉強が足りていない部分があるので、よりプロダクトの成長に貢献できるデザインデータ作りをできるよう勉強していきたいと思います！

最後まで読んでいただきありがとうございました。