The modal you use to swap instances of a component has been upgraded in UI3 and now matches the layers panel, with folder nesting and options for list and grid views.
In this clip of the Sneak Peek episode, Dion Chooi shows how LottieFiles organizes and uses components in Figma.
Molly recommends organizing components with sections to provide a hierarchy in the Assets panel and allow viewing components with a specific background color. Pro tip: set a background to a “danger” color for deprecated components.
Christine Vallaure shares an updated list of her old favorites and plenty of new tips, highlighting what you might have missed when working with components in Figma. (Thanks for the friend link!)
Ridd explains how to make your components easier to use by exposing nested instances.
“The Washington Post’s inclusive process for creating new design system components bridges the gap between design and development to make features that help navigate the news online.”
Designer Advocate Mal reminds us that it’s crucial to consider the discoverability of components when building a set and points to a new feature of the Assets library that shows a number of component variants and a playground for exploring them.
A set of benchmarks to level up the quality of your Figma components and define what constitutes a good component. The content is divided into two sections: “Design”, featuring items that can aid in crafting a component; and “Testing”, containing considerations for testing your component before final publication.
Chad shows how to use variables to change a variant on a component instance in your designs.
Chad shows how to use variables to change your variants on nested component instances when setting a mode.
Did you know that you can use variables to change your variants on nested component instances when setting a mode in @figma? Here's a quick tip showing it in action!
— chad (@dotdude) January 18, 2024
Are you already using variables with nested instances in your design files? I'd love to see what you're making! pic.twitter.com/z2YXNccqPt
In the second part of his monumental article, Luis covers “how to build adaptable, indexable, logical, and specific components as part of the FRAILS framework.” (The two-part series was strategically published before the Christmas break, giving you some extra time to read it.)
A new long-read from Luis Ouriach published in the Smashing Magazine: “Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls, starting from how to make designers on your team adopt the complex and well-built system that you created to what are the best naming conventions and how to handle the auto-layout of components, indexing/search, and more.”
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.
Figma feature to notify teammates and call the cops if you detach an instance pic.twitter.com/Uo611wLNj8
— Soren Iverson (@soren_iverson) November 7, 2023
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.
👀🔎 Have been trying to figure out how to make nested icons in @figma components inherit color overrides when switching between outline and solid styles without having to outline the strokes. Does anyone know of any ✨ magic ✨ to make that happen? My research tells me no... pic.twitter.com/aamVgToJgQ
— Miguel Solorio (@miguelsolorio_) August 2, 2023
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.
Swap variant instances between modes in @figma using boolean variables.
— MDS (@mds) July 3, 2023
🤔 Doing it right, or missing something? pic.twitter.com/2El1xwahVy