Figma Dev Mode: The Ultimate Tool for Designers and Developers

Benjamin Dendas

Introduction to Figma Dev mode

I've been using Figma for a few years to design concepts for the products and websites I develop. Figma is a great tool for creating visual aids to present your ideas to the world. However, in many of the projects I have worked on, it is often a hurdle for designers to hand off the correct design to the developers. Figma is trying to solve this issue by introducing "Figma Dev Mode" - a tool to bring design and development closer together by bringing some core features for both designers and developers to Figma.

A practical example in Figma

In this example, we have worked out a fictional house search application. To find a house, users can select an area and some more information to help specify what and where.

Figma in Design Mode

As the previous design only shows a single state, I've included two other variations that clearly demonstrate the interaction with the dropdown. Hence, the developer knows what it should look like.


Now that I'm happy with the result of this screen, I would like to hand this design off to a developer.

Within my design file, there are multiple pages with all sorts of other designs. These pages have no benefit for the developer and might even confuse them if they open the wrong pages.

Figma Design view

Figma Dev Mode

We can use Figma's new Dev Mode to solve the abovementioned issue. Let's have a look. First off, we put all our screens within a section. Doing this makes our design file more organized, but I will illustrate why this is required to do in a moment.

Designs grouped in a section

After that, I select the section. A new button pops up! This one was yet to be available in the previous versions of Figma.

Figma - Mark as "Ready for development"

Clicking on this button does a few things within our Figma file. It marks the section as ready for development. In addition, it also adds a "ready for development" mark to the page in general, indicating that at least one section is ready.

Page marked as ready for development in Figma design mode

Enabling Figma Dev mode

Now, let's look at the developer's point of view. They can now access Figma in Dev Mode by clicking the slider on the top right of the screen (next to the prototype button).

Figma mode switch

We can notice a few things immediately in this new, refreshing Dev Mode UI.


Besides a difference in view, we can see the pages that are not marked as ready for development are hidden by default. Developers can still access them but will not see them (and be distracted by them) by default.

Page marked as Ready for Development in Figma Dev Mode


In addition to pages being visualized differently, each frame within the ready for development section is shown with a thumbnail under the pages. This makes it easy for a developer to view each screen individually. By interacting with the thumbnail, Figma automatically focuses on the correct screen for the user.

Figma Dev Mode - Ready for Development view

Tracking changes

When developing a product, you often make incremental changes to your design. However, keeping track of the state of a design when working on a big screen takes a lot of work. It is often solved by duplicating pages, taking snapshots, creating file versions, etc. Nevertheless, with this new mode, developers can track changes to see how the design transformed from an initial draft to the actual result.

Figma Dev Mode - Compare changes feature

In this example, you can see that I have created a button component, swapped out the buttons, and made it brown. Like a version management tool like Github, it shows the changes between the two versions.

Figma Dev Mode - Compare view

Code generation

In previous versions of Figma, there is one functionality that I never bothered reading: CSS code snippets. However, with the latest update, Figma improved this part significantly. They made the code generation a lot better, along with being able to create the code for components for popular web frameworks.

Figma Dev Mode - Side panel

Final thoughts

In conclusion, Figma Dev Mode is a powerful feature that can help streamline the design-to-development process. In particular, by allowing designers to mark designs as "ready for development", developers can easily access the necessary design elements without being distracted by other parts of the design file. Additionally, Dev Mode allows for easy tracking of changes made to a design. It makes it easier for developers to understand how the design has evolved. Finally, Figma Dev Mode is a valuable tool for any team looking to improve their design and development workflow.

more insights

Close Cookie Preference Manager
Cookie Settings
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage and assist in our marketing efforts. More info
Strictly Necessary (Always Active)
Cookies required to enable basic website functionality.
Made by Flinch 77
Oops! Something went wrong while submitting the form.