An interesting challenge from Miguel Solorio — how to make nested icons in a component inherit color overrides when switching between outline and solid styles without having to outline the strokes? Two solutions that surfaced in comments are using a mask or a union.

Fantastic post by Developer Advocate Jake Albaugh on how component properties can be translated and aligned between design files and coding frameworks to help designers and developers work better together. ​“Implementing components as a designer in Figma differs from implementing as a developer in a codebase. When you optimize for the developer or designer experience with a component, it is tailor-fit for that specific purpose — even if it shares a name with a component in another environment.”

MDS experiments with swapping variant instances between modes using boolean variables, and Johan Netzler suggests an alternative solution.

Small improvement, but I know it will make many people excited!

Molly Hellmuth points to five places where her students often get stuck when building component sets in Figma. Matching names of the layers across variants, ordering and grouping properties, rearranging a component set for the most common variant, and breaking down large component sets are all great tips for getting unstuck.

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.