After being introduced at Config 2023 last June, Dev Mode will move out of free beta on Wednesday, January 31. Last week, Figma showed improvements and features they’ve been wrapping up before the release. Annotations are a big one — ​“designers can share additional context, specs, and measurements that are connected directly to designs, and developers can easily see designers’ notes as they work, ensuring that they don’t miss any crucial callouts during handoff.” Teams that did this manually will save a ton of time and effort. (As the top comment on Reddit suggests, flow arrows are a missing piece for annotations and something I’d love to see brought from FigJam.)

The compare changes modal was redesigned to show diffs both visually and in code. This is one of my favorite features, and I wish it wasn’t limited to the Dev Mode. I duplicate frames to riff on ideas all the time, and the compare view is an incredible tool for reconciling the differences between the two versions.

Enterprise customers can set plugins to run by default in Dev Mode for all files in their organization — ​“for example, you may want to check that you’re using a design system correctly, show links to design systems documentation, include information about internal APIs to use, or confirm whether a design uses components that already exist in your codebase.” Finally, the Figma for VS Code extension was redesigned to run plugins and improve the navigation and discoverability of design files. Instead of having to pan around a large canvas, you can easily select from a grid of frames and see frames individually with a focused view.

Pelin Kenez, co-founder of Zeplin, reflects on what it takes for designers and devs to build more efficiently together. It goes beyond specs and handoff — it’s about uniting workflows across our cross-functional product teams.

Zeplin is built for this and now costs half the price of Figma Dev Mode, making it an easy choice for teams looking for more robust features at a lower cost.

Loved Tom Lowry’s thoughts on designer-developer collaboration in this thread. I think most teams agree that the traditional process of throwing designs over the wall to engineers is broken and we need better tools, but I’m also cautiously skeptical of designers working directly with the source within the design tools. While this is already possible for marketing websites (hello, Webflow and Framer!), products and design systems bring a whole new level of complexity and challenges. This iteration of the Dev Mode seems like a first step in the right direction to me, but the road ahead is lengthy but bright.

An interesting take from Jacob, a co-founder of Pierre — one of the dev tools I’m most curious about. ​“Figma is where I go to approximate a finished product. World-class Product teams collaborate here on rough sketches with components built to track their perfectly engineered counterparts. […] Instead would love to see Figma start building their creative suite. Specifically, imagine a Figma engineering tool? Built from the ground up? With the same Figma principles? And built to be interoperable with their design tool…”

I’ve seen Penpot 2.0 being brought up in some Dev Mode conversations, and while their support for CSS Grid Layouts is something I’d love to see in Figma, I do not think one-off copy-pasting HTML/CSS snippets is the way to go. It’s a ​“no man’s land” between no-code solutions and framework-specific codegen plugins that could be customized for the organization’s needs and connected directly to the components in code. (Thanks Christine Vallaure for sharing the video!)

A month of 29 daily Figma challenges starts on Thursday, February 1st! The project was started last year by Vijay Verma and this year features challenges from Rogie, Miggi, Pablo Stanley, Vyshnav, Desmond, Steven H‑A, and myself. Looking forward to seeing what everyone will come up with!

Molly spotted a nice improvement to opening a plugin from the Community — now they can be opened in a recent file instead of creating a new empty file in Drafts.

So excited for this episode of Ridd’s Deep Dives podcast with Molly Hellmuth! They get into the nerdier side of Figma and discuss adopting variables, making sure you don’t invest in a Figma strategy that you’ll regret later, Molly’s favorite design systems plugins, and how she’s building components differently in v8 of her UI Prep design system.

Ridd goes deeper into one of the topics they’ve covered with Molly and suggests questions to ask yourself before committing to a new Figma feature or workflow. One common theme in all three of his ​“regrets” is complexity — just like in code, it can be considered a detectable ​“smell”.

Cool prototyping technique built on variables.

Fantastic artwork made by Walid Beno in Figma.

High-quality maps in different styles and locations. From the streets of Oslo to a bird’s eye view of San Francisco — all in handcrafted vector and with examples of how they can be put to good use.

Beautiful work by Dylan de Heer: ​“a quartet of neumorphic buttons that are all about that subtle, mechanical depth — a touch of the future, crafted with a bit of that everyday rugged charm.”

A comprehensive font management plugin with previews, controls for variable fonts, recommended pairings, filtering by style, collections, and more. Very well done.

I mentioned that technique in the last issue, and now the plugin is available in the Community. Great tool by Anvesh Dunna for creating interesting embossed line patterns from vector layers.

A nifty plugin for quickly snapping your selected objects to the pixel grid by rounding values. Works with X and Y values, width and height, corner radius, font size, and position of all anchor points.

An inspiring story from Corey Lee on becoming a Figma Designer Advocate in Japan through community work and advocacy. ​“I’d never heard of a Designer Advocate but after reading the role description I realized all the things I had been doing up until that point all related to the role: advocating for design, enabling designers, creating content, and building community. I already was a designer advocate.”

Great observation and essay from Niki, with a beautiful roundup of historical examples.