So much goodness in this update! 1) Figma now detects when a new font was installed locally and automatically adds it to the font picker, no refresh is required. 2) The missing fonts modal now groups font families for faster searching and lets you replace the font of a single text node, entire page, or all pages. 3) Set the color, shape (solid, dotted, or wavy), and thickness of text underlines. Plus, choose the underline offset from text and whether it skips ink. 4) Mix and match paragraph spacing or indentation in the same node.

The prototyping and variables modals are now resizable, giving you more screen space for setting up prototyping interactions and viewing the details for multiple actions.

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.

When working in a branch, if you’ve updated variable fields — like scope, code syntax, or publishing settings — Figma will now clearly list those changes in branch review and flag any conflicts between the variables in your branch and those in the main branch.

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

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.

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

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. 

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

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.

Molly Hellmuth hosted a Q&A with Lewis Healey, Lead Designer for Atlassian’s Design Systems. They discussed how 55 designers on his team collaborate with over 600 product designers and thousands of engineers, ensuring cohesive design through Figma-based foundations and a targeted 95% adoption rate of design standards. Lewis emphasized flexibility in component use, a focus on education through champions and office hours, and precise tracking with custom dashboards to monitor design system adoption across 20 products.

If you liked Molly’s advice and Q&A above, you’ll get a ton of value from her Design System Bootcamp. Enrollment ends on this Friday, November 8th. The end of the year is the best opportunity to turn any remaining educational budget into new skills. Figmalion readers get $100 off by using the coupon code FIGMALION100.

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.

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.