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.

Luis shows how to descope and unpublish primitive variables from the design system.

I rely on Luis for thought-provoking organization and design systems insights. In this thread, he discusses a way to translate brand colors into primitive and semantic color scales. At work, I use two design systems — one made by a smaller team where the same designers control the brand, design system, and product, and another from a larger organization with these are separate functions. I can see how his approach of explicitly using brand colors in primitives can work well in larger orgs.

An interesting idea on using a composite style with an alpha channel for a hover state instead of creating variables for every variant. Won’t work in every case, but it was interesting to learn that the same overlay approach is used in Material 2.

Luis is rethinking the relationship between variables and styles. The future typography tokens are a great example, but even today this applies to styles with more complicated color fills. TL;DR: ​“Create variables in a private space, feed them into styles, and publish only styles to consumers.”

Luis with an interesting approach to documenting use cases or ​“intentions” of specific color levels in a palette. The color scales documentation from Radix recommended in the comments is also a fantastic resource. See also Luis’ Documentation template for colors in the Community.

Luis shows that if your styles have multi-mode variables as their values, Swap Libraries still works for managing theme swapping in a multi-brand setup.

Ridd interviews Luis Ouriach about using variables for his Deep Dives podcast. ​“Luis goes deep into strategies based on team size, provides naming guidance, and even breaks down how he thinks about structuring libraries with variables in Figma. Lastly, Luis shares a behind-the-scenes of his journey as a designer advocate and even gives a unique prediction for how AI will take shape inside of Figma.”

Luis updated Figma’s public UI2 design system file with all the features and elements introduced since its last update in 2019. His process is fascinating to follow and shows how much work went into this little update! Also has some great tips on plugins and the organization of a large design system.

Luis Ouriach with an introduction to variables and a primer on how to structure your variable collections for single and multi-brand systems.

Continuing with taxonomy, check out this discussion about naming tokens for a toggle switch UI element. Don’t miss the insight from Ryhan on how Figma approached this in their UI2 design system.

Luis shares good tips and thoughts on using, naming, and organizing color variables, as well as setting up modes for themes. Additionally, he summed up all of the above into a Variable starter kit on the Figma Community.

An in-depth session by Designer Advocate Luis Ouriach and Design Systems PM Jacob Miller on how you can level up your design system in Figma for better scalability, theming, and more using variables.

Luis Ouriach made a starter kit for documenting your components and tokens on the Figma canvas. ​“With this method, we take a set of core styles (primitive tokens), and then ​“alias” them into tokens specific to components. It’s worth noting that aliasing is not technically happening, we are using the hyperlink feature within Figma to link from our semantic, component tokens back to the primitive styles within the same file.” Love seeing a Designer Advocate publishing a token starter kit a few weeks before Config 👀

A useful freebie from Luis Ouriach — 360 badges, pills, and tags in the full-color palette range.

In this video, Darshan Gajara from Consistent Creators podcast talks to Designer Advocate Luis Ouriach about his role at Figma, overcoming burnout, building an audience, and the breakdown of his viral Twitter threads.

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.

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

Luis keeps digging into different ways of structuring Figma libraries and styles. In this thread, he thinks through naming conventions on styles and explores the pros and cons of more abstract and specific naming conventions.