Joey Banks published a community file with a few Auto Layout resume templates to remix, use, customize, and call your own.
Joey Banks shares how he typically names Variants in Figma and the approach he tries to take whenever he is feeling stuck.
Joey Banks talks about his approach to organizing and naming in Figma.
Joey Banks shared a change in his approach to base components earlier this month on Twitter, and now goes into more details in his newsletter. I often end up with too much complexity because of over-reliance on base components, so this is a piece of welcome advice.
In his new newsletter, Joey Banks answers one of the popular questions — what’s the difference between groups and frames in Figma, and when should you use one over the other?
Joey Banks created a thumbnail template for files in Figma. “Easily add teammates’ avatars, custom fields and statuses, and instance swap between templates or themes.”
Joey Banks with a tip on indicating component or layer status through naming.
If you're creating components in Figma for others to use, adding emoji to component & layer names can really make a big difference!
— Joey Banks (@joeyabanks) November 18, 2021
✏️ = edit expected (helpful for labels)
🔄 = can instance swap (helpful for icons)
🚫 = component no longer supported
✨ = interactive component
Joey Banks creates a simple todo list using Interactive Components, start to finish in 1 minute.
Designing with Interactive Components in @figmadesign, from start to finish 🔁: pic.twitter.com/4NuWZl3ES8
— Joey Banks (@joeyabanks) November 3, 2021
New UI Kit from Joey Banks for the latest version of macOS. Like all other kits by Joey, this one is spectacular and incredibly well done.
Joey Banks with an excellent suggestion on how to bring designers and engineers closer.
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:
— Joey Banks (@joeyabanks) July 12, 2021
⇧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
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! 🙏
— Joey Banks (@joeyabanks) May 12, 2021
1) Hold ⌘ + drag a frame to resize it to ignore any of the constraints set for the items inside. ↔️
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