Choose a color, style (solid, dotted, or wavy), thickness, and offset of your underlines.

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.

A new libraries modal optimized for adding and browsing relevant libraries. Highlights of this redesign include a new recommended tab and overall improvements to performance and navigation.

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.

The annual UX Tools survey is one of the best ways to spot trends and new tools. Please take 5–10 minutes to complete it.

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

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

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

Nick Babich shows how to create a responsive grid system and explains the difference between Center and Stretch grid types, as well as how to calculate the right gutter and margin for different viewports. See also his layout grid cheat sheet.

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.

Damiano Redemagni shows how easy it is to build a Figma plugin with Cursor from start to finish.

An open-source SDK to create Figma plugins without the hassle.

AI is a big help in developing software, but this plugin takes it to another level: ​“Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed — simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin.” See examples in a thread from one of the authors.

Joseph Mueller recreated the NYT Connections game as a fully playable Figma prototype. Took me a couple of attempts to solve, but I got it!

Cool illustration made entirely in Figma by Marina Budarina.

Brand designer Jamey Gannon made a commercial pitch deck template for early-stage founders raising VC capital. She built dozens of decks in her career for her own rounds or others and used this experience to design this template.

Nice hand-drawn brush strokes to use in your designs.

A new plugin from Daniel Destefanis for creating mesh gradients either by hand or by using the colors from an image. Available on Figma Community or as a standalone tool.

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

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