Have ​“ghost” variables in your file and need to get rid of them easily? Here is how to easily detach deleted variables still lurking in your file, as explained by Miggi.

Speaking of Molly, only 2 weeks left to enroll in the upcoming cohort of her 5‑week Design System Bootcamp. I rarely recommend paid content, but have full confidence in her course as one of the most featured authors in this newsletter and creator of the popular UI Prep design system. Figmalion readers can save $100 with a coupon code FIGMALION100.

Molly Hellmuth shares a few tips from her recent talk ​“Design System Traps & Pitfalls” at Smashing Conference. Here are the five ways to de-risk variable adoption for your design system — create a map for your token structure, start using variables with numbers only, use variables and color styles together, stress-test new features, and roll out changes gradually.

Something must be (hovering) in the air, as Ridd also shared his thoughts on selecting a color for the hover state with the right amount of saturation.

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.

In August, Figma rolled out the ability for users to rate and review community resources. Social features are tricky, and many plugin developers (including myself) felt discouraged by the unexpected side effect of receiving one-star ratings without any comments or feedback. Figma is listening and iterating, and this week will be rolling out more changes — ratings are gone and ​“likes” are being brought back as a way for users to tell that they’re enjoying a resource. Users will still be able to leave comments to share their feedback and authors could directly reply to them. Great to see this level of care and involvement with the community!

Ridd is back with a video and a thread on choosing the right variable types for updating the state of components.

Dan Mall is a designer, author, speaker, entrepreneur, and one of the most prolific educators in the design systems space. In this Shortcut profile, he distills his experience into ten pieces of advice for tackling complex tasks, preventing burnout, and fostering continuous learning.

Roman Shamin and Evil Martians keep building amazing tools for working with colors. Harmony is a beautiful color palette built with a primary focus on visual contrast and accessibility. It provides an equal contrast within lightness levels and consistent chroma (thanks OkLCH!), mirrored contrast pairs for light and dark modes, P3 gamut support, and Figma variables support. A great example of how a modern color palette should be built. Make sure to read Roman’s thread with all the nitty-gritty details of building this palette.

Molly shows how to add real interactions to your prototypes. Variables make this slide show really easy to make.

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.”

Dylan Field, founder and CEO of Figma, looks at the relationship between designers, developers, and AI, in conversation with a16z’s David George. In the process, he also demoes Jambot, their new AI widget for FigJam. Love this quote from Dylan: ​“It [AI] will lower the floor for who’s able to participate in the design process, but also raise the ceiling of what you can actually do.”

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.

Molly Hellmuth with tips on the best ways to name, organize, use, and theme color variables.

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 🤯

Molly with step-by-step instructions for using rem units in your text properties. The developers on your team will be grateful for using the same units as they do when it comes to the handoff time!

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.

Figma 101 before the school starts from Miggi: ​“In this workshop we will cover the basics of working with Figma for design covering topics like creating graphics, working with typography, and making reusable components. This workshop is intended to help you get more familiar and confident with Figma whether you are just beginning your design journey, or applying your existing knowledge from another tool.” See also his Homework Hotline livestream follow-up.