Features

Figma Tutorial: Create the Perfect Typography Scale for UI & Web Projects

Mizko made a good tutorial on creating a type scale using a tool by Jeremy Church. Other videos on his YouTube channel are worth checking out as well!

Horizontal and vertical scrolling presentation slides

Cool demo by Figma Designer Advocate Luis.

How about some horizontal *and* vertical scrolling presentation slides within @figmadesign?

With the scrollTo release last week, we can make some slick multi-axis transitions.

Here's my community file:https://t.co/c0P5xy12HE pic.twitter.com/KhXnN7Sexl
— luis. (@disco_lu) December 14, 2020

How to Make Ultra-Smooth Animations in Figma Motion Plugin

Pavel Babkin shows examples of creating UI interactions, adding special effects, and even animating basic game characters with the Figma Motion plugin.

Issue #30
Jan 4, 2021
#Animation

Cup Icon

What a fun application of Variants!

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.

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

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

How to make tables in Figma 2020 — finally well (AutoLayout 3.0 update)

Using the power of AutoLayout 3 to build a table with reorderable and resizable columns and rows.

Issue #29
Dec 13, 2020
#Auto Layout

Using ScrollTo Interactions to traverse spaces

As soon as Figma releases something new, Miguel Cardona comes up with a great use case.

Yo @figmadesign coming through with the holiday treats!!! ScrollTo Interactions in prototyping solves a problem I've been having for a while...wanting to traverse spaces!

Here is something I whipped up in 5min. I set up an underlying grid of instances to form a grid of targets. pic.twitter.com/3jFGLT4Pqz
— miggi from figgi (@miggi) December 8, 2020

Figma Tutorial: Horizontal & Vertical Scrolling

Sebastiaan Schillebeeckx quickly recorded a tutorial on using Scroll To in prototyping. BTW, great choice of the book on his desk! 😉

Issue #29
Dec 13, 2020
#Prototyping

Figma Scroll to Playground

Use scroll interactions to create fast navigation of your designs. This playground will walk you through everything you need to know to help users explore landing pages, carousels, and more.

#Features