Dev Mode fast follows: 200+ new features and fixes | Figma Blog

After two months of open beta, Figma released more than 200 Dev Mode features, improvements, and bug fixes based on over 5,000 pieces of community feedback. The updates improve design inspection, component workflows, code generation, file navigation, and integration with developer tools. Together, they make Dev Mode more practical for translating designs into implementation-ready code.

New Dev Mode capabilities

• Status labels can now be added to components, instances, and frames—not just sections—to indicate development readiness.
• Layout grids, rulers, and outline mode are available through the View menu and familiar Design Mode shortcuts.
• Detached components can be compared with their main components to identify differences.
• Android XML and iOS UIKit have been restored as code-generation options.
• The Inspect panel now supports the UIColor format.
• Version history allows users to inspect previous design iterations.

Usability and performance improvements

• Components from external libraries display the library name.
• Nested component properties and component modes, such as light and dark themes, are available in the component playground.
• rem units can be applied specifically to text while other properties remain in pixels.
• Multiple canvas objects can be selected and exported together using Shift-click.
• Figma files and notifications can surface in VS Code through Figma’s VS Code integration.
• Typography previews expose style name, font size, and line height, which can be copied directly.
• Individual text portions can be inspected on the canvas.
• The Layers panel can be resized vertically.
• Figma suggests matching design-system variables when raw values resemble existing variables.
• Values can be inspected as Figma properties as well as code snippets.
• Source files such as images can be downloaded.
• Alternative unit preferences are easier to find.
• Section-level links are grouped by frame.

Code-generation updates

• Holding Shift copies all available code snippets at once.
• CSS generation supports directional properties such as padding-top and padding-left when only one padding value is defined.
• Snippets consistently include font-style, line-height, and font-weight.
• Line height is shown in both percentage and pixel formats.
• CSS codegen supports OpenType features including font-feature-settings, font-variant-numeric, and font-kerning.
• Variables can be used for auto-layout constraints such as minimum and maximum dimensions and vertical gaps in wrapping layouts.
• Text layers containing multiple styles generate separate CSS for each style.
• The Figma Community now offers nearly 80 code-generation plugins, including tools for Tailwind, React, and Vue.

Bug fixes and navigation

• Users can switch between Design Mode and Dev Mode with tab navigation.
• Alternative units now display correctly in hints and tooltips.
• The release also includes additional fixes, including smoother handling of gradients in text.

Figma’s fast-follow release shows that Dev Mode is being shaped around developer feedback. Teams using it should revisit their workflows and integrations to take advantage of improved inspection, code export, component exploration, and VS Code support.