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.

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.

“Code Connect Version 1.2 launched this week and includes support for design systems written in Angular, Vue, and HTML, an improved getting started wizard for the command line tool, and expanded configuration options for React icons.”

I came across this wildly popular plugin as I dabbled into Tailwind CSS this week. Seeing a free (supported by Creator Fund) open-source plugin for generating code in a few common formats (HTML, JSX, Tailwind, Flutter, and SwiftUI) is refreshing.

Describing design details with plain text is a nice way to communicate the intent to developers.

Jake made a plugin that brings the power of CSS color-mix() into Figma. Use it to generate swatches, variable ramps, and solid or gradient fills. I highly recommend watching Jake’s video if you’re unfamiliar with this CSS notation.

Figma Developer Advocate Jake Albaugh joins a livestream on the Visual Studio Code channel to talk about Figma for VS Code extension, allowing developers to easily access and inspect designs from VS Code.

“How do Replit & Linear approach designer to developer collaboration? We’ll talk to two high-performing teams about streamlining design-to-code handoff for shipping better products. Learn insights on effective collaboration and ideal workflows with Figma’s Dev Mode, Linear, and Replit.”

“Now in Dev Mode, new statuses like Edited and Completed make it easier to communicate what’s changed and ready — supporting a more fluid development process.”

A guide to Dev Mode, updated with all new features and available for both the previous and new UI.

“When it comes to design handoff, communication is key. As designs change, designers need to be able to iterate while still providing clarity to developers about what’s new and what’s ready to build.”

Code Connect is out of beta: ​“Today, we’re excited to make Code Connect generally available, alongside improvements like surfacing connected code snippets in the component playground, a new tool to streamline setup, and support for React, React Native, iOS, Android, and more to come.”

“Our new Ready for Dev View cuts down on the noise and helps developers, designers, and other stakeholders know exactly what’s needed to drive projects forward. And with Focus View and the ability to mark designs as dev complete, developers can stay in the flow while staying in sync with their collaborators.” See also a short reelof all the latest updates.

“We are starting to roll out an easier way to mark frames ready for dev. Select a frame to see the </> icon appear at the top right, then click. You’ll see the ready for dev status also reflected in your selection actions.”

Bumble, GitHub, and HP discuss the challenges their design systems teams face in connecting design to code and share first impressions of Code Connect.

Code Connect delivers code from your design system to Dev Mode, helping developers build with consistency and speed. In this session, Jake Albaugh, Figma Developer Advocate, shares an overview of Code Connect and some tips on how to get started.

Jacob Miller, a Product Manager for Design Systems at Figma, gives an overview of everything launched at Framework — Code Connect for developers, typography and gradient variables, and the new Library Analytics API. All of the above is designed to drive design system adoption across the teams because ​“building a design system is only half the battle — the real challenge is getting it adopted by both designers and developers.” If you missed the event, that’s one summary you need.

Developer Advocate Jake shows Jason Lengstorf how to bring your code into Figma with Code Connect.

“Code Connect is a tool for design systems and engineering teams to bring component code into Dev Mode. When inspecting a component with connected code snippets, developers will see design system code from their libraries instead of auto-generated code.” Currently in beta. Available on Enterprise or Organization plans only.