#Joey Banks
Résumé Templates
Joey Banks published a community file with a few Auto Layout resume templates to remix, use, customize, and call your own.
Naming Variants
Joey Banks shares how he typically names Variants in Figma and the approach he tries to take whenever he is feeling stuck.
Naming in Figma
Joey Banks talks about his approach to organizing and naming in Figma.
Base Components
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.
Figma Focus: Frames vs. Groups
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?
File Thumbnail Kit for Figma
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.”
Adding emoji to component & layer names
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
Todo list with Interactive Components
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
macOS Monterey UI Kit for Figma
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.
Match Variant properties & names with what’s reflected in the code
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
Joey Banks recommends Figma shortcuts
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
iOS 15 UI Kit for Figma
A few things I wish I had known earlier on for working in Figma
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. ↔️
Double-clicking on the edge of a text box
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
The difference between using Packed & Space Between in Auto Layout
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
Individually copy and paste effects
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 to Create a Segmented Control
Using Interactive Components & Variants in @figmadesign to create a quick segmented control. ↔️✨ pic.twitter.com/VEfAxc9PG7
— Joey Banks (@joeyabanks) March 15, 2021
Before and after Interactive Components
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
Toggle Switch
Creating my very first set of interactive components in @figmadesign. 🔥🎛️ pic.twitter.com/apIht8EpFb
— Joey Banks (@joeyabanks) February 26, 2021
Segmented Control component
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