Some colors have established semantic uses — green for positive feedback, red for errors, and yellow for warnings. But what happens if your brand is based on one of them? Molly looks at how Netflix & Lego, Spotify & Quickbooks, and Hertz & McDonald’s handle this challenge. Her takeaway: either embrace the situation and use the brand color for semantic values, or introduce a new distinct color shade (i.e. orange for errors), but do not use two similar colors for different needs.

Designer Advocate Chad Bergman explains the basics of design systems — what they are, how they work, and how they can change the way you design.

The new video series from Luis Ouriach on variables. The first part introduces the basic concepts and terminology — variable types, collections, modes, and aliases. The second part is ​“The 3 levels of variable” where Luis explains the definitions of primitive, semantic, and component-level variables. The third part focuses on creating your first variables and using modes to manage theming and densities.

“Using variables in your Figma libraries? Learn how to set a default mode for a library that applies to all of your teams and files within a workspace.”

Molly suggests it’s time to support multiple icon sizes with number variables.

Chad shows how to use variables to change a variant on a component instance in your designs.

Christine Vallaure explains the basics of CSS Flexbox and how it translates to Figma’s Auto Layout. ​“Discover how to set up individual flex properties for items and explore the nesting capabilities of Flexbox. While Flexbox is great for component layout, CSS Grid offers more control for overall page layout. Find out how to use both in harmony for optimal design.”

Beautiful kick-off of the Figbruary by Vijay. See more by hashtag #figbruary on Twitter/​X.

Fons Mans shows how to create a simple glow effect inspired by Vision Pro promo at the Apple 5th Avenue store in New York.

Molly praises the Cmd+\ shortcut for showing/​hiding UI, and I want to expand her tip by adding that the Cmd+Shift+\ shortcut toggles only the left sidebar (Layers/​Assets). Keep in mind that Cmd+\ also works in the Present mode — Figma toolbar has been popping up and blocking the navigation in one of my prototypes, so discovering that it could be turned off was a big relief.

Clara Ujiie led Workday’s migration to Figma in 2019. Now as a Designer Advocate at Figma, she helps other teams through similar transitions, sharing ways to work better together. Based on these experiences, she is offering a blueprint for teams adopting Figma.

I have a dedicated tag #Switching to Figma for this topic, but out of 60 shared stories only one was added in the last 2 years — a pretty good indicator of adoption.

In case you said goodbye to Dev Mode last week, Molly Hellmuth recommends a few plugins to help fill in the gap — Annotate It, Print Variables, Frame History, EightShapes Specs, and Handoff Notes.

I’ve seen a lot of confusion over the removal of the Inspect panel and the introduction of Dev Mode, so happy to see a detailed walkthrough of the free viewer experience recorded by Tom Lowry. Pretty much everything from the old Inspect panel is still available for free, and Dev Mode builds on top of that foundation. While some will inevitably label Dev Mode as a ​“money grab”, I won’t be surprised if many teams will save money by converting full Design seats to standalone Dev Mode seats.

An inspiring story from Corey Lee on becoming a Figma Designer Advocate in Japan through community work and advocacy. ​“I’d never heard of a Designer Advocate but after reading the role description I realized all the things I had been doing up until that point all related to the role: advocating for design, enabling designers, creating content, and building community. I already was a designer advocate.”

Ridd goes deeper into one of the topics they’ve covered with Molly and suggests questions to ask yourself before committing to a new Figma feature or workflow. One common theme in all three of his ​“regrets” is complexity — just like in code, it can be considered a detectable ​“smell”.

So excited for this episode of Ridd’s Deep Dives podcast with Molly Hellmuth! They get into the nerdier side of Figma and discuss adopting variables, making sure you don’t invest in a Figma strategy that you’ll regret later, Molly’s favorite design systems plugins, and how she’s building components differently in v8 of her UI Prep design system.

A month of 29 daily Figma challenges starts on Thursday, February 1st! The project was started last year by Vijay Verma and this year features challenges from Rogie, Miggi, Pablo Stanley, Vyshnav, Desmond, Steven H‑A, and myself. Looking forward to seeing what everyone will come up with!

Loved Tom Lowry’s thoughts on designer-developer collaboration in this thread. I think most teams agree that the traditional process of throwing designs over the wall to engineers is broken and we need better tools, but I’m also cautiously skeptical of designers working directly with the source within the design tools. While this is already possible for marketing websites (hello, Webflow and Framer!), products and design systems bring a whole new level of complexity and challenges. This iteration of the Dev Mode seems like a first step in the right direction to me, but the road ahead is lengthy but bright.

In this episode of the ​“Tech Chat” podcast, Luis shares his journey, shedding light on how he found his path to Figma and what it’s like to serve as a design advocate.

Chad shows how to use variables to change your variants on nested component instances when setting a mode.