Community | Figmalion

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.

Hiding only Layers panel

Miguel Cardona with a good tip: use Cmd-Shift-\ to hide the Layers panel, and Cmd-\ to hide both panels when sharing a screen.

Figma @figmadesign Protip... If you ever want to hide just your layers but keep the properties panel on the right when screen sharing (cuz layers be looking rough sometimes)... just hide only them `Command + Shift + \`

(You can also hide everything with `Command + \`) pic.twitter.com/MMggw86d0A
— miggi from figgi (@miggi) December 3, 2020

Animate Angular gradient strokes

And another tip from Miguel for making simple animated spinners.

Figma @figmadesign protip: You can animate Angular gradients strokes. Make a simple loading animation by rotating the angle of the Angular gradient on a shape's stroke.

s/o to @annehelliott for the question & @BenMendelsohn for the rectangle. pic.twitter.com/aXe1y2DAak
— miggi from figgi (@miggi) December 10, 2020

The Child / Baby Yoda

Another incredible illustration by Joey Lamelas.

Four competing “houses”

Dylan Field introduces four “houses” on Day 1 of Figma’s biannual Maker Week.

It's Day 1 of our biannual Maker Week @figmadesign! This time we added a meta element and divided the company into four "houses" that are competing against each other in various challenges! First challenge = create a name and crest for your house: pic.twitter.com/unEJMZC7xG
— Dylan Field (@zoink) December 1, 2020

One Hundred Patterns

Toni Gemayel runs an open design experiment to collaboratively create 100 patterns.

Great essay by Dylan Field on their decision to build Figma in the browser. “Initially I didn’t understand the negative reactions to Figma’s closed beta launch. I only saw the obvious benefits: a single source of truth for files, cross platform support, and multiplayer editing. Now I understand that the power of the browser lies in the broader cultural change it delivers — and this change can be scary. The browser is natively multiplayer. It forces a mindset shift on access. It strips away the need for expensive hardware. And it pushes us to embrace working together, especially when we are blocked and our default might be to hide.”

Issue #29
Dec 13, 2020
#Dylan Field

Creating and Using Variants in Figma

A new video by MDS.

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

Geometric Shapes

Cool patterns and face mask by Toni Gemayel.

From @figmadesign file to face mask pic.twitter.com/aw7GFSUmLV
— Toni Gemayel (@tonigemayel) November 18, 2020

DesignKit

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

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

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

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.

Rogie: 3 new features to ease communication with your developers

Rogie demonstrates a few recent improvements to the Inspect tab.

A #TotallyRadFigmaTip for you — I cover 3 new features to ease communication with your developers:

🔥 Documentation Link field (just dropped!)
✨ "Parent Component" inspect panel area
✨ Animation panel inspect panel area#FigmaTips

Here's how to do it in @figmadesign: pic.twitter.com/U9cHlxT7Rg
— ˗ˏˋrogieˎˊ (@rogie) November 3, 2020

Using Figma Community resources to design for Android efficiently

A design team at Mono took a dive into the Figma Community to look for high-quality Material Design and Android UI kits. They also show how to bring together components from all these kits into a project library. (Speaking of Mono, check out their free resources in the Community.)

Issue #27
Nov 15, 2020
#Community

#Community