If you didn’t watch the full Config 2023 presentation then let me share with you a few of the exciting updates that will hopefully improve your experience designing in Figma.
Figma introduced a new workspace called Dev Mode designed specifically for developers. It includes several features that help bridge the gap between design and development.
This is a workspace within Figma designed to cater to the needs of developers and aims to make them feel at home within the platform. Figma has traditionally been seen as a design tool, and with the introduction of Dev Mode, Figma is seeking to bridge the gap between design and development.
Dev Mode is currently in beta and available for free to all users through 2023.
With Dev Mode, developers can seamlessly integrate with their existing tools and codebases, including popular ones like Jira, GitHub, and Storybook. This enables a more streamlined workflow for product teams and developers.
This is a handy feature that helps developers keep track of design elements and changes that need to be implemented in the final product.
This will help streamline the process of implementing changes and updates to a live product by providing a clear and organized overview of what elements are ready to be moved to the production phase.
With this feature, developers can review design files right where they code using Visual Studio Code. This brings design and development even closer together, reducing the need to switch between different tools.
The Figma for VS Code extension lets you navigate and inspect design files, collaborate with designers, track changes, and speed up design implementation — all without leaving your development environment. Use the Figma for VS Code extension to:
- See and respond to comments and activity in real-time
- Get code suggestions based on designs
- Link code files to design components
This was the big update from Config. The introduction of variables allows for more streamlined and efficient design processes. Variables can store color, number, text, and boolean values that can be reused throughout the design.
This feature allows for more context-based use of variables, making it easier for the entire team to understand and use them.
Aliasing allows you to create a different name (alias) for a variable, which can be useful when the same value might be referred to in different ways within a project.
For instance, you might have a primary brand color that is used as a background color in some places and a border color in others. Instead of creating separate variables for each of these, you can create one variable for the color value and then create aliases like “Background Color” or “Border Color” that reference the original variable. This way, if the brand color changes, you only need to update the original variable and all the aliases will reflect the change.
Scoping refers to the context in which a variable is available. In the context of design systems, a scope might be a particular project, a specific page within a project, or even a single component. Scoping helps manage the complexity of design systems by making it clear where a variable applies.
For instance, you might have a variable that defines a padding size that’s used commonly throughout your entire design. This could be a global scope variable. But within a specific component, you might want a different padding size. You can define a new variable with the same name but scoped only to that component. When you reference the padding variable within that component, it uses the component-scoped value. If you reference the padding variable elsewhere, it uses the global value.
When using variable modes in Figma, you can define sets of variables for each theme.
For instance, you might have color variables for your light theme like light-background and light-text, and corresponding variables for your dark theme like dark-background and dark-text.
These variables are not just limited to colors, they can also include other design elements like typography, spacing, or boolean values that control the display of certain elements.
Once these theme-related variables are defined, you can easily switch between themes in your design by simply toggling the variable mode. For example, if you want to see how your design looks in dark mode, you simply switch the variable mode to ‘dark’, and all design elements that reference the theme variables will update to reflect the dark theme values.
This extends the functionality of variables, helping you scale creation and management.
Plugin Support allows developers to create Figma plugins that interact with variables. For example, a plugin could be designed to automate the process of applying certain variables to a selection of objects or to generate a report about how variables are being used in a design file. This can significantly speed up repetitive tasks, enforce consistency, and provide valuable insights into your design system.
REST API Support enables the integration of Figma’s design data with other systems via its Application Programming Interface (API). This means that variables in Figma can be accessed and manipulated programmatically from outside of Figma, and likewise, external data can be used to update variables in Figma.
Bring your designs to life with more dynamism and interactivity using variables, conditions, and expressions, which allow you to create prototypes that react to user input in a much more realistic and responsive way.
- Variables in prototyping can hold values such as numbers, text, colors, or booleans (true/false). These values can be used and manipulated across your prototype to create more dynamic interactions. For instance, a variable might hold a count of how many times a button has been clicked, or store the current state of a toggle switch.
- Conditions allow you to create logic in your prototypes. You can specify different actions or outcomes based on the current value of a variable. For instance, you could have a rule that says “if the button has been clicked more than 5 times, navigate to a different screen”.
- Expressions enable you to perform calculations or transformations on your variables. For example, you could increment a counter variable each time a button is clicked, or calculate a new color based on user input.
These usability updates allow us to edit and preview our prototypes in the same view, speeding up the design process.
Traditionally, designers would need to switch between different views or modes to make changes to a design and then preview how those changes would look in the prototype. This could be a time-consuming process, especially when iterating on a design based on feedback or testing.
With this update, designers can now make changes to their designs and immediately see how those changes affect the prototype without having to switch views. This in-context editing and inline preview feature can significantly speed up the design process by allowing for rapid iteration and immediate feedback on design changes.
The auto layout feature now allows elements to respond to container size like never before.
- Wrap essentially enables your design elements to flow like text. If you have a group of elements arranged horizontally, and the group becomes too wide for its parent frame, the elements will automatically “wrap” to the next line. This is particularly useful when designing components that need to adapt to different amounts of content or screen sizes, like tags in a tag list, or items in a grid.
- Min or max height/width helps to maintain design consistency and integrity. By defining these constraints, you can ensure that an element never becomes too small (which might make it unreadable or unclickable) or too large (which might throw off your layout or overlap with other elements) regardless of the content it holds or the size of the screen it’s viewed on.
The new and improved font picker enables designers to find the perfect font quicker and easier than ever.
- Search in the updated font picker allows designers to quickly find the exact font they’re looking for by typing its name. This is particularly useful when working with a large font library, as it eliminates the need to manually scroll through the list to find the desired font. This can greatly speed up the design process and make it easier to experiment with different fonts.
- Filtering provides a way to narrow down the list of fonts based on specific criteria, such as serif, sans-serif, monospace, and more. This can be very helpful when you’re not sure which font to use and want to compare a few options within a certain category. It makes the process of choosing the right font less overwhelming and more focused.
- Preview font names in their own font is a small but significant update. Previously, you would have to apply a font to some text in your design in order to see what it looks like. Now, you can see a preview of each font right in the font picker, which can save you a lot of time and clicks. It also allows you to see at a glance how each font’s characteristics and personality might fit into your design.
One of the noticeable improvements is the enhanced search functionality. The new update allows users to quickly locate files or projects shared with them by external teams using specific keywords or phrases. This proves particularly useful when dealing with a large number of projects in Figma.
The file browser now has improved sorting and filtering options. Users can sort files based on various parameters like the date of the last modification, the file owner, or the team that shared the file. This allows for easier navigation and helps to keep your workspace organized.
Furthermore, there is a new ‘Shared files’ section. This is a dedicated space where all the files and projects shared with a user by external teams are grouped together. This can save a significant amount of time for users who frequently collaborate with different external teams, as they no longer need to sift through their own files to find those shared with them.
To accelerate the investment in AI, Figma has acquired Diagram!
Figma plans to work with Diagram to deliver AI capabilities across the entire Figma platform. It’s clear that the acquisition is a significant step toward enhancing the tool’s AI capabilities, and I think with the direction the tech industry is moving right now, it’s clear that it’s no time before Figma has a set of AI-powered features.