Figma's Dev Mode vs Viewer Mode

A similar set of layout, spacing, content, typography, color (as HEX, RGBa, HSLa, HSBa), component properties, and documentation notes are shown in both modes, just laid out in a different manner. Viewer Mode displays values of the selected element, while Dev Mode focuses more on the holistic context with a focus on the selected element.

Viewer Mode reveals basic CSS, iOS, and Android code generation through a right-click and menu selection, while Dev Mode provides integrated code generation for these default languages in the right panel.

Users in both modes can navigate the layers panel, pages, and the canvas. The exact same information is shown in both Viewer Mode and Dev Mode. In Viewer Mode, the Layers panel is split vertically with the Pages panel, while in Dev Mode a subsection called "Ready for Development" sits between the Layers and Pages panels.

Anyone with access to a Figma file can leave comments and tag people for feedback on specific elements of the design in both Viewer Mode and Dev Mode. The functionality of both modes is the same. The only difference between the two is the color. In Viewer Mode, comments show up as blue in the right panel, while in Dev Mode comments are shown in green.

Both modes have the same functionality for exporting assets in different formats and sizes. The one difference between the two is location. In Viewer Mode, Export is housed in a separate tab at the top-right of the page, while in Dev Mode the feature lives as a part of the inspect panel.

Variables used in design files are displayed as tokens in both Dev Mode and Viewer Mode. Styles (the circles), and generic variables (squares) display the same in both modes.

Sections and elements can be marked as "Ready for Development" by designers and that status will be viewable by consumers in both Viewer Mode and Dev Mode. With a Dev Mode license, the capability of marking something as "Ready for Development" is also brought to the developer.

Dev Mode offers a Box model view and click-to-inspect functionality. Viewer Mode offers similar inspection capabilities, but they can only be accessed while using Modifier keys. Viewer Mode only reveals static, composite values as redlines while Dev Mode persists in its Box model context using variable callouts.

With Dev Mode access, a native Figma Annotations tool gives the designer the ability to share context, specs, and measurements connected directly with designs. For example, in the Dev Mode experience below, a developer can see native redlines and annotations set by the designer. The developer can also add their own redlines and annotations if desired. In Viewer Mode, these tools and annotations are hidden from view.

Dev Mode offers the ability to see a visual diff of changes that have occurred since a developer last viewed a file. These changes can be viewed side-by-side or in an onion skin. There are also specific left- and right-panel callouts to the corresponding changes that have been made.

Figma for VS Code extends the functionality of Dev Mode's inspection features and brings the design file directly into VS Code. All Dev Mode functionality available in the Figma app is available in VS Code in a side-by-side window for the coding experience.

Playground mode is a method by which a developer can see optional component properties or states without leaving the file or making changes to the design. For example, if a developer was creating a button on their page and wanted to see the difference between the states of that button, they could select the button and use Playground mode as a sandbox to adjust the parameters in that button and see the expected result.

In Dev Mode, developers can use a variety of plugins to generate code in the framework of their choice, such as Angular, React, Tailwind, Vue, and more. (These plugins are not available by default and would still need to be vetted via a request process before they could become available.)