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.
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.
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.