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.

That’s what I love about this community so much. Fons Mans shared an idea for the plugin, Rogie stepped in and offered to build it, and three days later they already had some WIP. Don’t know if I need this plugin yet, but seeing this collaboration makes me so happy.

Zen Keys is a new plugin from Corey Lee that extends the Quick Actions menu to provide more keyboard accessibility for Figma features that don’t have dedicated shortcuts. Spend less time reaching for your mouse and lean into Figma zen mode with keyboard actions. (Something is cooking with the Quick Action bar, isn’t it?)

Somewhat related to the previous article, Ridd looked for a way to account for optical balance when icons are hidden from a button. Jordan suggested a smart solution of wrapping the label in an Auto Layout with an additional smaller padding that adds up with and without the icon.

“Our new Community Libraries Beta offers the building blocks you need to start designing, right at your fingertips. As part of the Beta, users on free plans will have access to a special selection of community wireframing, UI, and icon kits. Just click into the Assets panel and Library modal to browse through the featured libraries and design faster than ever.”