techlist.io
KREN
figma

What’s next for Dev Mode: Annotations, Compare Changes, Plugins, and More | Figma Blog (opens in new tab)

figmadesign-systemsdev-modepluginscode-generationvs-codetailwindbootstrap

Figma is moving Dev Mode out of free beta on January 31, 2024, while adding features designed to improve design-to-development handoff. The update introduces connected annotations, richer visual and code comparisons, customizable plugins, Jira integration, and a redesigned VS Code experience. Dev Mode will require a paid seat after the beta ends.

Annotations for clearer handoff

  • Designers can add measurements, properties, specifications, and contextual notes directly to design layers.
  • Annotations update automatically when the associated design changes.
  • They appear or disappear at different zoom levels, keeping designs informative without cluttering the canvas.
  • Teams can use plugins to create and manage annotations in bulk.

Visual and code-based change comparisons

  • The compare changes experience has been redesigned to show differences both visually and in code.
  • The Figma for Jira app brings design context into Jira issues.
  • Jira users can receive notifications when related designs change.

Custom code generation with plugins

  • Codegen plugins let teams generate code for technologies such as HTML, React, Tailwind, and Bootstrap.
  • Organizations can customize generated output around their frameworks, design systems, component libraries, and internal APIs.
  • Plugins can validate design-system usage, link to documentation, and identify existing code components.
  • Enterprise administrators can pin plugins and configure them to run by default across organizational files.
  • Figma highlights custom implementations such as Razorpay’s RazorSharp plugin.

Improvements to Figma for VS Code

  • The extension makes it easier to inspect designs without switching between tools.
  • A redesigned navigation experience replaces difficult canvas panning with a grid of frames.
  • Developers can open individual frames in a focused view.
  • Plugins can now run directly in VS Code, including private and customized tools.

Teams using Dev Mode should prepare for the paid-seat requirement and evaluate annotations, plugins, Jira integration, and the VS Code extension to fit their existing handoff and design-system workflows.