2020年12月3日
デザイン
【Figma】Auto Layout がアップデートされました!


はじめに
この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダー 3日目の記事です。
昨日は 『figmaがもっと便利になるプラグイン5選とその使い方』 という記事をご紹介しました。
本記事では2020年11月19日にアップデートされたFigmaのAuto Layout機能についてご紹介します。
新しくなったAuto Layoutで何ができようになったのか、Auto Layoutを使いこなしたい方に向けた記事になります。
なお、Figmaの公式ブログの記事「Behind the feature: the making of the new Auto Layout」でも、Auto Layoutのアップデート内容について解説されているので、ぜひご覧ください。
Auto Layout機能とは
複数のオブジェクトが隣り合わせになっているレイアウトを自動で感知し、補正してくれたり、オブジェクトの中身のテキスト量に応じて自動でオブジェクトの大きさを変えてくれたりする機能です。
テキスト量に応じて幅を調整させたい時や、リストの要素を入れ替える必要がある時にAuto Layoutを使うと簡単に出来るようになります。
仕組みや基本的な使い方について知りたい方は、bageleeで過去にわかりやすく解説しているのでそちらをご覧ください。
アップデートで出来るようになったこと
今回のアップデートでは、UIが変更されただけでなく、より細かい設定が出来るようになりました。
加わった機能は大きく3つあるのでそれぞれ紹介していきます。
新しくなったAuto Layoutで、柔軟で使いやすいデザインを簡単に作成しましょう!
要素ごとにpaddingを設定できる
1番右のアイコンで上下左右にそれぞれ数値を入力することができるようになりました。
より精密で柔軟なデザインを作ることができます。
右から2番目のアイコンでも同様にpaddingの数値を設定することができます。コンマで区切ることでcssで書くのと同じ感覚で設定することもできます!
子要素をボタンで上下左右に配置できる
1番右のアイコンで上下左右に要素の位置を設定することができます。
個別に設定したpaddingの数値を保持したまま丁度良い位置に自動で配置してくれるので便利です!
また、要素ごとの間隔を自分で設定したり等間隔で自動調整したりすることもできます。
Packed では、アップデート前と同様に左から3番目のアイコンに数値を入力して間隔を調整します。
Space Between では、親要素に合わせて自動で等間隔に子要素を配置してくれます。
ちなみに、要素の横並び・縦並びは従来通り矢印ボタンで簡単に変更できます。
表示される場所が移動して、Auto Layoutに関する設定が一つの場所にまとまって便利になっていますね!
子要素のwidth / height の設定がより柔軟になった
Resizingで、固定幅(Fixed)要素に合わせた幅(Hug contents)親要素いっぱいの幅(Fill container)の3つが選べるようになりました。
慣れるまで少し時間がかかるかもしれませんが、左側の四角の矢印だけでも設定することができます。
Fill container が加わったことによって、親要素に合わせて可変する子要素を作れるようになっています!
それぞれのpaddingを維持しながら、要素ごとに理想の幅を設定できるので細かいレスポンシブ化が可能です。
まとめ
以上、今回2020年11月19日にアップデートされたFigmaのAuto Layout新機能についてご紹介しました!
新しく追加された機能は、Inspect 画面にも反映されています。
実装する立場の方も、CSSでデザインを理解することが出来るのでより一層共同制作がスムーズになるのではないでしょうか。
また、figmaの公式「Figma Auto Layout playground」サンプルはこちらからダウンロードすることができます。(今回使用したgifはすべてこのplaygroundからの引用となっています。)
実際に触ってみて、Auto Layoutを使いこなせるようになりましょう!
その他、bageleeでは他にもfigmaの記事をご紹介しているので、もしよければぜひご覧になってください。
Figmaのお仕事に関するご相談
Bageleeの運営会社、palanではFigmaに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
2
0
関連記事

2020年12月11日
『えのすい七五三デジタルフォトフレーム』のデザイン作成フローについて

2020年12月4日
figmaのvariantsの作り方とできること

2020年12月3日
【Figma】Auto Layout がアップデートされました!

2020年12月2日
figmaがもっと便利になるプラグイン5選とその使い方

2019年12月7日
【Figma】待望のAuto Layoutが登場!

2019年12月2日
【Figma】Smart Animate機能でできること
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien
WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト デザイナー

かっきー

きうち

suzuki

taro
xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。
miyagi

ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
