Auto Layout 3 with a new look is here! Now we can control how objects are stretched and distributed within an Auto Layout frame, and set its padding values independently. This update brings Auto Layout even closer to Flexbox layouts in CSS, which is great for aligning code and design. The new UI took some folks by surprise, so take time to go through the links and learn how it works.
P.S. Today is the final day of the Black Friday & Cyber Monday sale of my book Designing in Figma. Right now, the ebook is available for only $15, which is almost 50% off! The book was already updated with Variants and other recent releases, and the next update will include the new Auto Layout. All future updates are free.
— Eugene
Auto Layout 3
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.
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.
Designer Advocates Rogie King and Anthony DiSpezio show how the updated Auto Layout works, discuss the best practices, and answer questions from the audience.
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!
Tom Lowry shows how resizing and distributing spacing (Packed vs. Space Between) works.
Miguel Cardona shows how the “Fill container” resizing option can be animated.
A plugin concept by Jordan Singer for automatically applying Auto Layout constraints and resizing.
Using Figma
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.
Jonathan Saring shows and explains the process of creating a design system with components to standardize and scale the UI development process at Bit.
Cool Auto Layout hack for creating custom text underlines.
New video series from Rogie, where he explores a single topic in just five minutes. The signal to noise ratio is really high, so everyone will learn something. He kicks off the series with vector shapes, but don’t miss Part 2, where he covers vector editing tools.
YouTube channel by Figma Community Advocate Rusmir Arnautovic with short educational videos about Figma.
First official Friends of Figma London event on making documentation, guidelines, and onboarding easier for teams.
“Inclusive design is not about designing for people with disabilities; it’s about creating user-friendly apps for everyone. Maaike Dokter, UX designer at Xablu, and Alejandra Ramos, Graphic Designer/UI at Utilo, share research insights and demo the tools their teams use build accessible products.”
Resources
Flow lets you import Figma and Sketch files, animate them using powerful timeline editing tools, then export production-ready code for iOS or web.
SystemFlow is a new designer-first, utility framework for Webflow and Figma, with 1000+ CSS classes, pre-built components, layouts, and more.
DesignKit by Rafal Tomal is an all-in-one wireframe kit, style guide, and design starter template.
UI kit for creating wireframes, diagrams, prototypes, and handoff documentation.
Plugins
Figma To Video allows you to turn your Figma designs into animated videos. The plugin is powered by a SUPA video editor that helps to fine-tune the animations and the order in which elements appear.
Plugin with all the necessary shapes and basic forms that you may need on a daily basis.
Bézier and step easing for gradient fills. Highly useful for creating smooth gradients.
A simple plugin for finding and replacing strings, with Regular Expressions support.
Community
Cool icon illlustration by Mirko Santangelo.
Cool patterns and face mask by Toni Gemayel.
Virtual bulletin board to post updates for the class, pin highlights, and share resources.
Figma To Video
Shaper
Easing Gradients
Find & Replace