Articles

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

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.

“How do you design an app for 431 diverse national parks and monuments? By taking a page from iconic NPS park brochures. Learn how a small team adapted Massimo Vignelli’s seminal design system for a digital interface.”

“After months of iterative development, including a closed beta and continuous refinement using our eval plugin, we were ready for a broader launch. Looking back, shipping this work was guided by four key principles: 1) AI for existing workflows: We applied AI to streamline tasks that users already perform, like file browsing and copying frames into their current file. 2) Rapid iteration: We continuously shipped updates to our staging environment, using insights from our internal beta to refine features. 3) Systematic quality checks: We developed custom evaluation tools to monitor and improve search result accuracy. 4) Cross-disciplinary teamwork: Our success stemmed from close cooperation across product, content, engineering, and research.”

Claire Butler, a marketing lead at Figma, shares three principles that help market to designers or other groups of passionate experts. Make sure to watch the video she is referring to.

I furiously nodded while reading her second lesson: ​“If you can come up with and understand all of the content, you haven’t gone deep enough. Whatever you are doing will come across too generic, and thus will not resonate. They’ll sniff you out.”

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

A great written interview with Katie Dill, Stripe’s Head of Design, about craft and quality, functionality and beauty in products, rituals to level up product quality, and keeping quality a priority as companies scale.

Mizko explains how to use Sections when prototyping in Figma: ​“When presenting your final output with Sections, Figma remembers the user’s last viewed frame. This ensures that when the user returns, it will show the previously viewed frame first. This creates a more comprehensible transition of your prototype.”

Smashing Magazine interviewed Björn Ottosson, the Swedish engineer who created Oklab color space, about developing an effective model with good hue uniformity that handles lightness and saturation well, and how it spread across the ecosystem.

One of the most common problems that Oklch solves: ​“One problem with sRGB is that in a gradient between blue and white, it becomes a bit purple in the middle of the transition. That’s because sRGB really isn’t created to mimic how the eye sees colors; rather, it is based on how CRT monitors work. That means it works with certain frequencies of red, green, and blue, and also the non-linear coding called gamma. It’s a miracle it works as well as it does, but it’s not connected to color perception.”