A tutorial from James on creating beautiful background patterns and effects. I haven’t tried the vga blurrific.exe plugin he recommends, but it looks really cool.
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!
The layers panel finally supports lots of nested frames or long layer names with horizontal scrolling.
A new update to Slides lets you bring slides from Figma into a deck with one click.
Meng To is working on a free plugin (requiring API keys) for turning designs into code using Claude.
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!
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.
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.
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.
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.
Choose a color, style (solid, dotted, or wavy), thickness, and offset of your underlines.
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.”
Is this new? Very cool.
Select multiple layers in Figma Slides and apply edits to them all at once.
Component properties can now be bound to variables, unlocking the ability to use translation strings in props. Learn how to bind them together in this video by Chad Bergman or this thread by Jacob Miller.
A fully redesigned eyedropper for UI3 now supports color variables and styles! Rotate between color formats with the Tab key — previously, that could have been changed only in the color panel. Switch between picking the raw color value or a variable/style with a Shift key or creating and applying a new color variable/style by using the shortcut Command-Shift. See an in-depth demo from Ana.
This update is near and dear to my heart, as I talked about color formats and working around a lack of support for styles in an eyedropper back in 2023 at Config. Love that both features are now so straightforward to use!