Molly Hellmuth had Brad Frost, author of Atomic Design, as a special guest at one of the recent cohorts of her Design System Bootcamp course. Molly’s students asked him so many great questions that after the Q&A, he recorded a video answering them again for a wider audience. Topics include design systems, workflow, atomic design, the future of design systems, buy-in, designer-developer collaboration, personal development, and global design system stuff. 

The next cohort of Molly’s 5‑week course starts on January 13th, which is the last scheduled cohort for now. Molly generously offers Figmalion readers $100 off with the coupon code FIGMALION100.

Ridd interviewed Andrei Herasimchuk, who had one of the most enviable design careers as an interface designer of Photoshop, Illustrator, InDesign, and later the first designer at Figma, with stints at Twitter, Yahoo, and Booking in between. I’ve been following him since the Adobe days, but I had no idea he also contributed to Figma early on!

A new plugin from Meng To turns Figma designs into production-level code with the power of Claude AI and GPT-4o. I mentioned it in the last newsletter, and it looks very promising so far. The plugin is free, but you’ll need to bring your own API keys.

Watch the video where Meng explains his Figma to SwiftUI code workflow.

Molly Hellmuth with a tip on using the ​“Ignore auto layout” feature to add a scrollbar to the menu, among other things. It’s one of my favorite features, making it easy to preserve Auto Layout while making designs more realistic and interesting.

A new introductory Figma tutorial from Miggi, updated for UI3. It covers basic concepts like shapes, vector graphics, typography, resizing, Auto Layout, and applying them all to build a simple user interface card.

Steven Levy from WIRED discusses with Dylan Field how Figma is reinventing design tools to meet the needs of tomorrow’s creators and the evolving role of designers in an AI-driven world. I was so happy that Steven asked Dylan about his hoodie and let the fascinating nerdery unfold.

Dylan Field talks about startups and European regulation on stage at Slush 2024.

Meng To is working on a free plugin (requiring API keys) for turning designs into code using Claude.

Luis measures and compares the performance of a complex component built as a single mega-variant vs. nested and bubbled instances. While the nested instance approach is faster and more maintainable, he shares a few alternatives that are worth considering.

Designer Advocate Ana Boyer: ​“UI3 prompted us to rebuild our own design system from the ground up. Here’s how designers and engineers came together to create a new foundation for building consistent, accessible products.”

Ridd brings up an important point — design systems became too complicated and associated with scale, but they’re still the perfect first step for startups. The solution is to keep things simple and focus on a few basic components and primitives in the ​“design toolkit”.

I had a few conversations about building design systems lately, and my general approach was to start from scratch only if a dedicated team is working on it. Most often, picking an open-source component library like shadcn/​ui or similar and customizing it to your needs is a much faster and more aligned approach.

Vijay shows how to create a cool flower illustration in a few simple steps.

Joey Banks on creating responsive and robust components within Figma: ​“Creating a component in Figma is relatively easy. However, building a component that works well in various situations and for different screen widths and heights using tools like constraints and auto layout can be more challenging and intimidating. Let’s first talk about those tools and how they work within Figma, and I’ll share the techniques and practices that have helped me ensure I’m building reliable components for those depending on the system.”

Jenny Wen on the design process: ​“The way I’ve seen great work made isn’t using any sort of design process. It’s skipping steps when we deem them unnecessary. It’s doing them out of order just for the heck of it. It’s backtracking when we’re unsatisfied. It’s changing things after we’ve handed off the design. It’s starting from the solution first. It’s operating on vibes and intuition. It’s making something just for the sake of making people smile. It’s a feeling that we nailed it. It’s knowing how to bend the process in your favor. It’s the sense to know how to keep making your work better. And it’s a clear, unwavering ideal of what good looks like.”

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.