Config 2023, Figma’s highly anticipated annual conference, saw the launch of several huge updates to the popular design tool. With a focus on empowering teams and streamlining workflows, Figma’s new features and releases promise to revolutionise the overall design and development process.
Dev Mode
Introducing Dev mode, a new workspace in Figma designed specifically for developers. Aimed at bridging the gap between design and software development, Dev mode enables developers to harness familiar tools to more efficiently translate designs into production code.
Much like a browser inspector, Figma’s new inspect panel provides developers with the ability to easily navigate design files and extract measurements, specifications, styles and assets. This information is also available as generated code snippets written in the user’s preferred language and units.
Using Dev mode, developers can also view sections marked as ready for development and compare previous versions of a frame to more easily identify changes.
Additionally, support for a range of new developer-focused plugins offers seamless integration with popular tools such as Jira, GitHub and Storybook.
Figma for Visual Studio Code Extension
Developers can now integrate Figma directly into their workflow using the official Figma for Visual Studio Code (VS Code) extension, eliminating the need to constantly switch between tools. With this plugin installed, developers can inspect design files, receive comment notifications on projects and access autocomplete code suggestions without having to leave the comfort of their code editor.
Dev mode and Figma for VS Code are currently in Beta and free for all Figma users for the rest of 2023.
Variables
Variables are another exciting addition to Figma, making it easier than ever to create consistent and highly adaptable designs, design systems and prototypes. Variables in Figma can be used to store reusable colour, number, text and boolean values, with plans for more data types to be supported in the future. These values can then be applied to various design properties and prototyping actions.
Related variables can be organised into collections and groups. Variables may even contain multiple definitions, each associated with a different mode or design context, saving designers valuable time and effort when creating themes. The ability to alias variables also removes the need to manually alter all instances when updating a design.
Additionally, Figma’s new Plugin API and REST API provide developers with the capability to leverage variables to create custom integrations, automate workflows and manipulate design variables programmatically for increased efficiency and flexibility.
Advanced Prototyping
Designers can now leverage variables in Figma, along with advanced features such as expressions and conditionals, to create highly interactive and realistic prototypes with fewer frames.
Using the new “Set Variable” action, designers can manipulate the values of variables using literal values or expressions. These expressions may contain mathematical operations and/or reference other variables. The new “Conditional” action also allows designers to utilise logical if-else statements to check if a certain condition is met before performing an action.
Additionally, Figma now supports inline previews to view prototypes directly from the canvas without needing to enter the Preview or Play mode.
Improved Auto Layout
Updates to Figma’s powerful auto layout feature make it even easier to create flexible and responsive designs. With the latest version of auto layout, users can enjoy additional capabilities including automatic object wrapping and application of size constraints.
By selecting the new “wrap” option, designers can preserve the integrity of their design by ensuring that an element, if required, will automatically wrap onto a new line. Similarly, the ability to set minimum and maximum object widths and heights is helpful in ensuring elements stay within desired size limits whilst adapting responsively to different screen sizes and content variations.
The latest version of Figma also simplifies the task of applying even gaps between auto layout objects, an effect previously requiring users to navigate advanced settings to achieve. With Figma’s new drop-down menu, designers can simply select “auto” to automatically adjust the spacing between objects based on the width of the parent frame.
Upgraded Font Picker
Figma’s new font picker empowers designers to select the perfect fonts for their projects. This new tool allows users to preview various fonts prior to integration whilst also offering improved search functionality and category filters to save valuable time and effort.
Updated File Browser
Figma has improved file searching and team collaboration with its updated file browser. With the addition of shared projects and files tabs, users can now effortlessly locate and access files shared by external teams. Search, recent and notification features also now cover content across a user’s entire account eliminating the hassle of having to dig through folders to find design assets.
Figma Acquires Diagram
Given the growing prevalence of AI technology in 2023, it wasn’t surprising when Figma revealed future plans to integrate this technology into their application. At Config 2023, Figma announced its official acquisition of Diagram. Diagram was founded by Jordan Singer, a long-term member of the Figma community responsible for building several 3rd-party AI-assisted tools. In collaboration with the Diagram team, Figma plan to deliver AI capabilities across the platform, eventually transforming the entire product development process, from synthesising early ideas based on text prompts to producing component recommendations based on existing design systems.
Figma has consistently pushed boundaries and redefined industry standards. Figma’s latest updates and releases are no exception to this. With the introduction of Dev mode and Figma for VS Code developers can now embrace a familiar workflow and collaborate more effectively with other members of their team. The addition of variables to Figma brings a new level of adaptability to design systems and advanced prototypes. Improved auto layout features, an upgraded font picker and an updated file browser also enhance the overall user experience to streamline the design process. Finally, Figma’s acquisition of Diagram demonstrates the company’s commitment to innovation and hints at a very exciting future for the design and development communities!