Features

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

Change Starting Frame in a prototype

Nifty little time-saver.

Did you know about this @figmadesign shortcut? I just discovered it and it's handy when working on complex documents 🤓 pic.twitter.com/v9hYzU37aE
— Adrián Mato 🐙 (@adrianmg) December 1, 2020

Issue #29
Dec 13, 2020
#Prototyping

Change text block to Auto Width

It’s not clear from the video, but all it takes is a double-click anywhere on a text frame.

Omg, wish I knew this before! This would have saved me years! 😂 @figmadesign #figtrick What are you going to do with your new gained time?🍷 pic.twitter.com/E5WWUijYYf
— Silvia Bormüller (@svorklab) December 1, 2020

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

Variants Pal plugin concept

Alex built a plugin concept to automatically generate missing variants and add labels.

It's Maker Week at @figmadesign, so I made a Variants Pal plugin concept! 👀

Generate missing variants and add labels automatically. ✨ pic.twitter.com/EpztwnDIDy
— Alex Einarsson (@alexeinars) December 4, 2020

Gameboy emulator

Sawyer Hood made a plugin that runs a Gameboy emulator inside of Figma and renders the output as vectors to the canvas. Not available in the community yet, but the source is already on GitHub.

For maker week at @figmadesign I really wanted to do something wild, so I made a plugin that runs a gameboy emulator inside of Figma and renders the output as vectors to the canvas. pic.twitter.com/M7up2Gb2a8
— Sawyer Hood (@sawyerhood) December 7, 2020

Play Asteroids in Figma

Another Maker Week project — a plugin to play Asteroids with friends.

Figma in 5: Auto Layout

A new video in Rogie’s short video series.

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.

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

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

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.

#Features