Joey Banks spent a lot of time after Config adjusting component libraries to use the new Figma features. In this issue of Baseline, he dives deep into variables and wrote an epic guide on what they are, how he is using them, and a few shortcuts to help make workflows and creation more efficient. My favorite tip on using the number variables: “With your cursor inside an input, tap the equal = key on your keyboard to launch the variable list quickly, or hold Shift + click. To remove a variable, click into the input and tap Backspace twice.” (Note that the = shortcut may go away in the future.)

This part of his conclusion brought back the topic of usability vs. visibility started by component properties: “One thing I still find to be a little challenging within this new way of building and viewing components in Figma is that so much of the previous on-canvas visual representation is now absent using variables. Previously, if there were two density sizes used or if a layer was toggled as hidden within a particular situation, that was easy to see, as we had to build it out as a visual variant. With variables, much of that information, such as sizing, booleans, and color adjustments, is all within the Variables modal and not on the canvas.”

Joey Banks’ recap of everything announced at Config. (I was lucky to meet Joey and share the scene with him at Config, and his deep knowledge of Figma and expertise in design systems are second to none. Highly recommend subscribing to his Baseline newsletter.)

Ridd just launched Deep Dives, “a new interview series full of stories and advice to help you take a huge leap forward in your career”. In the first episode, Joey Banks gives an in-depth look at what it’s like to lead design systems at Twitter and Webflow, shares his strategies for structuring component libraries, working efficiently in Figma, and even keeping up with all of the latest plugins and tooling.

Joey Banks is back with this year’s iPadOS 16 UI Kit for Figma! “This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.”

Joey Banks is back with a bit of advice on his new approach to using Auto Layout for building responsive components. “With my approach today, I first like to drag out an unfinished component instance and stretch it in bizarre and unexpected ways to see what happens. If I can make this component work as expected in the strangest sizes, I’ll feel confident that it’ll work for nearly all situations.”

Joey Banks published an update to his file thumbnail UI kit with dozens of custom combinations, and now even easier to edit with component properties.

Joey Banks explains why new features are so important for the design systems’ work.

Joey Banks is back with five advanced Figma tips — renaming layers in bulk, selecting all objects based on a specific property, Spacebar’s superpower, private components, and using descriptions to improve search.

Joey Banks introduced the new version of his iOS 16 UI Kit just a few days after WWDC 2022. Joey’s kits are fantastic resources for making iOS apps and learning about the organization of a large system. This year, he is also offering a paid version that includes exactly the same files, but by purchasing you'll support the project and receive library updates and video walkthroughs.

Joey Banks on component properties: “In the past few weeks, I’ve had the chance to become more comfortable creating components that contain component properties. What has helped me the most has been to think of this new feature as an additional way, not a separate way, to further organize and create components and variants that scale with the library and system.”

Joey Banks creates a card layout similar to iOS’s Wallet app with negative values within an Auto Layout container.

Joey Banks creates a button component using both Variant Properties and Component Properties.

Joey Banks shares the features announced at Config 2022 that he is most looking forward to using and implementing in his work. Check out his post for a more in-depth take on Component Properties and advanced settings of Auto Layout.

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.