こんにちは、決済認証システム開発事業部の飯髙です。
普段はAndroidアプリ開発に携わっています。
最近はアプリ勉強の傍ら、Figmaを利用してデザインの勉強を進めております。
前書き
レイアウト、って組むの大変ですよね。
どれくらいのパディングを取るか、どう並べるかなど、手動で全て調整するのには手間がかかってしまいます。
そんな時に役立つのがFigmaのオートレイアウト機能です。
オートレイアウト機能を活用することで画面サイズの変更にも強いデザイン、「なんちゃってレスポンシブ」を作ることが出来ます。
ここではオートレイアウト機能の説明や、「なんちゃってレスポンシブ」の作り方に関して説明します。
オートレイアウトとは？
オートレイアウトはその名の通りレイアウトを自動で調整・配置する機能です。
オートレイアウトの適用は
①適用したいオブジェクトを選択
②Layout欄にあるオートレイアウトボタンをクリックする
で行えます。
適用されると、Layout欄がオートレイアウト専用の設定項目となり、適用した要素は1つのフレームにまとめられます。
・Width,Height ：フレームサイズの変更
・Alignment ：要素全体の整列方法の変更(どちらに寄せるか)
・Direction + Gap ： 要素の整列方法の変更(要素を縦・横・折り返しで並べる)、要素間のスペース変更
・Clip content ：フレームからはみ出した要素の表示・非表示
などの設定を行えます(以下、いくつか設定してみた例)。
より詳しい内容はFigma公式のヘルプセンターの記事*1が参考になります。
また理解しておくとオートレイアウトをより使いやすく出来ることが2点ほどあるため、そちらの説明をします。
Fix,Hug,Fill
オートレイアウトを適用した要素等のWidthとHeightに対して適用出来る設定です。
・Fix ：要素の幅を固定
・Hug ：要素の幅を子レイアウトに合わせる
・Fill ：要素の幅を親レイアウトに合わせる
こちらを設定しておくことで、レスポンシブデザインを実現出来ます。
ですが、設定的に難しい箇所、デザインを直しにくくなる部分あるため、「なんちゃって」くらいが丁度良いです。
オートレイアウトの無効化
オートレイアウト内でオートレイアウトを利用したくない場合などに必要な設定です。
その場合、オートレイアウトを無効化したうえで個別の設定を行う必要があります。
オートレイアウトの無効化は
①オートレイアウト内の無効化したい要素を選択
②Position欄のレイアウト無効化ボタンをクリック
以上でオートレイアウトが無効化出来ます。
オートレイアウトを無効化した要素だと、そのままだと拡大・縮小した際に追従しなくなってしまいます。
そのため、レスポンシブにしたい場合はConstraintをScaleなどに設定しておくのがおすすめです。
「なんちゃってレスポンシブ」実践
以上を踏まえたうえで、なんちゃってレスポンシブを実践します。
今回は簡単なページデザインを例に取って、要素ごと→全体にオートレイアウトを適用していきます。
それぞれの要素ごとの並びやpaddingを簡単に調整出来るようにするために行います。
レイヤーパネル(要素が並んでいる左側のタブ)での線やテキストなどの並びがバラバラになっていることが多いため、この際に整頓しておくと後々分かりやすいです。
テキストだけ、など単体のものに関してはフレームで囲ったうえでオートレイアウト化します。
・トップのテキストをフレームで囲い、オートレイアウト
・Blog部分(Blogとline)を選択して、オートレイアウト
・Card(コンテンツ部分)をオートレイアウト、Directionをswap,Clip contentを適用
・フッター内部の要素をオートレイアウト後、全体をオートレイアウト(内部のオートレイアウト設定は割愛)
全体をオートレイアウト化する際は、要素の選択漏れなどが無いようにレイヤーパネルから確認して選択するのがおすすめです。
③全体的な調整
各要素にpaddingの適用やAlignmentの微調整を行います。基本的にはそれぞれの要素にpaddingを20設けて、WidthにFillを適用しています(親コンポーネントに追従するように)。
そのためCard部分の高さをFillにする、もしくはフッターのオートレイアウトを無効化することでフッターを下辺に付けることが出来ます。
今回はCard部分の高さをFillにして対応しました。
合わせて全体を囲うフレームの背景を白にして、なんちゃってレスポンシブ完成です！
まとめ
オートレイアウトは活用出来ると、修正が入っても手間のかからないデザインを作成することが出来ます。 多用することで丁度良いレスポンシブデザインを組むことも可能です(Fix,Hug,FillやAlignmentをうまく利用しましょう)。 オートレイアウトを上手に取り込み、より柔軟なデザインを作成していきましょう！
テコテックの採用活動について
テコテックでは新卒採用、中途採用共に積極的に募集をしています。
採用サイトにて会社の雰囲気や福利厚生、募集内容をご確認いただけます。
ご興味を持っていただけましたら是非ご覧ください。
tecotec.co.jp
