Figma, the popular product-design application, has unveiled several new capabilities aimed at bridging the gap between design and development. These announcements were made during Figma’s annual Config conference held in San Francisco. The updates include a dedicated work environment for developers, the introduction of variables, and advanced prototyping features, all of which are designed to streamline the creative process and enhance collaboration between designers and developers. Figma has recognized that a significant portion of its user base consists of developers, despite being primarily known as a design tool.
Avantika Gomes, a product leader at Figma, expressed her amazement at the fact that over a third of Figma’s weekly active users identify as developers. She attributed this phenomenon to Figma’s web-based nature, which has enabled collaboration with a broader range of professionals, including developers. To cater to this growing demographic, Figma has introduced Dev Mode, a feature that allows designers and developers to work on the same designs within the same file but in different modes. This allows developers to access crucial information without relying on version updates or continuous communication with designers.
Dev Mode also offers additional benefits for developers, such as the ability to generate production-ready snippets of CSS, iOS, and Android code. It also enables integration with popular tools like Jira, GitHub, and Storybook, automating workflows and improving efficiency. Moreover, developers can link design systems to component code and documentation, inspect Figma files, collaborate with designers, and receive Figma notifications directly within their code editor. Labels are now available to track design status and organize design files based on their development stage, making it easier to compare changes.
Sho Kuwamoto, the vice president of product at Figma, acknowledged the challenges of improving the platform for designers while accommodating the growing developer community. Dev Mode resolves this issue by providing developers with a separate, optimized space tailored to their needs. It ensures that developers can obtain the necessary tools and information without disrupting the workflow of designers.
In addition to Dev Mode, Figma has introduced variables and advanced prototyping. Design variables function similarly to coding variables, allowing teams to create and maintain multiple brands, devices, and themes more efficiently. Design tokens are also supported, serving as a single source of truth for UI elements like color and sizing. This means that instead of manually toggling between different design elements, variables enable collective switching, simplifying the process.
Advanced prototyping enhances the realism of prototypes created within Figma, reducing the need for switching between various tools or windows. Users can now design and test their prototypes within the same Figma canvas, resulting in more accurate representations and better results.
Figma has also made updates to its auto layout tool, enabling users to create fully responsive designs. The font picker has been improved with new filters and a visual index for faster font selection. Additionally, the redesigned file browser offers a more intuitive user interface for quickly locating shared files, projects, and notifications.
Dev Mode is currently available for free during its open beta phase, which extends until the end of 2023. Starting in 2024, users will have the option to 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 specific features varying depending on the user’s plan (Professional or Organization). Advanced prototyping is accessible to users on the Professional plan and above.
