2019年12月7日

デザイン

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

目次

  1. はじめに
  2. Auto Layout機能とは
  3. Auto Layoutの設定方法とできること
  4. まとめ

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay7です!

昨日は『AWE Nite Tokyo #6 「AWE EU 2019 Recap」』のイベントレポートについての記事でした。

AWE Nite Tokyo #6 イベントレポート

本記事では2019年12月5日にFigmaに新しく導入されたAuto Layout機能についてご紹介します。

実際にAuto Layoutで何ができるのか、Auto Layoutについてもっと知りたい方に向けた記事になります。

なお、Figmaの公式ブログの記事、「Design more, resize less, with Auto Layout
でも、Auto Layoutについて解説されているので、ご興味ある方はご覧ください。

1.png (436.6 kB)

Auto Layout機能とは

まずは、Auto Layoutについて簡単にご説明します。

Auto Layout (オートレイアウト) とは

複数のオブジェクトが隣り合わせになっているレイアウトを自動で感知し、補正してくれたり、オブジェクトの中身のテキスト量に応じて自動でオブジェクトの大きさを変えてくれる機能です。例えば、ボタンの中のテキスト量に応じて、ボタンのサイズを自動でレイアウトしてくれたり、リストの入れ替えを簡単にしてくれます。

「Design more, resize less, with Auto Layout」より

Figma内でのAuto Layoutの仕組み

Figmaでは、Auto Layoutを実現するにあたり、CSSのFlexboxモデルを踏襲しています。

例えば、Figma内でAuto Layoutを設定すると、その中のオブジェクトが縦、もしくは横方向に並ぶようになっています。

また、中身の全てのサイズに応じて、フレームの大きさも変わります。

Auto Layoutを設定したオブジェクトやグループは自動的にフレームになります

Auto Layoutが設定されているフレームにはpadding, 塗り、ストロークと独自の角丸を設定できるので、レイヤーを追加せずに、そのままそのフレームをボタンにすることもできます。

また、ボタン内のテキストを編集していると同じタイミングで、ボタン自体のサイズも自動的に変更されます。

1.gif (770.5 kB)

Auto Layoutの設定方法

ボタンの場合

Auto Layoutを設定したいボタンを選択し、右サイドバーのAuto Layoutを追加する。
ショートカットキー、Shift + AでもAuto Layoutを追加することができます

2.gif (823.4 kB)

ポイント

ボタンにオートレイアウトを追加すると、一番下にボタンの角丸や背景色などを設定していたレイヤーがなくなり、自動的にオートレイアウトにかかります。

3.gif (537.4 kB)

リストの場合

Auto Layoutを設定したいリストグループを選択し、右サイドバーのAuto Layoutを追加する。
リストではリスト内要素の入れ替え、追加、削除ができます

4.gif (268.0 kB)

Auto Layout内の余白、方向の設定について

Auto Layoutを設定したフレーム内の横padding, 縦padding, それぞれのオブジェクト間の余白、そして方向も簡単サイドバーから変更が可能です。

5.gif (516.3 kB)

リスト入れ替えのショートカット

リスト内のオブジェクトの順番とレイヤーパネルのオブジェクトの順番を見ていただくと、その2つが同じであることが分かります。リスト内の並び順はレイヤーの順番に紐づいており、「コマンド + [」、「コマンド + ]」などレイヤー入れ替えのショートカットでリストの入れ替えを行うことが可能です!その他にも、キーボードの左右上下キーでの入れ替えも可能ですので、ご自身が一番使いやすいショートカットキーを使ってみてください
Auto Layoutに要素を追加する際の挙動

Auto Layoutでは基本的に、作成したフレームよりも小さいものしか要素を追加できないようになっています。
ただし、「コマンド」キー(Windowsの方はCtrl)を押しながら入れると、大きい要素でも入るようになります。
この挙動はこれから通常のフレームにも適用されるので、覚えておくと良いでしょう

6.gif (1.0 MB)

Auto Layoutの入れ子構造

また、Auto Layoutを入れ子にすることで、さらにカード内のテキストを追加したり、カードの移動を簡単にしたりすることができます。

7.gif (990.2 kB)こちらのサンプルでは、カードリスト、カード、ボタンのグループ、ボタンと合計4つのAuto Layoutが設定されています

まとめ

以上、今回2019年12月5日にFigmaに新しく導入されたAuto Layout機能についてご紹介しました!

設定の仕方から、様々な使い方、ちょっとしたショートカットキーなどAuto Layoutを使い始める際に役立つことをお伝えしました。

また、今回記事内でも紹介しているfigmaの公式「Figma Auto Layout playground」サンプルはこちらからダウンロードすることができます。

その他、ベーグリーでは他にもfigmaの記事をご紹介しているので、もしよければぜひご覧になってください。

【Figma】OpenType機能のサポートを開始

最後に、さらに詳しく本アップデートについて知りたい方はFigmaの公式ブログをご覧ください。
「Design more, resize less, with Auto Layout」

Figmaのお仕事に関するご相談

Bageleeの運営会社、palanではFigmaに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

4

0

AUTHOR

sasakki デザイナー

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

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

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

簡単に自分で作れるWebAR

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

palanARへ
palanar

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

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

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

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

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP