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.

Screenshot of the new Dev mode inspect panel
Figma Dev mode (Image credit: Figma)

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.

Screenshot of the code snippets language dropdown menu
Code snippets are generated for web, iOS or Android (Image credit: Figma)

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.

Screenshot of a section labelled as ready for development
Label sections as ready for development (Image credit: Figma)
Screenshot of the current frame being compared to a previous version
Compare different versions of a selected frame (Image credit: Figma)

Additionally, support for a range of new developer-focused plugins offers seamless integration with popular tools such as Jira, GitHub and Storybook.

Screenshot of the Dev mode plugins menu
Dev mode plugins view (Image credit: Figma)

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.

Screenshot of the Figma for VS Code extension
The Figma for VS Code extension (Image credit: Figma)

Dev mode and Figma for VS Code are currently in Beta and free for all Figma users for the rest of 2023.


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.

List of variables defined for light and dark modes
Variables in Figma (Image credit: Figma)

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.

Screenshot of the variables modal with annotations labelled groups, collections, variables and modes
Variables modal (Image credit: Figma)

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.

Screenshot of the prototyping actions menu containing the new set variable and conditional options
The new prototyping actions (Image credit: Figma)

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.

Screenshot of an advanced prototype conditional expression
Expressions and conditionals in prototypes (Image credit: Figma)

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.

Auto layout buttons
The new auto layout (Image credit: Figma)

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.

Screenshot of an element set to a minimum of 80px wide
Using auto layout to set size constraints (Image credit: Figma)

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.

Screenshot of the new font picker
The new font picker (Image credit: Figma)

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.

Screenshot of the new file browser
The new file browser (Image credit: Figma)

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.

Diagram logo
Figma acquires Diagram (Image credit: Figma)

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!