Features

Our Favorite Figma Plugins

A few plugin recommendations for working with content and data from the team at Simple Thread.

Issue #29
Dec 13, 2020
#Plugins

Play Asteroids in Figma

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

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

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

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

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

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

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

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

Figma in 5: Auto Layout

A new video in Rogie’s short video series.

Figma’s Auto Layout

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

Creating and Using Variants in Figma

A new video by MDS.

The only Figma plugins you need for your workflow

A comprehensive list of Figma plugins for an overall design process.

Issue #29
Dec 13, 2020
#Plugins

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.

Issue #28
Nov 29, 2020
#Auto Layout

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!

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

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

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

#Features