The official announcement and walkthrough of changes.

Figma will raise prices and change the billing experience next year, as explained by Tom Lowry. (My heart goes out to him for being the face of this change.) The cost of the Professional plan goes up by 33% from $15/​month or $144/​year to $20/​month or $192/​year. (Consider switching to the annual billing before the price goes up!) The seat on the Organization plan increased by 22% from $540 to $660 per year (the cost of the Dev Mode seat didn’t change), and on the Enterprise plan by 20% from $900 to $1,080.

To soften the blow, all paid seats now include FigJam and Slides. The Dev seat became available on the Professional plan for $15/​m or $144/​year (the cost of the Full seat before the price increase). Slides is now bundled with FigJam on the new Collab seat, available for $5/​month or $36/​year on the Professional plan and $60/​year on other plans.

The new admin experience finally provides an upfront control of how users get upgraded. Later next year, they plan to roll out Connected Projects announced at Config, so freelancers and agencies won’t need to pay twice for seats.

A new plugin from Meng To turns Figma designs into production-level code with the power of Claude AI and GPT-4o. I mentioned it in the last newsletter, and it looks very promising so far. The plugin is free, but you’ll need to bring your own API keys.

Watch the video where Meng explains his Figma to SwiftUI code workflow.

v0 from Vercel is a ​“generative chat interface with in-depth knowledge on modern web technologies. It can provide technical guidance while building on the web, generate UI with client-side functionality, write and execute code in JavaScript and Python, build diagrams explaining complex programming topics, and more”. v0 supported sketches and screenshots as a starting point for generation for quite some time, but now paid users can also import designs from Figma.

Molly Hellmuth with a tip on using the ​“Ignore auto layout” feature to add a scrollbar to the menu, among other things. It’s one of my favorite features, making it easy to preserve Auto Layout while making designs more realistic and interesting.

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.

David Hill walks layer-by-layer through his process of designing a sick illustration for the lil bro coffee from Terminal.

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!

A new update to Slides lets you bring slides from Figma into a deck with one click.

The layers panel finally supports lots of nested frames or long layer names with horizontal scrolling.

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.