Luis shows how to make slot components more useful by “outsourcing” the component composition to a main component, whilst still allowing for completely flexible content within.

Finally a solid improvement to detaching instances.

A new video from Lauren with a deep dive on when to use variants vs. variables with modes.

The second guide introduces the concept of “container queries”, which are slowly gaining adoption in CSS and will fundamentally change the way we approach responsive design. Christine compares the current approach of using media query breakpoints with container queries and investigates how to imitate them with the current Figma features.

Two new articles in the UX Collective from Christine Vallaure, who graciously shared free “friend links” with Figmalion readers. The first one explores a new approach to creating responsive designs with variables and modes, whereby components automatically adapt to the screen size they are placed on and only resize within the provided breakpoints. In this case, variables automate which component gets displayed and set stops at certain minimum and maximum points to stay inside your breakpoint range. I had no idea that string variables can be used to select a variant of the component 🤯

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.