Molly explains how to preserve color and style overwrites when building an icon library.

If you liked Molly’s advice and Q&A above, you’ll get a ton of value from her Design System Bootcamp. Enrollment ends on this Friday, November 8th. The end of the year is the best opportunity to turn any remaining educational budget into new skills. Figmalion readers get $100 off by using the coupon code FIGMALION100.

Molly points to an unobvious benefit of using variables instead of styles for colors — de-scoping, or setting groups of colors to only appear as fill/​stroke options for certain types of objects.

Molly Hellmuth hosted a Q&A with Lewis Healey, Lead Designer for Atlassian’s Design Systems. They discussed how 55 designers on his team collaborate with over 600 product designers and thousands of engineers, ensuring cohesive design through Figma-based foundations and a targeted 95% adoption rate of design standards. Lewis emphasized flexibility in component use, a focus on education through champions and office hours, and precise tracking with custom dashboards to monitor design system adoption across 20 products.

The talented design team at Evil Martians makes a strong case for adopting opacity as a core component of your color system: ​“Transparent colors are a staple of modern operating systems, yet, for some reason, web apps still underutilize this marvel of modern interface design. And what happens when you properly integrate transparent colors into your design toolkit? You can minimize the number of design tokens, styles, and component variations — making your workflow more efficient and flexible.”

Christine Vallaure explains the new CSS property clamp() that I wasn’t familiar with: ​“Think of clamp() as a way to establish a ​“Goldilocks zone” for any value in CSS. Imagine a property that’s not too small, not too big, but just right — that’s what clamp() is all about. It allows you to set a minimum, an ideal value, and a maximum, making your design more adaptable and responsive.” 

While this article focuses on typography, clamp() also can be used for controlling padding, margins, or even widths. Depending on the viewport size, it can adjust in either direction, expanding from the minimum value to the maximum or shrinking as needed. 

A new plugin from Vijay for creating invoices in Figma.

Luis and Molly discuss how every small and large decision was made in Figma’s Simple Design System.

Luis Ouriach: ​“If you’re working in a team with either multiple brands, multiple platforms, multiple densities, or perhaps all of the above you may be stuck trying to figure out how to structure your system/​s in Figma. Here are some loose thoughts on how I’d go about approaching the problem.”

Joey Banks explains how to use constraints to create responsive components that work with nearly endless screen widths and heights. One hidden feature he didn’t mention is a special relationship between constraints and layout grids — see my old article ​“Using Constraints with Layout Grids in Figma” from 2020.

At a recent meetup, Developer Advocate Jake Albaugh shared the story of Figma’s SDS, a UI kit with a realistic code backing to help bridge the gap between design and development. As a reminder, the Simple Design System is available in the Libraries selector, Figma community, and GitHub.

Impressive lightsaber loader effect by Vijay.

In this workshop, Miggi explores approaches to Advanced prototyping in Figma: ​“We‘ll walk through examples using variables and component sets to create dynamic prototypes that are easy to manage and iterate upon. This is an intermediate level workshop and builds on a basic understanding of prototyping in Figma Design.”

Joey Banks with a deep dive on applying and organizing variables in Figma: “…if there’s one thing I’ve learned about variables, it’s that nearly every team takes a slightly different approach when it comes to creating and keeping them organized in Figma. I’d love to recap the many ways I use variables within the components and libraries I make, as well as some of the techniques and decision frameworks that have helped me most, and share with you how I approach creating and keeping them all organized, too.”

Rogie is just showing off with this beautiful artwork.

Vijay always finds the most remarkable applications for the new Figma features. This one uses the new duplicate and rotate.

“Notion, Arc and Figma are teaming up to help you have your best semester yet. Join us for a special Back-to-School webinar featuring an exclusive panel with all 3 co-founder/CEOs (Dylan Field, Figma; Ivan Zhao, Notion; Josh Miller, The Browser Company) reflecting on their student days, followed by demos from fellow students showing how they set up these tools to organize their busy lives (and tame the chaos).”

Joey Banks shows one of the newly announced features. When objects are duplicated, rotated, and then duplicated again, Figma will continue that rotation with subsequent copies of your object.

Jake made a plugin that brings the power of CSS color-mix() into Figma. Use it to generate swatches, variable ramps, and solid or gradient fills. I highly recommend watching Jake’s video if you’re unfamiliar with this CSS notation.

Ridd argues that the pendulum has swung too far, and designers hating on design systems are missing the point. You might not need an enterprise-grade system with all bells and whistles, but every product can benefit from a set of simple components: ​“I’ll suggest design systems are most valuable when you DON’T know what the product will be… Investing in a set of core components minimizes the number of knobs you need to turn in order to iterate.”