Figma, the popular collaborative web design tool, has had a momentous few months. Back in September, the announcement of Adobe’s acquisition of the company caused a stir, and this week Figma held its largest ever annual conference, Config 2023. This event marks Figma’s first in-person gathering since 2020, and the attendance has grown exponentially from the previous year’s 1000 attendees. This year’s edition, held in San Francisco, has attracted over 8000 participants, including Creative Bloq.
During the opening keynote of the conference, Figma revealed a slew of new tools and features, all aimed at its mission of democratizing design. The highlight of these announcements is a brand new developer mode, which aims to bridge the longstanding gap between designers and developers. Additionally, the keynote touched on the role of AI in the design process. For a comprehensive breakdown of Figma, including our favorite UI design tool, check out our Figma review.
Figma Dev Mode
Figma’s latest update introduces a game-changing feature called Dev Mode, which aims to make the platform more welcoming for the one-third of its users who identify as developers. Up until now, Figma’s experience has been primarily designed for the benefit of designers. However, Chief Technology Officer Kris Rasmussen acknowledged that developers haven’t felt at home in the platform. With Dev Mode, Figma aims to bridge the gap between design and development, and make developers feel more included in the platform’s offerings.
Dev Mode is a dedicated space within Figma that streamlines the process of moving from design to development. Designers can tag a project as “Ready for Dev”, and developers can access all the necessary information without having to go through the hassle of version updates or extra communication.
According to Rasmussen, Figma has been asking itself and its community how a design tool can better serve developers for the past year. While the Figma canvas is great for freeform design exploration, it can be overwhelming for developers when design files are missing the information needed for implementation. Dev Mode acts like a browser inspector for design files, bringing design concepts like pixels, layers, and groups closer to developer concepts such as code, icons, and tokens.
Code faster
Figma’s Dev Mode aims to help designers and developers collaborate more seamlessly by streamlining the transition from design to development. While the Figma canvas is an excellent tool for exploring design ideas, it can be overwhelming for developers when design files lack essential implementation information. Dev Mode acts like a browser inspector for design files, bringing design concepts such as shapes, layers, and groups closer to developer concepts like code, icons, and tokens. By hovering and clicking around the Figma canvas, developers can access all the necessary information, including measurements, specs, and assets, and gain additional context from the design system.
Dev Mode’s code feature is entirely redesigned and customizable to support any programming language. The developers behind Dev Mode understand that code is not always useful out of the box; instead, it’s a starting point that saves time and effort. With Dev Mode, you can take advantage of modern syntax with a tree view, a CSS box model, and toggle between dimension units to match your codebase. Dev Mode takes inspiration from other development tools, like Chrome Dev Tools, to create an environment that developers will find immediately familiar and easy to use.
“ It’s very useful to have plugins that interconnect with our daily tools. We use GitHub, we use Storybook—it saves me a lot of time. ”
Laurent Thiebault, Engineering Manager & Design Systems Lead, Decathlon (part of the Dev Mode beta)
Track production requirements
In modern product development, the lines between design and development are becoming increasingly blurred. However, the artifacts from each phase, such as design files and code, remain distinct. Navigating design files, selecting specific components and their properties, or determining what has changed since the last review has been a challenging task.
Fortunately, Figma’s new feature allows designers to streamline this process by simply labeling a section as “ready for development” and sending it directly to the development team without the need for a separate page or file. This feature saves time and effort and helps designers and developers stay aligned throughout the product development process.
Additionally, Figma’s diff support allows developers to compare changes between different versions of a frame and stay up to date with the latest design iterations. This feature makes it easier for developers to track what needs to go into production and ensures that the final product is aligned with the original design vision.
“ There’s a much higher level of trust when people are in the same tool—the information is much more up-to-date, you’re not pulling down some files to your computer or chasing things over email anymore. It’s a much more collaborative process. ”
Jori Lallo, Co-founder, Linear
Figma is taking its first stride in enhancing the platform for developers. The team is eagerly looking forward to receiving user feedback from the Dev Mode beta and VS Code, which will enable them to extend the functionality of the platform. The future enhancements will focus on augmenting designer-developer collaboration, extracting specifications, and promoting better alignment between design and code.
Read also: 510 Key UI/UX Design Principles for a Great User Experience
