Figmaの機能を色々と学習していくと、気がついたことがあります。
「あれ？これって、HTMLやCSSのコーディングと同じやん！」
ホームページのコーディングを熟知している人であれば、
FigmaでHTMLを構築していくような感覚になると思います。
もちろん、コーディングがわからない人でも、デザインはできるというのが、Figmaの強みのようですが、
HTMLとCSSを理解していると、デザインを構築した後の実際のホームページ制作がより効率的になるという事ですね。
Figmaのプラグインで、出来上がったデザインのページをHTMLで出力して、そのままホームページで使えるようにする機能などがありますが、
これらを利用した時に、HTMLに適した構造と適さない構造があるようなので、やっぱりWeb制作を前提にするのであれば、
HTML(+CSS)を理解した上でのFigmaデザインを意識した方がいいかもですね。
そして今回は、Figmaのデザインツールとして絶対に覚えておきたい機能のひとつである、
「Auto Layout（オートレイアウト）」についての学習を進めていきましょう。
Auto Layout（オートレイアウト）とは？
FigmaのAuto Layoutは、
複数のオブジェクトを一定のルールに従って自動配置する機能です。
例えば、
ボタンの中にテキストを配置するとき、
テキストが「送信」から「お問い合わせを送信する」に変わったら、
ボタンの幅もそれに合わせて広がってほしいですよね。
通常の配置では、テキストと背景の長方形を個別に調整する必要があります。
しかし、Auto Layoutを使えば、
テキストの長さや要素の数に応じて、
配置やサイズを自動的に調整できます。
Web制作で考えると、CSSのFlexboxや、要素に応じて伸縮するレイアウトに近い考え方です。
ただし、FigmaのAuto Layoutはデザイン作業用の機能であり、CSSそのものではありません。
Auto Layoutを使う
実際に、Auto Layoutを使うチュートリアルをやってみましょう。
手順1：テキストの作成
Figmaのキャンバスで T キーを押し、
キャンバス上をクリックします。
そこに、「送信する」と入力します。
テキストを選択した状態で、文字色やフォントサイズなどを適宜を設定します。
手順2：Auto Layoutの適用
テキストオブジェクトを選択します。
Shift + A を押します。
テキストを囲むフレームが作られ、
Auto Layoutが適用されます。
テキストを選択してから Shift + A を押すと、そのテキストを内包したAuto Layoutフレームを作成できます。
右側のインスペクタに、Auto Layoutに関する設定が表示されます。日本語UIでは「オートレイアウト」などの項目を確認してください。
ちなみに、混乱しやすい点として、テキストのObjectにAuto Layoutを適用した際に、テキストの親に、Frameが自動的に作成されます。
Auto Layoutでは、このフレームをセットして扱うことになります。
手順3：背景色と余白を設定する
Auto Layoutフレームを選択します。
塗り（Fill）で背景色を設定します。
合わせて、線や各種装飾のセットをしましょう。
オートレイアウトの設定で、上下左右の内側の余白を調整します。
必要に応じて、角の丸みを設定します。
これで、テキストを囲むボタンの土台ができます。
背景色や角丸は、内側のテキストではなく、
Auto Layoutが適用されたフレーム側に設定します。
実際の作業動画はこちら
設定機能の解説
Auto Layoutを使ううえで、理解しておく必要があるのが、次の4つです。
1. 方向
子要素をどの方向に並べるかを決める設定です。
横方向：要素を左から右へ並べる
縦方向：要素を上から下へ並べる
例えば、
アイコンと「送信する」という
テキストを横に並べるなら横方向、
メニュー項目を
縦に並べるなら縦方向
を使います。
2. 間隔
子要素と子要素の間に、
どれくらいの距離を設けるかを指定します。
例えば、
アイコンとテキストの間隔を8pxに設定すると、両者の距離を一定に保てます。
ここで設定するのは、子要素同士の間隔です。
フレームの内側の余白とは別の設定なので、混同しないようにしましょう。
3. 内側の余白（Padding）
フレームの端から、内側にある子要素までの距離です。
例えば、上下12px、左右20pxに設定すると、テキストの周囲に余白が生まれます。
ボタンの見た目を整えるときは、
テキストの位置を手動で動かすのではなく、
この余白を調整するのが基本です。
4. 配置（Alignment）
子要素を
フレーム内のどこに配置するかを指定します。
例えば、
アイコンとテキストをまとめて中央に配置したり、
縦方向のレイアウトで子要素を左揃えにしたりできます。
方向・間隔・余白・配置を組み合わせることで、
複数の要素を規則的に並べられます。
テキストを変更して動きを確認する
Auto Layoutの効果を実際に確かめてみましょう。
作成したボタンの中にあるテキストをダブルクリックします。
送信する を
お問い合わせを送信する に変更します。
テキストの長さに合わせてフレームが伸びる場合、Auto Layoutが正しく機能しているのが確認できましたか？
ただし、
フレームのサイズ設定が固定幅になっている場合などは、期待どおりに伸びないことがあります。
Auto Layoutを適用するだけで、すべてのサイズが自動的に伸縮するわけではありません。
この辺は、Figmaで、構造を作る時に気をつけておく必要がありますね。
Auto Layoutと通常の配置の違い
通常の配置では、
オブジェクトの位置やサイズを個別に調整する場面が多くなります。
一方、Auto Layoutでは、
要素同士の関係をルールとして設定します。
例えば、
ボタンのラベルが変わった場合、通常の配置では背景の幅を手動で修正することがあります。
Auto Layoutでは、適切なサイズ設定をしておけば、
テキストの長さに応じて背景の幅を調整できるようになります。
あとがき
Auto Layoutを使って、要素が内部のコンテンツによって、自動的にフレーム(Auto Layout)サイズが変更されるのが理解できました？
少なくても、ボタンを作る時や、HTMLのdinline-blockなどの要素で、内容に応じた親（今回のAuto Layout Frame部分）のサイズが自動変更できる場合は、
この機能を使うのが良さそうですね。
今回のチュートリアル以外にも、他の設定などを試すと、使える場面などのイメージが増えてくると思います。
わかりずらかった人は、何度もチュートリアルを実行してみましょう。
0 件のコメント:
コメントを投稿