Meet Dev Mode in Figma
This article is a translation of the original article “Making Figma better for developers with Dev Mode“.
I also run a telegram channelFrontend in a navy way”, where I talk about interesting things from the world of interface development.
Introduction
How can a design tool work better for developers? This is the question we ask ourselves and our community. Today we’re excited to introduce Dev Mode, a new workspace in Figma designed to help developers get what they need, when they need it, with the tools they use every day.
Figma was born on the web – an unconventional start for a design tool, but we felt it was sorely needed for product design. With a single link, designers could collaborate on ongoing work, share early work, and not save a design until it was “polished”. As more designers embraced Figma and this multi-user way of working, we began to see a natural expansion of usage across teams and disciplines, especially among developers.
Today, we know that more developers visit Figma than designers on our paid plans. We also know that understanding developer needs and concerns is critical to making Figma a place where product development can be more efficient, collaborative, and expressive.
Developers have unique workflows and preferences. From front-end developers working with mature design systems, to engineers creating design system components, to those who create content layouts and export assets in their work with brand designers, every team wants to work with as few restrictions as possible. .
In mode DevMode we see a huge opportunity to provide developers with what they need quickly and efficiently – just like we did with designers when we first started building Figma. The easier it is for teams to design, document, find, and execute highly accurate designs without losing sight of the work and each other, the better the outcome of the product. We’re excited to take this first step towards bringing design and development together in Figma, and we can’t wait to see what the teams do next.
Get started coding faster
While Figma is great for free design exploration, it can be confusing if you end up with a design file that lacks the information it needs to implement. Dev Mode is like a browser inspector for your design file, it brings design concepts – shapes, layers, and groups – closer to developer concepts like code, icons, and markers. By hovering and clicking on the Figma canvas, you can find and export all the information you need, such as measurements, specifications, and assets, and reveal additional context for your design system. Like Chrome DevToolsDev Mode draws inspiration from other development tools to create an environment you’ll instantly feel comfortable with.
The code in Dev Mode is completely redesigned and adjusted to the language you are working in. We know that the code is not useful out of the box. Rather, it’s a starting point so you don’t have to go from 0 to 1 every time. Now you’ll see the CSS box model, modern syntax with a tree view, and the ability to switch between units to fit your codebase.
Access to everything you need in one place
Building products requires a solid set of tools, but jumping between design libraries, codebase, and other project management tools can lead to inefficiencies, especially when component and style names don’t match those in code, or the team doesn’t track and document tasks. Dev Mode is designed to make you more productive by linking the tools and code components you use to the design file.
Plugins allow you to extend the functionality of Figma to tailor it to how your team works. You can manage projects with Jira, Linear And GitHubso that you and your designer know what’s going on in your respective processes. storybook will help you reference what’s going on in your codebase in the context of the design itself. And codegen plugins from AWS Amplify Studio, Google Relay And Anima will help you customize your code output – you can even create your own based on your unique workflow.
It’s very useful to have plugins that interact with our everyday tools. We use GitHub, we use Storybook – it saves me a lot of time.
Laurent Thiebaud, Head of Engineering and Lead Design Systems Specialist, Decathlon (Part of Dev Mode Beta)
Design systems become more powerful with introducing design tokens through variables. Tokens are small pieces of user interface data that can be used in design and code. Now they are displayed in Dev Mode, so it’s immediately clear what you need to start developing. You can also add related links to objects on the canvas to link to documentation or what’s in your plugins.
Track what needs to be submitted for development
Even if the design and development phases of a product merge, the artifacts of each—design files and code—are different. Until now, it has not been easy to navigate through design files, select specific components and their properties, or even know what has changed since the last time the file was viewed. Designers can now simply mark a section as “Development Ready” and send it to you directly without creating a separate page or file. Diff support allows you to compare changes between different frame versions and stay up to date.
Expand your workflow
By using VS Code extensions you can use the Dev Mode features in the code editor to view designs, notices, and comments, and track changes without leaving the development environment. The VS Code extension also autocommits a line of code based on the design you’re viewing, helping you work much faster.
Dev Mode and Figma for VS Code are in beta and free to all users until the end of 2023. Starting in 2024, you will need a paid plan to access Dev Mode. If you are an editor on a paid plan today, Dev Mode will be enabled. We know there are developers who might not need the full feature set of Figma, so we’re introducing two new pricing options for them.
There is a much higher level of trust when people work with the same tool – the information is much more relevant, you no longer pull some files to your computer and do not chase after something by e-mail. It’s a much more collaborative process.
Jory Lallo, co-founder, Linear
This is just the first step in making Figma better for developers. Including your contribution to the beta DevMode And VS Code we look forward to expanding the functionality, including new ways to improve designer-developer collaboration, extract specs, and provide more alignment between design and code.
