A recent addition to ’s toolkit has caused quite a stir among its myriad of users and for a good reason. If there ever was an easy way to improve collaboration between designers and developers, Figma’s Dev Mode could be it. Figma What we get in the Dev Mode is a handy - albeit still a bit raw - tool for navigating and inspecting designs. Its main goal is to help designers and their arch nemeses developers translate designs into code. To understand the perks of this new feature, let’s take a step back and examine the reasons that led to the necessity of bridging the dreaded gap between developers and designers. Why Do Designers and Developers Need Figma’s Dev Mode? Frictions between developers and designers rarely - if ever - result in a coherent usable product. And those frictions are more common than people are willing to admit. No wonder there are tons of articles written on the issue of bridging this gap and restoring peace between the two parties. So what are the main roadblocks that keep the developers and designers from collaborating efficiently? Image-based prototypes. Granted, there are few other ways a designer can communicate their vision of an interface to a developer. Still, image-based designs are not exactly known for their fidelity and functionality. Moreover, they are often hard to interpret or even to navigate through. Undisclosed decisions. Designers usually have solid reasons for wanting a component - or an entire product - to look the way it does. The bad thing is that they usually neglect to communicate this to the development team. So don’t get frustrated if your design choices are viewed more as guidelines and not laws. Lack of source of truth. Since developers and designers speak different languages, think in alien terms, and rely on their truths, it’s hard to connect. Want to create a proper product? Then you need a system that you can all use as the one source of truth. Figma’s Dev Mode seems to promise a solution to these issues, and perhaps others that are not as obvious. I will now take a closer look at what the new and much-talked-about mode has in store for the perpetually-conflicting teams. Why Designers Will Love Figma’s Dev Mode I won't be going into too much detail theory-wise, as the Dev Mode is very reminiscent of the Inspector panel. Instead, I’ll focus on a more practical approach. So, how can you improve your handoff to designers without becoming a dev yourself? The feature I enjoy the most is the tool. With it, you’ll be able to see how the chosen element has evolved. You’ll find the same one in the Abstract. There are two options for viewing the changes - the standard side-by-side view and the overlay option that makes it possible to see those changes that are not quite as obvious. Track All the Changes To do that, select any component and click . Then select the object you want to view the changes made to. This tool is very similar to that of Abstract and will be beneficial to both dev and designer teams as they’ll be able to preview changes right in the current file. Compare with Previous Version Another thing I enjoy a lot is the feature. Once a certain design is done, select the artboard and click the upper toolbar button. This will highlight the frame, which in turn will signal to the dev that the frame is - you guessed it - ready for development. You no longer need to leave any comments, which in and of itself is a great timesaver. Ready for Dev While creating a component, you can in the Description window in Component Configuration, both for other designers and for developers. Once in the Dev Mode, the latter will see the guidelines in the right-hand panel of the Component submenu. write guidelines The Open in allows you to open a certain component and alter its properties (the pursuit of perfection never ends, right?) Your fiddling won’t alter the whole design and cause the dev team to riot. The feature allows devs to check all the properties assigned to a component and to - what’s more - play with each of them to check all the edge cases. Playground feature Open in Playground In case you need to communicate an important piece of information regarding a certain component, you can now do it with the . Find it in the toolbar above, type in the vital information, and rest assured - it won’t be missed by the dev. This is much more useful than regular comments and allows designers to provide guidelines directly for the layout design. Annotation feature Why Devs Will Love  Figma’s Dev Mode Since the Dev Mode is aimed at a faster and easier transition of design into code, developers might also benefit considerably from this new feature. Let’s look at what handy tools and perks Dev Mode has brought them. Devs can - pixels and Rems - with ease. The latter comes in handy if you want to create a scalable component. switch between measurement units In case you need , Figma now gives you direct access to it. By selecting the whole layout, devs will be able to see all the possible exportable assets. The only thing left to do is to click a button and select the format. to export an asset from a project Last but not least, . This means that each Jira ticket can be connected to the designs. The dev team will have access to the designs swiftly and easily. the Dev Mode allows you to connect to Jira And there you have it! Granted, Figma’s Dev Mode is too much of a raw product to be the cure-all for bridging the gap between devs and designers, but at least it is an impressive and much-praised step in the right direction. If your main goal as a designer is to improve your handoff flow with the development team, Dev Mode is a worthy addition to Figma as your go-to tool. If you are a developer, then you’ll appreciate a more coherent prototype from the designers. Whichever side you are on, Figma’s Dev Mode still seems like a worthy investment. That’s right, . As of January 31, 2024, this mode is now secured behind a paywall. Still, since it saves you time (and time is and will always be a valuable resource). Money shouldn’t be an issue, right? investment

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Dev Mode in Figma: A Game-Changer in Design-Developer Relations

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Be Good Mentor for a Fellow Designer

3 Simple Reasons Why Coding Pixel Perfect Designs is So Painful

5 Best Mobile App Design Tools in 2022

6 Examples of Higher-Level Skills to Grow as a Designer

Adobe Pigs Out (Again)

How to Be Good Mentor for a Fellow Designer

3 Simple Reasons Why Coding Pixel Perfect Designs is So Painful

5 Best Mobile App Design Tools in 2022

6 Examples of Higher-Level Skills to Grow as a Designer

Adobe Pigs Out (Again)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps