Figma Enhances Design-Developer Collaboration With New Variables And Prototyping Features

What Is Figma?

Figma, the leading product-design platform, has unveiled various innovative features to foster collaboration between designers and developers. With increasing developers comprising a significant portion of its user base, Figma’s latest enhancements seek to bridge the gap between design and development, streamlining the creative process and reducing friction.

Best Interface Guider For Developers

During the annual conference held in San Francisco, Figma announced several key updates to its flagship design tool. One of the standout additions is introducing a new work environment called Dev Mode, tailored explicitly for developers. This mode allows designers and developers to work on the same designs within the same file but in different modes. Dev Mode provides developers with a dedicated interface, facilitating easy access to essential information while eliminating the need for version updates and back-and-forth conversations with designers. Moreover, it enables developers to generate production-ready code snippets for CSS, iOS, and Android and seamlessly integrate with tools like Jira, GitHub, and Storybook to automate workflows.

Group Features For Designers

In addition to Dev Mode, Figma has introduced variables and advanced prototyping capabilities. Like coding variables, Figma’s design variables allow teams to create and maintain multiple brands, devices, and themes more efficiently. They support design tokens as single sources of truth for consistently applying UI elements such as color and sizing. With variables, designers can group features that require toggling between different modes, simplifying the design process significantly. In the development mode, a developer can add its platform and units—for example, web, ios, px, rem, etc. In addition, developers can set a color theme, find plugins, etc. With this, they can add languages and track their tasks. You can also integrate your work like “Figma for VS” or “Figma for Slack & Microsoft Teams,” etc. With this additional feature, the projects can keep moving even if you are unavailable on Figma.

Improved Auto Layout Tool

Furthermore, Figma now offers advanced prototyping directly within its platform, eliminating the need for users to switch between separate tools or windows. This enhancement empowers users to design and test their prototypes in the same Figma canvas, resulting in more realistic and refined prototypes. Alongside these significant updates, Figma has also improved its auto layout tool, allowing users to create fully responsive designs. The font selector now features enhanced filtering and search capabilities, enabling users to locate fonts quickly. The redesigned file browser also offers a user-friendly interface for rapidly accessing shared files, projects, and notifications.

How Much It Costs?

Dev Mode is currently in open beta and available for free until the end of 2023. Starting in 2024, users can purchase Dev Mode access at $25 per seat/month for the Organization plan and $35 per seat/month for the Enterprise plan. Variables are now available in open beta, with varying features depending on the Professional and Organization plans. Advanced prototyping is immediately accessible for users on the Professional plan and above.

Last Words

Figma’s latest updates reflect the company’s commitment to empowering collaboration between designers and developers, enabling seamless and efficient workflows within the product-design process.