Figma unveils major updates to Dev Mode, which will move out of beta on January 31

Figma, in a recent blog post, revealed several updates to its Dev Mode, including the introduction of annotations, enhancements to compare changes, plugins, and the Figma for VS Code extension.

The new annotation feature allows designers to share additional context, specs, and measurements directly linked to designs. Developers can easily access these notes during their work process, which aids in preventing any missed key callouts during handoff. The plugin API also allows teams to create custom Dev Mode plugins for creating and managing annotations in bulk.

Figma has also overhauled the compare changes modal, enabling users to see diffs both visually and in code. In addition, codegen plugins are now available, allowing code generation in the framework of users' choice, including HTML, React, Tailwind, among others.

For enterprise admins, there's the ability to pin and set plugins to run by default in Dev Mode for all files in their organization.

The Figma for VS Code extension has been redesigned to enhance navigation and discoverability of design files. The extension aims to simplify the process of accessing and inspecting designs directly from Visual Studio Code. Figma has also enabled running plugins in VS Code, allowing the use of third-party tools and customized code without the need to exit the code editor.

As of January 31, Figma's Dev Mode will transition from free beta to require a paid seat. Depending on the user's plan and seat type, an upgrade may be needed to continue using Dev Mode.