この記事は、【PharmaXアドベントカレンダー】7日目の記事です！
こんにちは、エンジニアの下村です。
主にフロントエンドの担当をしています。
記事の対象者
- デザインツールにFigmaを使ってる
- 意図した形にフレーム作成はできる
- 右のメニューを全く使っていない
- Figma上でレスポンシブデザインを設計したいと思っている
動作環境
Figma Desktop Appバージョン116.8.5
目次
1.はじめに
2.Auto layoutで子要素のレイアウトを編集
3.Frameの大きさの編集
4.Constraintsで子要素のリサイズや配置を設定
5.Inspectで自動生成されたcss確認
6.おわりに
はじめに
本記事ではFigmaの画面の右メニューにある、【デザインパネル】を用いてレイアウトを設定を行うべき理由と、実際の実装方法について紹介していきます。
まず利点について簡単な例を挙げますと、ここにフレームの真ん中にボタンがある画面が２つあります。
一見これら２つに見た目上の違いはありません。
しかし、実はこのフレーム逹には
・ 左のフレームは、手動でフレームにボタンを配置したもの
・ 右のフレームは、デザインパネルを編集してボタンを配置したもの
という違いがあります。
これはどういうことかと言うと
まず前者の
-
手動でフレームを置いている
これはFigmaのスナップ機能に従えば綺麗にフレームの中心にボタンを置くことができるので、手動でボタンを動かしフレームの中心にボタンを配置しています。
対して
2. デザインパネルでフレーム位置を設定している
こちらでは、フレームの位置を手動ではなく
【デザインパネル】の中にある【Auto layout】の項目からフレーム内の子要素をセンタリングするよう設定しています。
これらの方法は、どちらも綺麗にフレームの中心にボタンを配置することが出来ます。
それだけ聞くと、完成品が同じなら手動で置けるほうが直感的でいいじゃん！
と思われるかも知れませんが
手動でフレームを置いている
この方法では、フレームの大きさが変わってしまった場合、ボタンの位置は絶対位置で設定されているため、ボタンの配置はフレームの中心ではなくなってしまいます。
一方
デザインパネルでフレーム位置を設定している
この場合は、フレームで設定した子要素の配置方法を参照してボタンの位置が決定されているため、フレームの大きさが変わってもボタンの配置は中心を維持したままになるのです。
このように、【デザインパネル】の設定を上手く活用することで、フレームの大きさを変更することになっても、子要素の位置関係を崩すことなく、デザインの変更に対応することができるようになるのです。
このように設定を行うことで要素の配置や大きさなどフレキシブルに変えられるようになる方法について紹介していこうと思います。
Auto layoutで子要素のレイアウトを編集
Auto layoutはフレーム内の子要素のレイアウトを設定できる項目です。
この項目で子要素のスペーシングと配置の制御を設定することで、フレームのサイズが変更されたときに子要素が自動的に調整されるようになり、
異なる画面サイズやデバイスに対応したデザインを簡単に作成することが出来るようになります。
alignment
alignment機能ではフレーム内の子要素の配置を設定することが出来ます。
このように、子要素を配置したい場所にアイコンを選択するだけで、左詰めやセンタリングなど子要素の配置を設定することが出来ます。
layout
layout機能ではフレーム内の要素をどう並べるかについて設定することが出来ます。
① Vertical layout
要素を縦に並べる
② Horizontal layout
要素を横に並べる
③ Warp
要素を縦に並べた上で、要素がフレームをはみ出した際は要素を折り返す
between items
between items機能ではフレーム内の要素の間隔を設定することが出来ます。
between itemsでは、pixel数を指定するかAutoで間隔を広げるか項目右にあるDropDownメニューを押すことで選択することが出来ます。
pixel数を指定
要素の間隔同士をpixel数を指定して設定することが出来ます。
Auto
フレームの全体のサイズに応じて子要素の間隔が調整されます。
padding
padding機能ではフレームの余白を設定することが出来ます。
また、項目右にあるアイコンを押すことで上下左右の設定することも可能です。
Frameの大きさの編集
こちらでは、Frameの項目のresizing機能を用いて子要素の大きさに応じて親フレームの大きさを自動でrisizeすることが出来ます。
フレームの大きさが絶対値ではなく、子要素の数や大きさによって変更される設計の場合はこちらを編集します。
Fixed
Fixedはフレームの大きさは設定されたHeight,Widthの固定値にします。
子要素はフレームからはみ出した際に見切れるようになります。
Hug contents
Hug contentsは子要素の大きさや配置、Auto layoutで設定したpaddingによって自動でフレームをrisizeします。
Constraintsで子要素のリサイズや配置を設定
Constraintsは親フレームの変更に対して、子要素の配置及びリサイズを設定出来る機能です。
パッと説明を聞いてAuto layoutと何が違うだ？と思われたかもしれませんが
主な違いは
・ Auto layoutは親要素が子要素に対して配置を設定出来る
・ Constraintsは子要素が親要素の変更に対して配置を設定できる
です。
どちらも子要素の振る舞いを設定するための機能ではあるのですが
それを設定するのが「親要素」から設定するか「子要素」から設定するかの違いになります。
ですので、Auto layoutではなくConstraintsを使う例を挙げると
子要素の配置を一意のレイアウトで設定するのではなく
サイドバーやフッターなどの固定位置に当たる要素を設定したい場合はConstraintsを用いて子要素のレイアウトを設定します。
注意
Auto layoutとConstraintsは同じ要素に対して異なるアプローチでレイアウトを管理する機能なので互換性がありません。
したがって、Auto Layoutを適用したフレーム内の子要素はConstraintsの項目が表示されなくなります。
配置を設定する
以下のプロパティで縦軸と横軸がそれぞれどの位置を基準とするか設定できます。
・ 横軸であればLeft Rightで左右の位置
・ 縦軸であればTop Bottomで上下の位置
また横軸縦軸共にCenterで真ん中に配置することが出来ます。
親Frameの大きさに合わせリサイズさせる
以下のプロパティで親要素の相対的なサイズや位置を維持しながら、子要素のサイズを追従させることができます。
・ 横軸であればLeft and Rightで親要素の横方向のリサイズに対して、子要素が親フレームの左辺と右辺に固定されるようリサイズする
・ 縦軸であればTop and Bottomで親要素の縦方向のリサイズに対して、子要素が親フレームの上辺と下辺に固定されるようリサイズする
また横軸縦軸共にScaleで親要素との比率を維持したまま子要素を均等にスケールさせる事ができます。
Inspectで自動生成されたcss確認
レイアウトの設定方法の紹介については、前の項目で以上になりますが
最後にはじめに説明した恩恵以外に嬉しい要素につてい軽く紹介します。
それが、FigmaのInspectで自動生成されたcssの精度が上がるという点です。
例を挙げますと
まず、以下条件をフレームの要件として定義します。
・ フレームの大きさは、height=430px,width=300とする
・ フレームのpaddingは、上下左右=40pxとする
・ 子要素は左上よせとする
・ 子要素は縦並びとする
・ 子要素同士の間隔は26pxとする
以上の要件で、手作業でレイアウトを行ったものと、デザインパネルでレイアウトを設定したものを用意しました。
デザインデータの見た目上は一切違いがありませんが
これをDev toolのInspectの項目から自動生成されたcssを確認すると
手作業の場合
手作業で作成したCSSでは、Figmaくんが頑張って因果関係を見つけて綺麗なコードにしてくれていますが
フレームの大きさやpaddingなどの要件が一切反映されていません。
なんなら子要素に至っては位置によってはtopやleftなど絶対値を指定しているなど
このcssを実際のコードに流用することはほぼ出来ません。
デザインパネルでレイアウトを設定した場合
一方デザインパネルでレイアウトを設定したフレームのcssは
設定した要件通りのコードを無駄なく出力してくれているので、ほぼこのコードを使用して実装に反映させることが可能なクオリティのcssを書き出してくれます。
css分からなくてもstyleの実装出来ると言っても過言ではありません！
おわりに
Figmaには便利なスナップ機能が備わっているので手動で配置を行っても、
センタリングや等間隔の配置が直感的かつグラフィカルに行えるので、そちらを使われてる方も多いと思います。
その機能が便利で早いのは事実ですし、デザインのプロトタイプを作るのであれば十分なのですが
実際に実装が行われるデザインファイルを作成する際は、これらデザインパネルの機能をフル活用することで
- メンテナンス性の向上
- フレキシブルなデザイン変更への対応が容易になる
- フレームのレイアウトのデザインと実装のすれ違いの防止
- 自動生成されるcssの質の向上により、実装時間の短縮
など、長い目で見れば見るほど恩恵を受けられるようになるので
ぜひデザインパネルをマスターして、デザインファイルの質を向上させ総合的な生産性を上げていきましょう！！
また、PharmaXで以下のイベントを開催します！
ぜひご参加ください！