Exploring Figma's Dev Mode: Empowering Developers in Collaborative Design

Recently, Figma announced a range of new features, all focused on its mission to make design accessible to all. One of the major highlights of these features is the Developer Mode (Dev Mode).

With Dev Mode, Figma seeks to foster a more efficient process that makes it faster and easier to move projects from design to development.

In this guide, I will share an overview of what Dev Mode is and provide developers with insights into its advantages, and how to maximize its potential.

Overview of Dev Mode

The Dev Mode feature is a developer-focused interface for inspecting and navigating designs. It is designed to improve collaboration between designers and developers.

Benefits of Dev Mode to Developers

• Copy relevant code: View and copy properties, values, and code from design components.

• Access to version control: View the timestamp and compare versions to see what was edited since you last viewed a file.

• Inspect design files: Navigate design files to get important information like padding, colour and text styles, etc.

• Search: Quickly find the status of designs to know when they are ready for development or still a work in progress.

• Workflow Integration: Streamline your workflow with integration tools like Jira, Storybook and GitHub

• Developer resources: Add relevant links and developer resources to components to promote information sharing and collaboration on projects

How to Enter Dev Mode on Figma

Anyone with a ‘view’ or ‘edit’ access can access Dev Mode in any Figma design file.

If you open a Figma file, you can toggle between Design Mode and Dev Mode using the following steps:

Step 1: Open a Figma design file.

Step 2: Click the Dev Mode toggle button at the top of the page. You can also use the keyboard shortcut - Shift D.

However, when you open a Figma file through a Dev Mode link, you will be automatically directed to Dev Mode on Figma.

How to Navigate Designs in Dev Mode

In Dev Mode, the left navigation panel offers a variety of functionalities. Let’s explore them.

1. View the Sections Marked as ‘Ready for development’

In the Design Mode, designers can group designs into sections and mark them as ready for development. This helps developers know what to work on.

In the Dev Mode, developers can find the marked sections in the left sidebar, under ‘Ready for development’.

You can also find these sections tagged as ‘Ready for dev’ on the design canvas.

1. See the version history of each frame

A timestamp is displayed under the frame’s name. This will help you know the time a frame was last edited.

1. Navigate frames and layers

Sections that have not been marked as ready for development will still be visible in the left sidebar but collapsed by default.

Select Layers on the left sidebar to view the nested frames within it.

Click on each frame to view its properties and assets at the right sidebar.

How to Inspect Designs in Dev Mode

The inspect panel allows developers to view measurements, specifications, components and styles. It contains all the relevant information needed to start coding faster or get production-ready code.

Here are some features to explore in the inspect panel:

1. Compare design changes

‘Compare changes’ is usually displayed at the top right corner of the inspect panel. It becomes visible when an edit or iteration has been made since you last viewed the file.

Click the link to open a modal that shows the history of the frame.

The modal will enable you to compare the current version with previous iterations of the design.

1. Build faster with customizable code snippets

Copy production-ready code snippets from your design by doing the following:

Step 1: Click any element on the canvas.

This will display auto-generated code snippets in the inspect panel.

Step 2: The default language is set as CSS.

To change the language, you can select other language options from the dropdown menu:

• CSS

• IOS

• Android

Step 3: Click the Inspect settings to select a unit from the dropdown:

• px

• Rem

• Set a scale

You can also set a scale. Select ‘set a scale’ to enter a unit scale.

Step 4: View or copy the generated styles and variables of the selected layer.

Hover around the snippet code you want to copy to reveal the copy link.

1. View layer names and types

When you select a layer, the layer name is displayed at the top of the inspect panel.

Below the name, you will find the layer type (whether it’s a component, instance, frame, text, etc.) and the time it was last updated.

1. Use the playground feature to explore component variations

When you select a component or instance, the component playground appears in the inspect panel.

Click the 'open in playground’ button to view the different properties of the component without altering the actual design.

![This image shows how to access Openground in Dev Mode

](lh4.googleusercontent.com/VmuXx_QGBPXxAF6wn.. align="left")

Dev Mode's Playground also enables you to view the link to the main component and any links to relevant documentation or resources.

1. Download assets and export layers and frames

Dev Mode automatically detects assets such as:

• Icons

• Images

• Videos

• GIFs, etc.

You can find and download these assets under the ‘Asset’ section. You can also export frames and layers on Figma using the following formats:

• PNG

• JPG

• SVG

• PDF

To inspect a single vector layer within an icon, you can turn off automatic icon detection using the following steps:

Step 1: Click the Main menu in the toolbar

Step 2: Hover over View in the dropdown

Step 3: Deselect Automatically detect icons

Dev Mode Plugins & Extensions

As a developer, you can enhance your workflow by seamlessly integrating your tools with Figma through the addition of developer resources.

Figma has introduced Dev Mode plugins to improve development workflow. As a developer, you can use these plugins in Figma to automate your tasks, add new functionality, and integrate tools used for documentation and communication. These plugins include:

1. GitHub

This plugin connects your files, issues, and PRs to your Figma components to give you the context you need during design implementation.

1. Jira

Sync Jira across Figma, FigJam and Dev Mode to stay on track with your development tasks.

1. Storybook

This plugin supports linking stories to your Figma design system and design system in code.

1. Figma’s VS Code Extension

With Figma’s VS Code extension, you can:

• Inspect design files

• Track design changes

• See and respond to comments and activity in real-time

• Get code suggestions based on designs

• Link code files to design components

These features will help speed up design implementation without leaving your code editor.

How to Use Dev Mode to Add Developer Resources

To add development links to GitHub, Storybook, Jira and other workflow tools:

Step 1: Click the '+' icon in the 'Dev resources' section.

You can find this section on the right sidebar of Figma.

Step 2: Paste a link in the input field

When you add dev resources to a component, they are automatically added to all the instances of that component.

How to Find Plugins in Dev Mode

You can find your recently used plugins in the Plugins tab.

You can also find other recommended plugins from the Figma Community.

Conclusion

In this guide, I explored how Figma's Dev Mode feature can help to improve designer-developer collaboration. I also shared how developers can use this feature to navigate design files and transform designs into code.

With Dev Mode, designers and developers can stay on the same page and ensure that important details are not lost during the handoff process.