If you're creating components in Figma for others to use, adding emoji to component & layer names can really make a big difference!

✏️ = edit expected (helpful for labels)
🔄 = can instance swap (helpful for icons)
🚫 = component no longer supported
✨ = interactive component

— Joey Banks (@joeyabanks) November 18, 2021

Designing with Interactive Components in @figmadesign, from start to finish 🔁: pic.twitter.com/4NuWZl3ES8

— Joey Banks (@joeyabanks) November 3, 2021

When it comes to working on design systems, one thing I've learned is how much of a positive difference it can make to match variant properties & names in Figma with what's reflected in code. Any opportunity to bring designers & engineers closer always feels like such a big win. pic.twitter.com/BPsr9zG1Nf

— Joey Banks (@joeyabanks) October 1, 2021

A few @figmadesign keyboard shortcuts ⌨️✨ that help me move a bit more quickly while working:

⇧A: Add Auto Layout (⌥⇧A to remove)
⌥L: Collapse layers
⇧⏎: Select parent (⏎ to select children)
⌥W/A/S/D: Align top/left/bottom/right
⌘K: Create link from text

— Joey Banks (@joeyabanks) July 12, 2021

A few things I wish I had known earlier on for working in @figmadesign—I hope one or more of these can be helpful to someone out there! 🙏

1) Hold ⌘ + drag a frame to resize it to ignore any of the constraints set for the items inside. ↔️

— Joey Banks (@joeyabanks) May 12, 2021

Many of us may already know this shortcut, but just wanted to share in case it's helpful for any designer who's newer to @figmadesign! Double clicking on the edge of a text box will quickly allow you to set its size to be Auto Width, saving you a few seconds of work each time. ↔️ pic.twitter.com/PBUN8oLySE

— Joey Banks (@joeyabanks) May 4, 2021

If you use Auto Layout in @figmadesign, I wanted to quickly share the difference between using Packed & Space Between, which for me, has been one of the most useful and helpful features when building components! ↔️ pic.twitter.com/eDfijFpQdn

— Joey Banks (@joeyabanks) April 14, 2021

Wanted to share something that I wish I had known sooner in @figmadesign, which is that it's possible to individually copy & paste effects just by clicking near the edge of them, within the Properties Panel, and then using ⌘C/⌘V. 📋 pic.twitter.com/HNnh19sNQT

— Joey Banks (@joeyabanks) April 9, 2021

Using Interactive Components & Variants in @figmadesign to create a quick segmented control. ↔️✨ pic.twitter.com/VEfAxc9PG7

— Joey Banks (@joeyabanks) March 15, 2021

The rough amount of screens it took to create this prototype *before* Interactive Components in @figmadesign versus the *single screen* it takes now... 🔥 pic.twitter.com/iMToTNlgHW

— Joey Banks (@joeyabanks) March 2, 2021

Creating my very first set of interactive components in @figmadesign. 🔥🎛️ pic.twitter.com/apIht8EpFb

— Joey Banks (@joeyabanks) February 26, 2021

Using Auto Layout, Variants, and hidden layers to create a Segmented Control component in @figmadesign. 🎛↔️ pic.twitter.com/U53IPDcLay

— Joey Banks (@joeyabanks) February 17, 2021

With Variants in @figmadesign, setting the value of a property to be either true/false, yes/no, or on/off will generate a toggle in the side panel to make it even easier to switch between options! 🎛️ #FigmaTip pic.twitter.com/C2zuDh6lUw

— Joey Banks (@joeyabanks) October 28, 2020

Cannot wait for everyone to experience the new Auto Layout features that are coming soon to @figmadesign! Setting and maintaining consistent space between items, like the tabs in a navigation bar, has become so much easier! ↔️📏 pic.twitter.com/1H8WmwkLb1

— Joey Banks (@joeyabanks) September 21, 2020

If you use @figmadesign in the browser, did you know you can go to https://t.co/MZ5eqKvuqm to really quickly and easily create a new file? ✨ pic.twitter.com/J0D2DRiWwa

— Joey Banks (@joeyabanks) June 24, 2020