Articles

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.

The official announcement and walkthrough of changes.

Justin Jay Wang experimented with different methods for generating random gradient images, including those used by OpenAI visual identity. He explains the difference between heightmaps, layered radials, and AI-generated gradients. Loved this part: ​“In early 2019, OpenAI’s home page displayed a vibrant, full-screen gradient. The implementation was simple: a tiny, 2×3 pixel image of six color stops, which produced a smooth gradient when scaled up by web browsers. It weighed just 85 bytes (about the size of a brief text snippet) and loaded virtually instantly.”

An overview of everything shipped this year. It’s a long list!

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

Erez Reznikov argues that in the next generation of design tools, designing and building digital products will have to abide by the constraints of the platform in which they are coded and tested. ​“The right tool will have to be built for a collaboration. A true collaboration, not a handoff. With developers, because complex products (which will be the vast majority) need them. There’s no avoiding that with dreams of magic AI fairy dust and no-code, no-dev narrow builders, empowering as they may seem.”

Nick Villapiano, the Director of Front End Development at One North: ​“Dev Mode recognizes that developers don’t just implement design—we’re active participants who need our own set of tools. Carving out a dedicated space within Figma allows developers to contribute meaningfully to the design process from concept to launch. By utilizing recognizable patterns and tried-and-true engineering practices as inspiration, we can do so in ways that feel natural to existing workflows.”

Dev Mode now suggests variables when the value matches a style, color, or size, even if it wasn’t specified in the design. The new color picker also moved in this direction, and now I want this principle to be applied whenever my values overlap with a style or variable. It should be easier both for designers and developers to use the right primitives.

Selecting a variable in Dev Mode now opens a pop-up panel that includes values, properties, aliases, collection information, and more. There is also a new view for all the variable collections used in the file. Watch a demo of all the new features.

Figma is opening an office in Sydney, its first in Australia: ​“The​opening of Figma’s Sydney office builds on​Figma’s​impact in Australia and will help deepen relationships​with its growing local community and key​customers​, such as Telstra​and Atlassian, who is also a Figma integration partner and investor. ”

A story of how Figma’s brand team audited and refreshed their website design system: ​“Our latest brand refresh proved the perfect impetus: From our new Figma Sans typeface to our revamped illustration style, we wanted to create a cohesive look that represents who we are now, and that meant bringing it to life across our website, too. This story is about our journey—but we hope that it can also serve as a catalyst for other design systems teams looking to improve their own systems. Whether you’re dealing with component sprawl, struggling with color management, or figuring out how to organize your type styles, we hope that you’ll find actionable approaches here that you can apply to your own work.”

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

Nate Baldwin on the vast difference between the needs of tokens in an authoring vs. a consumption workflow: ​“We have approached design tokens from the perspective of a consumer ever since their inception. This has created a host of challenges the industry has not been able to solve. That’s because we need a perspective shift — the design tokens you consume are not the design systems you create.”

If you’re curious about the new wave of AI-based development tools, I found this review of Cursor quite insightful: ​“A few months into using Cursor as my daily driver for both personal and work projects, I have some observations to share about whether this is a ​“need-to-have” tool or just a passing fad, as well as strategies to get the most benefit quickly which may help you if you’d like to trial it. Some of you may have tried Cursor and found it underwhelming, and maybe some of these suggestions might inspire you to give it another try.”

If you work in the WordPress ecosystem, there is a new WordPress Design System library for Figma intended to streamline the design process: ​“This library contains Figma styles and components that mirror the base UI components found in the @wordpress/components package, and icons found in the @wordpress/icons package. They are stable, fully supported, and ready for use in projects.”

Atlassian explores how the partnership with Figma overcomes common challenges within the product development lifecycle by providing insights into this integrated toolset that empowers distributed teams to work seamlessly.

This in-depth explanation of the font-size property continues the topic of web typography. Even if you don’t care about CSS, the text tools in Figma are based on web typography, so it’s good to understand how they work: ​“For accessibility purposes font-size is only a vague measure; readability and contrast cannot be derived purely from it. It requires something more along the lines of a ratio between font-size (as in height) and font-width — and font-weight on top. And then there are also the visual qualities of the font design that come into play; some typefaces are squiggly but decorative handwritten ones and some are minimalist functional sans-serifs.” 

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