2020年12月3日

デザイン

【Figma】Auto Layout がアップデートされました!

目次

  1. はじめに
  2. Auto Layout機能とは
  3. アップデートで出来るようになったこと
  4. まとめ

はじめに

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダー 3日目の記事です。
昨日は 『figmaがもっと便利になるプラグイン5選とその使い方』 という記事をご紹介しました。

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で過去にわかりやすく解説しているのでそちらをご覧ください。

【Figma】待望のAuto Layoutが登場!

アップデートで出来るようになったこと

image2.png (21.9 kB)

今回のアップデートでは、UIが変更されただけでなく、より細かい設定が出来るようになりました。
加わった機能は大きく3つあるのでそれぞれ紹介していきます。
新しくなったAuto Layoutで、柔軟で使いやすいデザインを簡単に作成しましょう!

要素ごとにpaddingを設定できる

1番右のアイコンで上下左右にそれぞれ数値を入力することができるようになりました。
より精密で柔軟なデザインを作ることができます。

右から2番目のアイコンでも同様にpaddingの数値を設定することができます。コンマで区切ることでcssで書くのと同じ感覚で設定することもできます!

子要素をボタンで上下左右に配置できる

1番右のアイコンで上下左右に要素の位置を設定することができます。
個別に設定したpaddingの数値を保持したまま丁度良い位置に自動で配置してくれるので便利です!
image3.gif (462.5 kB)

また、要素ごとの間隔を自分で設定したり等間隔で自動調整したりすることもできます。
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などのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

6

1

AUTHOR

かっきー

かっきー

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

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

sasai

ささい エンジニア

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

damien

Damien

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

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

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

miyagi

ogawa

ogawa

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

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

CONTACT PAGE TOP