Jan Toman gathered the best practices for creating solid button components.

Mingzhi Cai shares some insights on building components that benefit the team: “After revamping our Figma component library with Auto Layout and component properties last year, my team and I boosted the total insertion of Figma components across our department by over 200% in the second half of 2022. There’s a 48% increase in users saying in the survey that this component library makes their work “much faster.”

Let Destroyer recursively detach instances, remove Auto Layouts, and detach Styles within your current selection so you can iterate faster. When working collaboratively and wishing to quickly try out an idea, it’s always a hassle to detach the component and remove Auto Layouts.

A new video from Figma is going back to basics — what components are, why we use them, and how to create them. See also a couple more new tips on Component properties and Variants.

Learn how to build a dual range slider that is adjustable using Auto Layout so you don't have to create a ton of variants to show different options.

In this guide, Bruno Temporim Carneiro shares a method for structuring Figma components through nesting and organizing variants. This approach allows for easy modification and updates to components.

A good tip from Jan Toman on color-coding different types of components inside a Figma library, which allows everyone to identify the component’s source and set the right expectations from these components.

On a similar note, this thread by Luis is a great walkthrough of debugging, reducing complexity, and refactoring a tricky variant component. The core part of his approach is slicing everything up into composable parts.

Joe Bernstein on confronting the conflict between what’s possible in Figma and what’s practical: “Ultimately, my point here is that I over-engineered this component. Figma has the capacity to be much more than a design tool, and sometimes I use it to engineer a UI. Clearly I enjoy doing that, and I even get lost in the weeds to achieve a deeply technical solution. But design systems and asset libraries are just as much a user-centered design problem as any other publicly facing product.”

Luis with a nifty list of suggested emojis to indicate different kinds of component properties.

One more video by Christine, this time about components — covering everything from simple shortcuts to powerful plugins. Some of the topics include selecting matching layers across all variants, reviewing library updates, linking Figma components to a code base, using the EightShapes Specs plugin, moving components between files, swapping libraries, and using real data in instances.

Tutorial Tim shows how the “Simplify all Instances” feature reduces an overwhelming visual overload in the Properties panel.

Luis with a cool technique for adding focus rings to a button using an absolutely positioned component instead of a shadow hack.

Component properties v2 are out of beta with the ability to bubble up and expose properties of nested instances. It’s also now possible to define a list of preferred instances for swapping. Great for selecting a subset of a larger icons library or working with card components.

“You can now more confidently approve library updates with a visual preview of the changes and the ability to apply them to individual instances and layers.” I don’t even know how I’ve dealt with the stress of accepting library changes sight unseen in the past.

Luis shares a few tips on structuring library files. He recommends optimizing variants for searching and usage rather than maintenance, and suggests this file structure: Page → Section → Variant. Also, check out his other thread on naming and splitting your library files.

Epic thread by Molly Hellmuth on the best practices for using property, variant, and Auto Layout features. She just rebuilt her popular UI Prep design system with the latest Figma features and learned a lot in the process.

Clara Ujiie came up with a simple workflow for visually testing components. (The same tutorial is available as a Twitter thread, if that’s your jam.)

Ridd just launched Dive with an amazing lineup of design educators. In this tutorial, he designs the new Dive website and shows how his use of components to speed up workflow in Figma, talks about visual design principles and his approach to UI design in Figma. Lastly, he shows how easy it is to go from Figma to Framer to a published website.

Now it’s easier to track changes to components and styles. A new icon shows when styles or instances have changed, lets you accept changes for individual instances or layers, and even shows a before vs. after preview! See a quick demo by Jacob Miller.