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!
A few small improvements to variables, the biggest being the ability to copy and paste (but not move) variables across collections and show their values on hover. Other updates improve the authoring experience by adding new variables under selection, tabbing through fields, and resizing columns. See a video demo from Chad Bergman or read the release notes.
These improvements are very welcome, but after a year of using variables, I still rely on a mix of random plugins for most organizational tasks. My not-so-short wishlist for Config 2025: moving variables between collections and libraries, seeing where they’re used, replacing one variable with another, detecting unused variables, reviewing deleted variables still in use, and suggesting variables based on the value. Alright, 2026 might be a better target.
Easily create flexible, modular typography scales. Peppercorn generates a sample scale with a documentation sheet, text styles based on variables, and even generates code in a few standard formats.
Really well-made video tutorial explaining masks in Figma: “We answer questions such as: What is a mask? How does it work? How do you use it in Figma? We demonstrate advanced usage and share real examples from our projects.”
I covered October updates in the previous issue, but now you can watch the recording of the second episode of Release Notes with advocates Jake Albaugh and Kaitie Chambers.
New tools for managing no longer needed projects by moving them to trash, recovering, or permanently deleting.
A new analytics tool for Figma prototypes — create a unique tracking link that intercepts user interactions with your prototype and reports them back to you as stats and recordings. As a big fan of user screen recording tools, I’m looking forward to trying it out for testing.
Mark Foo from Figma shows how Dev Mode addresses common issues in design handoffs by providing a unified workspace where developers can access up-to-date design elements, annotations, and measurements directly within Figma. With features like version comparison, sandbox testing, and integrations like Code Connect and Jira, Dev Mode aims to streamline development workflows, improve efficiency, and foster a cohesive design and development environment.
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.
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.
You can now lock sections in FigJam to prevent them from accidentally being moved.
1) Add new template styles to your decks directly from the styles overview modal. 2) Rename and delete template styles. 3) Draft presenter notes with AI — “just add one line of text to your slide and let AI do the heavy lifting.” 4) You can now edit your presenter notes in Presenter View. 5) The Multi-edit is now available in Figma Slides.
“In the Figma desktop app, you can now double-click on the tab you’re working in to rename your file.”
You can now download your prototype or slide deck to view or present offline.
The modal you use to swap instances of a component has been upgraded in UI3 and now matches the layers panel, with folder nesting and options for list and grid views.