Figma adds new development tools to assist designers and developers.

The eternal struggle between a designer's dreams and a developer's reality could soon become a bit easier if Figma has its say. The team behind the renowned user interface design tool has unveiled a set of new features aimed at bringing 'design and development' closer together.

Announced at ConFig 2023, Figma's Dev Mode was created to simplify and expedite transfers between designers and the development team, allowing them to collaborate on the same files while in different modes.

And that's not the only feature of the web design software intended to draw development teams deeper into the Figma ecosystem, as the company accelerates its designs to build an end-to-end product development tool.

The new workspace is the first step taken by the company to bridge two very different worlds. Figma stated that when it comes to paying users, developers are more likely to visit the prototyping site than designers, bringing with them a new set of preferred workflows that Dev Mode is designed to accommodate.

Multiple tools available

Users have access to a CSS box model, modern syntax with a tree view, and the ability to switch between dimension units to adapt to the codebase. The mode also adds support for plugins (useful for those working with Jira and Github), and the option to inspect files in Figma for VS Code, Microsoft's web development tool, and text editor.

Figma is introducing variables and advanced prototyping. Variables, essentially design tokens, aim to streamline the creation and maintenance of various brands, themes, and devices. For instance, if you need to establish light and dark modes for an application, variables simplify this once complex process.

On the other hand, advanced prototyping offers a more efficient method for constructing and refining designs within the web-based graphic design software. This involves utilizing features like conditional logic, mathematical expressions, and variables.