Figma Dev Mode, A Product Review

Figma is a product I am very familiar with from past jobs. I watched the release of Dev Mode at their 2023 Config, the annual Figma Conference. I will be reviewing what Dev Mode is, the product’s history, its innovative features and solutions, and its competition.

What is Dev Mode?

Before I explain Dev Mode, I will take a step back and briefly summarize Figma. Figma is a collaborative design tool that allows individuals or teams online to build products in real time (Figma, n.d.-b). The products built in Figma are not actual; they range from sketches to wireframes, mockups, and even interactive prototypes. The developers take the design files and bring that product to life. This highlights how important the developers are to creating and releasing products; without them, designs would never leave Figma. The handoff process has always been a pain point; Figma saw this need. Dev Mode lives inside Figma. If you are in the design file, all you need to do is toggle the switch, and you enter dev mode. This works inversely with leaving dev mode to enter back into the design mode. This unique product stays true to Figma’s vision of making design accessible to everyone and collaborative. Dev mode scales down to exactly what a developer needs to use and aligns with what is in their wheelhouse. Previously, the developers had to work on the design side, which has a lot of noise and can be very overwhelming for someone focused on coding the frames, especially if they are not knowledgeable in design, which is usually the case. Dev mode allows the developers to quickly inspect each frame that has been designed, allowing them to reference the spacing and assets and leave annotations or inspect other pertinent information to help speed up their production (Figma, n.d.-a).

Product History

Dev Mode was first released in June 2023 at Config. Since then, several new versions and updates have been released (Rasmussen, 2023). Figma itself is not an old company; it was first launched in 2015 after a few years of trying to answer the question: Can design tools be built for the web (Figma, n.d.-b)? It is apparent that Figma takes its work seriously and always works to improve and iterate its products.

Innovative Features & Solutions

Dev Mode offers many innovative features and solutions. Once Dev Mode is toggled on, the transition shift is subtle but noticeable. The options available in Dev Mode scale to exactly what a developer would need, removing the extra noise that’s available on the design side. Inside of a file, sections or even a single frame can be marked as ready for development. The developer is notified of those marked files, quickly references updates and changes from past versions, and makes annotations that the designer or anyone else in the file can view. All assets can be easily viewed when building a frame to ensure correct characteristics. Previously, the developers would have to click several times into a specific frame depending on how it was built, adding frustration and confusion. Dev Mode shows the spacing with one click. It also offers layout information in the developer's language on the right-side panel. Plug-ins benefit the design side of Figma, which has been carried over into Dev Mode. This feature is exceptionally beneficial for the developer and helps save time (Figma, n.d.-a). Figma’s Dev Mode helps alleviate design handoff headaches, saves companies time, and increases efficiency and collaboration (Hall, 2024).

Competition

Dev mode’s main competitor is Zeplin, although Zeplin does not offer the design tools like Figma. Zeplin focuses on reducing the handoff headaches by utilizing a plugin with Figma that helps track versions and standardize design organization and alignment. Pricing is highly competitive; there have been many complaints about dark patterns in Figma’s pricing tiers, especially with Dev Mode (Zeplin, n.d.). Other competitors are Sketch and Clickup, but they are not as competitive as Zeplin (Reddit, 2024).

Conclusion

In short, Dev Mode effectively bridges the gap between design and development. This product helps increase clarity, reduce handoff meetings, and allow seamless communication between the designer and developer (Smith, 2024). Figma always impresses me with its new releases and product updates. However, learning about the recent dark patterns in their subscription tiers and the need for more transparency is disappointing (Hall, 2024). I hope they can clarify that aspect of their company as soon as possible.

References

Figma. (n.d.-a). Dev Mode. Figma. https://www.figma.com/dev-mode/

Figma. (n.d.-b). Design. Figma. https://www.figma.com/design/

Hall, D. (2024, March 22). Figma Dev Mode: What it can and can’t do for a UX designer. LogRocket. https://blog.logrocket.com/ux-design/figma-dev-mode/

Smith, L. (2024, July 7). How Figma is bridging the designer-developer divide. FastCompany. https://www.fastcompany.com/91128367/figma-innovation-by-design-2024

Rasmussen, K. (2023, June 21). Making Figma better with developers with Dev Mode. Figma. https://www.figma.com/blog/introducing-dev-mode/

Reddit. (2024). Alternatives to Figma? Reddit. https://www.reddit.com/r/FigmaDesign/comments/1ag7lvc/alternatives_to_figma/

Zeplin. (n.d.). The no-brainer alternative to Dev Mode. Zeplin. https://zeplin.io/why-zeplin/dev-mode-alternative/