Brilliant tip from Molly Hellmuth — create a special text style for labels where line height aligns to your grid. No matter what variable is used for padding, the height of your UI elements will be a multiple of the base grid. (This is also a nice way to keep your labels aligned with icons.)

Molly Hellmuth shares daily discoveries while working on the UI Prep design system update. There are great tips on pairing heading and body sizes, clearly marking a default text size, avoiding hiding components with a period or underline in the name, scoping variables in bulk, establishing a set of ​“surface” colors, removing a focused state, and including a special data text style for tables.

June 25, 7:30–9:30 AM. ​“Make new connections while stretching your legs, soaking in the gorgeous bay views, and sipping on espresso. Molly Hellmuth and Socrates Charisis will guide you along a coastal trail with views of the Golden Gate Bridge. Afterward, we’ll enjoy some well-deserved coffee on the beach courtesy of Wix Studio!” 

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.

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

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.

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.

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.

Molly Hellmuth suggests building small design habits in a new year that will make future you grateful — sticking to one naming format, avoiding groups, adding thumbnails to files, naming all your layers (good luck!), and unifying the name of your icon shapes.

Molly Hellmuth recommends dividing design system assets into four files for increased flexibility and improved performance. These include Foundations, Icons, Components, and a separate design file with ​“local” assets.

Speaking of Molly, only 2 weeks left to enroll in the upcoming cohort of her 5‑week Design System Bootcamp. I rarely recommend paid content, but have full confidence in her course as one of the most featured authors in this newsletter and creator of the popular UI Prep design system. Figmalion readers can save $100 with a coupon code FIGMALION100.

Molly Hellmuth shares a few tips from her recent talk ​“Design System Traps & Pitfalls” at Smashing Conference. Here are the five ways to de-risk variable adoption for your design system — create a map for your token structure, start using variables with numbers only, use variables and color styles together, stress-test new features, and roll out changes gradually.

Molly shows how to add real interactions to your prototypes. Variables make this slide show really easy to make.

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

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!

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

Molly shares her 3 favorite tips from the Config talk ​“Designer and developer workflows unlocked using Dev Mode” — using ​“Compare changes” (my favorite as well, and the first thing I showed my team!), testing components in the Playground, and switching between the design and Dev Mode by pressing the Shift‑D shortcut.

Molly Hellmuth asked 5 of her go-to design system people — Luis Ouriach, Nathan Curtis, Lewis Healey, Dan Mall, and Maria Christopher — for advice on how to start using Figma variables. My heart goes to Luis’ advice to start in a spreadsheet before jumping to Figma (but that’s also my answer to any life question).

Molly Hellmuth shares five updates you can make with the new min/​max sizing and auto layout wrap that will make a big difference in your designs. Tip #5 on having text grow in both directions is my favorite!

Molly Hellmuth points to five places where her students often get stuck when building component sets in Figma. Matching names of the layers across variants, ordering and grouping properties, rearranging a component set for the most common variant, and breaking down large component sets are all great tips for getting unstuck.