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

Miggi causes the ​“figception” by using Jambot to come up with ideas for making Figma content. Quite amazing to see how it can be used as a tool for thought (or even programming, FWIW).

A new free and open-source illustration collection from Pablo Stanley: ​“Transhumanism has always fascinated me. It’s a philosophical movement that challenges our understanding of human limitations and our potential to transcend them. It holds the belief that we can evolve beyond our current physical and mental restraints by integrating technology into our very being. It’s about pushing the boundaries of what it means to be human, embracing the fusion of biology and technology, and envisioning a future where we’re no longer constrained by our natural form.”

Vijay Verma made a photo-realistic illustration of the Nintendo Switch console with 150+ primitive shapes, inner shadows, and gradients.

Miggi shows how to make a notification badge that expands to fill its contents with Auto Layout.

A short video on using the bezier curve tool to make an S‑shaped curve.

Molly shares the best practices for working with color that she learned from the Adobe Spectrum design system.

Dan Hollick explains the science behind making realistic shadows and recommends the Beautiful Shadows plugin that takes care of this for you.

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

According to Corey Lee, the copy-pasting of collections is coming soon!

During Maker Week, Rogie built a handy plugin for attaching files to the Figma document for hand-off. Great tool for sharing fonts, high-resolution pictures, or other assets with developers.