Figma revealed a range of new features for its product design platform during its annual Config conference in San Francisco. The aim is to bridge the gap between design and development, enhance collaboration, and streamline the creative process. The announced features include a unique work environment for developers called Dev Mode, design variables, and advanced prototyping.
Interestingly, over one-third of Figma's weekly users are developers, despite the platform being primarily a design tool. Avantika Gomes, product leader at Figma, attributes this to the web-based nature of the platform, which invites more collaborators like developers.
Dev Mode provides a separate interface for designers and developers to work on the same designs within the same file while operating in different modes. This setup eliminates the need for version updates and back-and-forth conversations between these two roles. Developers can access crucial information while generating production-ready snippets of CSS, iOS, and Android code. Dev Mode also connects to tools like Jira, GitHub, and Storybook for seamless workflow automation.
Furthermore, Dev Mode enables linking design systems in Figma to component code and documentation. This function allows inspection of Figma files, collaboration with designers, and easy receipt of Figma notifications without leaving the code editor. Developers can also utilize labels to track design statuses, organize design files based on their development stage, and swiftly compare changes.
Along with Dev Mode, Figma is introducing design variables to streamline the process of creating and maintaining multiple brands, devices, and themes, much like variables in coding. Figma variables also support design tokens, which establish consistent UI elements such as color or sizing. For example, if a UI interface has light and dark modes, variables allow designers to group elements in regions that can collectively switch between these modes.
Besides variables, Figma rolls out advanced prototyping, enabling users to develop more realistic prototypes directly in the Figma canvas. This enhancement minimizes the need for toggling between different tools or windows for designing and testing prototypes. Sho Kuwamoto, vice president of product at Figma, believes that advanced prototyping yields better results by providing the most realistic prototypes.
Furthermore, Figma updates its auto layout tool for fully responsive designs and its font picker with a new menu, search capabilities, and a visual index for faster font filtering and location. Figma's file browser also exhibits a new UI for quick access to shared files, projects, and notifications.
Dev Mode is in open beta and free to try through 2023, with pricing options for access in 2024 at $25 per seat/month on Organization and $35 per seat/month on Enterprise. Variables are available in open beta, with feature availability varying between Professional and Organization plans. Advanced prototyping is accessible for users on the Professional plan and above. By incorporating these features, Figma ensures seamless collaboration between designers and developers, without ignoring the growing developer user base.
Platforms like Figma and AppMaster play a crucial role in streamlining design and development. AppMaster, a no-code platform, empowers users to create backend, web, and mobile applications visually, enhancing productivity and cost-effectiveness in the process.
