Joey Banks on creating responsive and robust components within Figma: ​“Creating a component in Figma is relatively easy. However, building a component that works well in various situations and for different screen widths and heights using tools like constraints and auto layout can be more challenging and intimidating. Let’s first talk about those tools and how they work within Figma, and I’ll share the techniques and practices that have helped me ensure I’m building reliable components for those depending on the system.”

Joey Banks explains how to use constraints to create responsive components that work with nearly endless screen widths and heights. One hidden feature he didn’t mention is a special relationship between constraints and layout grids — see my old article ​“Using Constraints with Layout Grids in Figma” from 2020.

Joey Banks with a deep dive on applying and organizing variables in Figma: “…if there’s one thing I’ve learned about variables, it’s that nearly every team takes a slightly different approach when it comes to creating and keeping them organized in Figma. I’d love to recap the many ways I use variables within the components and libraries I make, as well as some of the techniques and decision frameworks that have helped me most, and share with you how I approach creating and keeping them all organized, too.”

Joey Banks shows one of the newly announced features. When objects are duplicated, rotated, and then duplicated again, Figma will continue that rotation with subsequent copies of your object.

Recap and wishlist from Joey Banks: ​“While the updates felt a little more iterative this time around rather than innovative, what Figma shared seems to be paving the way for all that’s near and far ahead. In case you missed the product keynote, or if perhaps you’d just like a recap of the highlights from the perspective of a design systems designer, I’d love to share all that’s new with you in this newsletter.”

Joey Banks recaps the Framework announcements. On choosing between styles and variables: ​“Wait, but styles don’t allow for modes, right? Wouldn’t the use of styles prevent us from switching themes or brands? Actually, this is what I’m most excited about with this update, and it’s the further positioning of how styles can be useful in combination with variables. Because all styles (yes, typography now, too!) can use variables, adjusting one variable mode within a style will adjust all variables to reflect that new mode change.”

Joey Banks with the deepest dive on the multi-edit: ​“The team solved and shipped a feature — actually, kind of a whole new way of working within the canvas — to help address a problem I didn’t even know I had.”

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.