#FigmaTip Roundup 10.0
By: Carmel Deamicis
Tags: UX, UI, Design, Technology

We have a special edition of the #FigmaTip Roundup for you this week folks. On Monday, Kiwi web designer Charli Marie released a YouTube review of Figma, which included a roundup of her favorite details in our web-based, collaborative design tool. She wound up inadvertently teaching a few Figma staffers things we didn’t know— like the fact our layers panel cleans itself up automatically.

Since we learned from Charli, we thought you might too. Without further ado, here’s Figma Tips 10.0, studded with quotes from Ms. Marie herself. (Watch her full, original video here and help fund her future videos by contributing to her Patreon here.)

P.S. We never pay for reviews of Figma, and Charli released this video without any Figma support.

Move layers with the shortcut Command + [

In Figma, shortcut keys appear on menus as reminders (screenshot courtesy of Charli Marie)

“In Sketch I was always having to find the layer I wanted and shift it up in the layers panel because I could never remember the shortcut for moving them forward and backward. I love that in Figma it’s the same as in Photoshop — command and a bracket. It’s a super easy shortcut to press, and it makes it really fast to rearrange layers as you’re designing something. I also like that in their menus they show what the shortkey is in case you’ve forgotten.” — Charli Marie

Helpful link: Shortcuts in Figma

Figma groups will auto-delete when empty

Charli’s video shows Figma groups disappearing automatically when she removes all elements

“If you delete all the elements from within a group in Figma, the group itself will disappear, because obviously it’s not a group anymore if there’s nothing in it. It’s a really small thing, but I would find that my Sketch files would get quite messy with lots of groups where I’d moved elements from them but the groups still existed.” — Charli Marie

Copy individual properties to another shape

Charli’s video shows how you can copy/paste a singular property between objects in Figma

“In Sketch you can copy the properties of a shape or object and paste it onto a new one, but when you do that you’re copying all of the properties onto the new shape. In Figma, you can copy all the properties if you want to, but you could also just copy just the fill or the font or the stroke. It means if you got something right in one place, it’s super easy just to apply it to other things.” — Charli Marie

Easily manipulate images using fill settings instead of masks

Charli demonstrates the fill settings in Figma

“In Figma when you drop an image in it actually makes it a rectangle with an image as the fill. So if you want to crop or tile it, you come into the fill settings and make your changes there. That was a little confusing at first, but it’s actually really handy. I’d find in Sketch a lot of the time I’d make a whole bunch of masks to get my image to be the right size. It’s much easier to do that if the image is already — when you put it in — a fill of a shape.” — Charli Marie

Use Figma’s vector networks instead of Illustrator to make complex shapes

“Figma handles vectors in a completely different way to what I’ve seen before — they use what they call vector networks. In usual vector programs a point can really only have two connections to it, but in Figma you can have multiple and it means you can create complex shapes. It just takes a little getting used to, but so far I’ve found that I can do most things I need to do in Figma without needing to open Illustrator.” — Charli Marie