The new video series from Luis Ouriach on variables. The first part introduces the basic concepts and terminology — variable types, collections, modes, and aliases. The second part is ​“The 3 levels of variable” where Luis explains the definitions of primitive, semantic, and component-level variables. The third part focuses on creating your first variables and using modes to manage theming and densities.

In this episode of the ​“Tech Chat” podcast, Luis shares his journey, shedding light on how he found his path to Figma and what it’s like to serve as a design advocate.

Luis wonders whether variables scoping provides enough semantic modification to justify removing explicit ​“background”, ​“border”, and ​“text” color variables. ​“What’s stopping us from maintaining a single, primitive set of variables, named as such (e.g. red-300) to match your developer’s framework, relying on scoping alone to bridge this gap?” (See the discussion in this thread on X.)

I also like this take from Nate Baldwin — primitive color palettes are inherently semantic because every lightness stop is knowingly created to be used for specific use cases. He supports this idea with examples from his work on Adobe’s Spectrum color palette.

The Designer Advocate team recently hosted another Office Hours AMA focused on the use of variables in Figma. Watch Lauren Andres, Luis Ouriach, Chad Bergman, and Shana Hu discuss nested instance variant binding, applying boolean variables, and a few related questions.

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.

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 👀