Figma unveils DevMode, Variables, and other features at their annual conference, Config 2023

Figma annual conference, Config 2023, captivated a staggering crowd of over 8000 attendees, with an unwavering focus on democratizing design accessibility. Amidst the buzz and excitement, the most significant revelation came in the form of Dev Mode—a groundbreaking feature engineered to bridge the gap between designers and developers.

Dev Mode introduces an space within Figma that streamlines the transition from design to development. With this tool, designers can easily tag their projects as "Ready for Dev," providing developers with all the necessary information. By eliminating the need for version updates and extraneous communication, Dev Mode offers a seamless collaboration experience. It provides a browser inspector-like interface within the Figma canvas (like Google Chrome Developer Tools or Firefox Developer Tools), allowing developers to extract essential information for implementation directly from the design file, so developers can easily find measurements, specifications, assets, and gain additional context from the design system, making the transition from design to code more seamless. Dev Mode's code environment is fully customizable to accommodate different programming languages, and it features a redesigned interface with modern syntax, a tree view, and the ability to toggle between dimension units, aligning with the developer's codebase.

Dev Mode also integrates various tools and plugins, connecting design libraries, codebases, and project management tools. It allows for seamless collaboration between designers and developers by supporting plugins like JIRA, Linear, GitHub, and Storybook, while design tokens and related links provide essential guidance and documentation. Dev Mode simplifies tracking changes and staying up-to-date with design files and code, making the development process more efficient.

Looking ahead, Figma plans to expand Dev Mode's functionality based on user feedback, further improving designer-developer collaboration and alignment between design and code. The Visual Studio Code extension brings the power of Dev Mode into the developer's code editor, allowing for design review, notifications, comments, and code autocompletion. While Dev Mode and Figma for VS Code are currently free in beta, starting in 2024, access to Dev Mode will require a paid plan, with specific options available for developers who may not require the full suite of Figma features.

The design platform also announced another remarkable feature at the conference: the introduction of Variables. Serving as Figma's solution for design tokens, Variables revolutionize the way teams create and maintain multiple brands, devices, and themes efficiently. Design systems often struggle to provide flexibility to designers while maintaining consistency, and variables offer a holistic solution, allowing for reusable values that can be applied to designs for theming and tokens. They provide support for different variable modes, aliasing, scoping, and plugin and REST API integration. Figma's unparalleled support for both theming and design tokens ensures consistency in applying crucial UI elements like color and sizing. Use cases for Variables abound, ranging from establishing distinct appearances for mobile and desktop interfaces to effortlessly switching between light and dark mode. Additionally, Figma introduces advanced prototyping features using variables, conditions, and expressions.

Furthermore, Figma made an exciting acquisition during the conference by welcoming Diagram, an AI-powered design utility, into its expanding repertoire. This strategic move solidifies Figma's foray into the realm of artificial intelligence. It is worth noting that Figma is currently awaiting the completion of its acquisition process by Adobe, which has encountered some issues with the US DOJ, the UK's CMA and the EU. However, until a clear resolution is reached regarding this process, new updates and cool features that improve the user experience are always welcome! And if you are looking for an interesting alternative to Figma, you can always take a look at another cool UI Design and Prototyping Tool like Penpot.