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

Raquel Piqueras and Christina Yang from Microsoft on organizing Figma files and making a few intentional changes which resulted in fewer meetings, higher quality work, a more agile environment, and a few praises from their partners along the way. (Thanks for sharing the friend’s link!)

Great article getting into the nitty gritty details of tokens — why the design community had to invent them, where the influence came from, what problem they solved, how they were adopted by the design tools, and why all of that is happening now. ​“Design tokens are the first time in a lot of years that designers get to step up in the abstraction tower, and think in terms of meaning and purpose rather than concrete hard-coded values. This is a big cultural shift — but an inevitable one.”

A collection of 200+ commonly used components and styles for product and/​or web design. Designed to be used for low-fidelity conceptualizing and ideation activities.

Export icons from Figma straight to React, Vue, or Svelte components.

Daniel Scott recorded multiple video tutorials on using Figma on his popular channel Bring Your Own Laptop for designers and creatives. 

In this video, Sam walks through the features in the Tokens Studio plugin for Figma that allow the creation of variables that are synced to design tokens.

Mini-series showing how to use variables for advanced prototyping on a few example projects by the Design Pilot YouTube channel.

Lenny’s newsletter and podcast are my favorite on all things product and growth, so I’m looking forward to listening to this interview! ​“Claire Butler was Figma’s first GTM hire and their 10th employee. She led Figma’s early GTM strategy from stealth through monetization. She also helped the team through the journey to find product-market fit and built the team that drove Figma’s unique bottom-up growth motion. Eight years later, as Senior Director of Marketing, she continues to lead Figma’s bottom-up growth motion, along with community, events, social, advocacy, and Figma for education.”

The brand new kit with the evolution of Microsoft’s design system. Supports variables, theme switching, and uses memory more efficiently.

New plugin for working with perceptual color and OKLCH color space! This initial release allows inspecting and manipulating color stops in gradients using the OKLCH color space — pretty useful if you have an existing gradient that needs a little tweaking. Bonus point for providing precise control over color stop positions!

An early beta of a new APCA contrast checker plugin from my friends at Evil Martians. Polychrom displays the contrast level between the selection and an automatically detected layer background or two selected layers with solid fills. It also offers text size recommendations for regular and bold font styles, following the APCA contrast-to-font table. Earlier this year I was looking for an APCA contrast checker to recommend in my Config talk and found all existing options lacking, so really happy to see this team building it!

A few good tips on adjusting the color hue, opacity, and evenly distributing color handles.

Somehow I missed that deep dive into color theory, perception of contrast, and human physiology by Andrew Somers, author of APCA and a co-author of the future WCAG 3 accessibility guidelines. ​“This new method directly considers perceptual lightness/​darkness differences of text against a background, and generates a ​“lightness contrast” value, noted as Lc. From here, we can determine the minimum size and weight of a font that is going to be fluently readable, and together these calculated predictions can guide our design choices.” He provides some practical guidelines for the transitional period, where we know that existing guidelines are expected to be revised or replaced. (Worth mentioning that my tool Accessible Palette supports both WCAG 2 and APCA contrast algorithms. Also, see the new Polychrom plugin below.)

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.

I shared this beta’s release notes in the previous issue, but it didn’t show up in my account yet. Cool to see some folks are already trying it out. As Adham Dannaway pointed out, this release is bringing us ​“one step closer to a shared global design system”. Can’t wait!

Allie Paschal writes about her process of migrating the Native Mobile Design System from using color styles to variables. Pretty cool to see that she already adopted a newly released scoping for color variables. I didn’t realize that some companies may not allow external plugins in Figma, so it’s nice to see that this process is completely manual and self-sufficient.

Hamish O’Neill is working on a new Figma UI kit and shares some of the advanced features included in his library. Love seeing a strong focus on accessibility, customizability, and theming!

“The problem with Figma plugins is that the market is really not that big. If you look closely on the Figma marketplace, you can probably tell pretty fast there are relatively few plugins making money. There are some UI kits listed where, if you divide the views/​uses between 100 to get a sense of the revenue, you end up with something like €20-€400 which is frankly not worth the effort.”

I don’t think that’s necessarily true, and know that some creators make significantly more. That said, I wish it was easier to guesstimate the market size for the idea on the Figma marketplace. I love how Etsy shows the number of sales in every shop, and in combination with the number of ratings, it can give a rough estimate of the item’s success.

Behind-the-scenes story on how Figma scaled their performance testing system from a single laptop running in the office to a dream setup built for scale: ​“After considering a few different approaches, we ultimately decided to ship two systems: A cloud-based system would handle mass testing, covering our bases for the majority of situations, and a hardware system would be highly targeted, tackling situations that required more precision. They would be connected by the same CI system, and engineers across product teams would run the same suite of performance test scenarios across them.”