Features: Auto Layout

Figma tutorial: Auto Layout navigation menu

“In this video we’ll teach you more advanced Auto Layout techniques to create a navigation menu using the button we created in the previous video.”

Issue #32
Feb 1, 2021
#Auto Layout

Figma tutorial: Auto Layout button

“In this video, we’ll teach you the basics of using Auto Layout by creating a button from a single text layer.”

Issue #32
Feb 1, 2021
#Auto Layout

How to make tables in Figma 2020 — finally well (AutoLayout 3.0 update)

Using the power of AutoLayout 3 to build a table with reorderable and resizable columns and rows.

Issue #29
Dec 13, 2020
#Auto Layout

Figma’s Auto Layout

Pablo Stanley released the first chapter of his Figma Crash course with five videos on Auto Layout.

Figma in 5: Auto Layout

A new video in Rogie’s short video series.

Hack to create a zero width/height frame

A smart hack that can be useful with Auto Layout. (In the last issue, I included a different solution.)

I just found out a @figmadesign trick to create 0 width/height frame. You won’t be able to do this by using Frame (F) tool or by entering 0 as the width/height of your frame. Then how?

Create a line, and frame it. Then delete the line. pic.twitter.com/2kqFgJt6br
— Rukma W. Pratista (@rukmawp) November 30, 2020

Issue #29
Dec 13, 2020
#Auto Layout

Two ways to size and distribute spacing

Tom Lowry shows how resizing and distributing spacing (Packed vs. Space Between) works.

#FigmaTip: Heres a quick tip with two different ways to size/distribute spacing using the latest updates to Auto Layout in @figmadesign. Hope you all like it! pic.twitter.com/LxE8Yz19vc
— Tom Lowry (@negativespaceca) November 19, 2020

Text underline hack

Cool Auto Layout hack for creating custom text underlines.

Ever wanted to do sweet little link styles in figma like different colored underlines or even backgrounds that still obey auto-layout? @rogie taught me this neato trick. https://t.co/OSNaBoUyaq
— Matthew (@whale) November 25, 2020

Figma Crash

A new course with deep dives into powerful Figma features by Pablo Stanley, creator of a popular collection of illustrations Blush. The first chapter on Auto Layout will be available on December 1st.

Magic Layout concept

A plugin concept by Jordan Singer for automatically applying Auto Layout constraints and resizing.

Magic Layout plugin concept for Figma ✨

Automatically apply Auto Layout constraints and resizing to your layers. pic.twitter.com/stWNvOIFiu
— jordan singer (@jsngr) November 22, 2020

Animating new Auto Layout options

Miguel Cardona shows how the “Fill container” resizing option can be animated.

Like, I'm just getting started with it, so use a little imagination here, but the fact that you can smart animate new @figmadesign auto-layout options will save a ton of time.

Here the only difference between the frames is the "fill container" option on the middle doodad. pic.twitter.com/TBnDj3ctru
— miggi from figgi (@miggi) November 19, 2020

How Auto Layout works with child layers

Rogie explains hug, fixed, and fill resizing options. The demo of building a to-do list and a table with Auto Layout is really impressive!

Here's a quick run-down on how @figmadesign's improved Auto Layout works with child layers:

≺≻ Fill
≻≺ Hug
⊢⊣ Fixed#FigmaTip pic.twitter.com/2SBx8qkVTV
— ˗ˏˋrogieˎˊ (@rogie) November 20, 2020

Office Hours: Auto Layout

Designer Advocates Rogie King and Anthony DiSpezio show how the updated Auto Layout works, discuss the best practices, and answer questions from the audience.

Figma Auto Layout playground

As usual, Figma created a cool interactive playground for the new update. This is the best way to learn how it works and what changed.

Issue #28
Nov 29, 2020
#Auto Layout

Behind the feature: the making of the new Auto Layout

Willy Wu, Software Engineer at Figma, shares the backstory on the previous versions of Auto Layout, the product tradeoffs that were made, and how the feature has evolved over time. Seeing how the decisions were made really helps understand the feature better.

Setting and maintaining consistent space between items with the new Auto Layout

Designer Advocate Joey Banks shows a preview of what’s coming in November. Can’t wait!

Cannot wait for everyone to experience the new Auto Layout features that are coming soon to @figmadesign! Setting and maintaining consistent space between items, like the tabs in a navigation bar, has become so much easier! ↔️📏 pic.twitter.com/1H8WmwkLb1
— Joey Banks (@joeyabanks) September 21, 2020

Embracing the tension between code and design

Announcements from the above keynote, presented as a blog post. “We believe in embracing concepts from engineering and design, adopting the rigor and reusability of code while preserving the rapid iteration and uninhibited exploration that makes visual design so powerful. […] When code and design components mirror each other, teams can move much more efficiently. Today, we announced Variants, Interactive Components, and improvements to Auto Layout that will allow teams to do just that.”

Design like you code with Auto Layout

“Elements can fill their containers in both directions; you can set independent padding values; and items can be set to space between.” (Coming in November.)

💪 Auto Layout is getting more flexible, and has a fresh new look.

Elements can fill their containers in both directions; you can set independent padding values; and items can be set to space between. Coming soon! #ConfigEurope pic.twitter.com/m7VItOdpuL
— Figma (@figma) September 17, 2020

Issue #23
Sep 20, 2020
#Auto Layout

Anyone else using spacers in Figma’s Auto Layout?

Can’t wait to see what they’ve got!

We’ve got something brewing that I think you’ll like ;–)
— Rasmus Andersson (@rsms) August 20, 2020

Build it in Figma: Design responsive and resizable forms

The 3rd part of the series focuses on creating constraint-based field components with Auto Layout to build forms that scale to various browser sizes.

Issue #19
Jul 27, 2020
#Auto Layout

#Auto Layout