Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #28

November 30, 2020

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

📄 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.

🌎 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.

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.

🐦 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!

🐦 Two ways to size and distribute spacing

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

🧵 Animating new Auto Layout options

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

👀 Magic Layout concept

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

Using Figma

🌎 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.

📄 How We Build Our Design System

Jonathan Saring shows and explains the process of creating a design system with components to standardize and scale the UI development process at Bit.

🐦 Text underline hack

Cool Auto Layout hack for creating custom text underlines.

Figma in 5: Vectors I

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.

Figma Tips and Tricks

YouTube channel by Figma Community Advocate Rusmir Arnautovic with short educational videos about Figma.

Figma for Teams

First official Friends of Figma London event on making documentation, guidelines, and onboarding easier for teams.

In the File: Designing for 7.8 billion people

“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

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

SystemFlow is a new designer-first, utility framework for Webflow and Figma, with 1000+ CSS classes, pre-built components, layouts, and more.

DesignKit

DesignKit by Rafal Tomal is an all-in-one wireframe kit, style guide, and design starter template.

UXToolset

UI kit for creating wireframes, diagrams, prototypes, and handoff documentation.

Plugins

Figma To Video

Figma To Video 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.

Shaper

Shaper Plugin with all the necessary shapes and basic forms that you may need on a daily basis.

Easing Gradients

Easing Gradients Bézier and step easing for gradient fills. Highly useful for creating smooth gradients.

Find & Replace

Find & Replace A simple plugin for finding and replacing strings, with Regular Expressions support.

Community

🌎 Stormtrooper Icon

Cool icon illlustration by Mirko Santangelo.

🐦 Geometric Shapes

Cool patterns and face mask by Toni Gemayel.

🌎 Classroom Bulletin Board

Virtual bulletin board to post updates for the class, pin highlights, and share resources.

Book “Designing in Figma”Designing in FigmaNew book

Archive