• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Codemotion Magazine

We code the future. Together

  • Discover
    • Events
    • Community
    • Partners
    • Become a partner
    • Hackathons
  • Magazine
    • Backend
    • Frontend
    • AI/ML
    • DevOps
    • Dev Life
    • Soft Skills
    • Infographics
  • Talent
    • Discover Talent
    • Jobs
    • Manifesto
  • Companies
  • For Business
    • EN
    • IT
    • ES
  • Sign in

Lucilla TomassiJuly 13, 2023

Figma’s Dev Mode: What is it And How Does it Work?

Frontend
Frontend developer, frameworks and trends for 2023. Figma Dev Mode. Frontend trends.
facebooktwitterlinkedinreddit

Figma is a cloud-based and on-premise platform that allows companies of all sizes to create customized web projects and share prototypes. It has recently launched a new mode of use. This new workspace within Figma is designed to allow developers to leverage the tools they already know and use every day.

In fact, with the introduction of Figma’s Dev Mode, the platform has been given the opportunity to have useful tools for developers at a click away, quickly and efficiently, to put developers on par with designers who already use the service. But is it really worth it? How useful is this improvement actually? Let’s find out.

Recommended article
May 6, 2025

Top 10 Free Web Hosting Services Every Developer Should Know

Lucilla Tomassi

Lucilla Tomassi

Frontend

Does Figma’s Dev Mode help to code faster?

Although Figma was created with the intent to facilitate the creation of the graphic part, there is a possibility that once the file is inserted into the platform, it may not recognize it due to the lack of information necessary for implementation. For this reason, Dev Mode has been added, which can also be used to inspect design files, to integrate the coding part within an almost entirely graphic process.

Now, therefore, it will only be necessary to click on the Figma canvas, to find and export all the necessary information, such as measurements, specifications, and resources. Just like Chrome Dev Tools, Figma’s Dev Mode draws inspiration from other development tools to create an immediately familiar and easy-to-use environment.

In this perspective, the code in Dev Mode is completely redesigned and customizable for any language you are working with. It can therefore be a starting point so as not to have to start from scratch each time. A CSS box model has also been inserted, a modern syntax with a tree view, and you can switch between size units to match the source code.

Figma’s Dev Mode Could Be a Step Forward For now, the community around Figma and its new feature seems to have decreed the usefulness of the Dev Mode, but it is precisely the developers who are not entirely convinced, both in terms of the available tools and the costs of the application itself, which is not free.

This skepticism is also represented by the entry point for Figma’s Dev Mode: the switch. From a UX perspective, this offers a great dedicated view for the developer, leading to specific interactions and usage by developers. But, if you dig a little deeper, from a human perspective, this could create a mental division between “us” devs and “them” designers. Even more subtly, the switch can also be seen as a block for more complete functionalities.

This could be a signal for teams that unless they are ready to pay, they may therefore receive limited collaboration with their own developers because the inspection panel is now incorporated within the Dev Mode. The ones to lose out will therefore be the teams at the beginning and with few funds available.

web design mockup. Figma dev mode.
web design mockup

New features and pricing

The new Dev Mode would link to tools and source code, tracing what needs to go into production, and would allow inspecting files along with code with Figma in VS Code. The difference lies in two new plans offered to developers, but all come at a cost.

Dev Mode and Figma for VS Code are for now in beta and free for all users for the rest of 2023. Starting in 2024, a paid subscription plan will be necessary to access Dev Mode. If you are an editor on a paid plan today, Dev Mode will be included. Despite there being some developers who might not need Figma’s entire stack of features, the platform has thought of launching new plan options for them. Starting in 2024, you will have the possibility to purchase access to Dev Mode only for $25 per month on Organization, and $35 per month on Enterprise.

Will Developers Like the new Dev Mode?

Answering this question, especially in terms of long-term thoughts, is difficult, but for now, it seems that Dev Mode could be a step to start making Dev Experience in Figma easy and enjoyable.

So, although on the one hand, Dev Mode could make life difficult for design teams with less design experience in their organizations, especially those that have used previous versions with their developers. This is because their developers will face a paywall to use a valuable feature once available to them. And so, it’s likely their managers will weigh the benefits with their executives and their financial teams, and the design teams that once had a way of working will now have to rework other work scenarios in the new mode.

On the other hand, for many “normal” teams, this will be a new reality to face that could bring with it benefits in terms of time and work organization. Only time will tell the fate of design teams using Figma.

However, Figma itself assures that the introduction of Dev Mode will only be the first step to making Figma a better place for developers. With the input that will come from the beta version of Dev Mode and VS Code, the application commits to expanding the features, including ways to improve collaboration between designers and developers, extract specifications, and drive greater alignment between design and code.

Discover more details in this official guide.

Related Posts

Understanding Angular — Exploring Dependency Injection and Design Patterns — Part 0 🔥🚀

Giorgio Galassi
February 5, 2025

Let’s Create a Bento Box Design Layout Using Modern CSS

Massimo Avvisati
January 21, 2025
React library: all you need to know about it.

Building reusable multiple-step form in ReactJS

Noa Shtang
August 8, 2024
excalidraw codemotion magazine

Excalidraw: Diagrams Set in Stone

TheZal
July 9, 2024
Share on:facebooktwitterlinkedinreddit

Tagged as:Figma web designer

Lucilla Tomassi
CSS Creator Håkon Wium Lie at Codemotion Milan!
Previous Post
Pros and Cons of Collaborative Coding
Next Post

Footer

Discover

  • Events
  • Community
  • Partners
  • Become a partner
  • Hackathons

Magazine

  • Tech articles

Talent

  • Discover talent
  • Jobs

Companies

  • Discover companies

For Business

  • Codemotion for companies

About

  • About us
  • Become a contributor
  • Work with us
  • Contact us

Follow Us

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions