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.

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. 

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.”

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.