Dev Mode exits beta with annotations, compare changes, and plugin controls

Figma is wrapping up Dev Mode’s free beta period with a wave of updates aimed at handoff, code generation, and editor integration. The new features — annotations, a redesigned diff view, expanded plugin capabilities, and a reworked VS Code extension — land just before Dev Mode becomes a paid product on January 31. Highlights from the announcements were presented by Figma CTO Kris Rasmussen at Config 2023.

Since Dev Mode launched in beta last June, the team says it has shipped over 200 features and fixes based on user feedback. The latest batch focuses on three areas: reducing manual handoff work, making design changes easier to track, and letting teams tailor Dev Mode to their own stack.

Annotations attach specs directly to layers

Annotations are the headline feature. Designers can now add measurements, specs, and context notes that are pinned to specific layers on the canvas. Because the annotations are tied to the layer itself, they update automatically when the design changes. That means developers see current information without waiting for a designer to re-export or re-annotate a file.

Figma also addressed canvas clutter. Annotations are visibility-aware, appearing only at certain zoom levels so they are available when needed but don’t obscure the design during broad navigation. The annotation system is also scriptable via the plugin API, which allows teams to generate or manage annotations at scale instead of placing them one by one.

Compare changes shows both visual and code diffs

The compare changes modal has been redesigned to show differences in two modes: visual and code. This gives developers the option of reviewing what shifted on the canvas or seeing the underlying style and property modifications directly.

For teams that track work in Atlassian, the Figma for Jira app now bridges design context into Jira issues. The integration notifies users in Jira when a design file changes, so developers don’t have to poll Figma for updates.

Enterprise controls and codegen plugins

Dev Mode has long supported code generation via plugins, and that extensibility is a focus of this release. Teams can choose from a library of codegen plugins for HTML, React, Tailwind, and other frameworks, or write their own via the codegen plugin API. The new enterprise-level control lets admins pin certain plugins and set them to run by default across all files in the organization. That allows teams to enforce design-system usage and standardize the output developers get.

Figma points to payment company Razorpay as an example: the firm built an internal plugin called RazorSharp that auto-generates equivalent code from designs. Custom plugins like that can also enforce design-system standards, linking to docs or flagging when a design uses components that don’t yet exist in the codebase.

VS Code extension gets a navigational overhaul

The Figma for VS Code extension has been redesigned to address a common pain point: finding content in multi-page files with infinite canvases. Instead of panning around a large canvas, developers can now select from a grid of frames and focus on one frame at a time. The extension also supports running plugins directly in VS Code, letting developers use third-party or internal tools without switching windows.

Pricing transitions on January 31

Dev Mode will move out of free beta on January 31 and require a paid seat. Pricing varies by plan:

  • Starter: Dev Mode not included.
  • Professional: Included with full Design seat.
  • Organization: Included with full Design seat, or standalone for $25 per seat/month.
  • Enterprise: Included with full Design seat, or standalone for $35 per seat/month.

Users without a paid seat can request one from their Figma admin within Dev Mode; admins can approve requests in the admin panel. Starter plan users and viewers who don't upgrade can still view properties and measurements, copy code, and export assets. Figma is hosting a livestream to walk through the January 31 changes.