1. Dev Mode
Figma now has a special workspace called Dev Mode designed specifically for developers. It brings design and development closer together. Dev Mode is currently in beta and free for all users until 2023.
2. Connect to your tools & codebase
Developers can now integrate Figma with tools like Jira, GitHub, and Storybook. This makes collaboration between designers and developers much smoother.
3. Track what needs to go to production
This feature helps developers keep track of design elements and changes that need to be implemented in the final product. It streamlines the process of implementing updates.
4. Inspect files alongside code with Figma in VS Code
Developers can now review design files while coding in Visual Studio Code. It saves time by reducing the need to switch between different tools.
5. Variables!
The big update from Config is the introduction of variables. They allow for more efficient design processes by storing reusable values like colors, numbers, text, and booleans.
6. Aliasing support in variables
Aliases give variables different names based on their context. This helps the whole team understand and use them. For example, you can create a variable for a brand color and aliases like "Background Color" or "Border Color" that refer to it.
7. Scoping support in variables
Variables can have different scopes, like project, page, or component. This makes it clear where a variable applies. For example, you can have a global padding variable and a component-specific padding variable.
8. Variable modes with different values
Variable modes allow you to define sets of variables for each theme. For example, you can have color variables for light and dark themes. Switching themes updates all design elements that use theme variables.
9. Plugin and REST API support
These features extend the functionality of variables. Plugins automate tasks and provide insights into your design system. REST API allows integration with other systems.
10. Advanced prototyping
Create more dynamic and interactive prototypes using variables, conditions, and expressions. Variables hold values like numbers, text, colors, or booleans. Conditions and expressions enable logic and calculations in prototypes.
11. In-context editing and inline preview
Make changes to your designs and immediately see how they affect the prototype without switching views. This speeds up the design process and allows for rapid iteration.
12. Improved auto layout
Auto layout now allows elements to respond to container size better. Wrap lets elements flow to the next line when the group becomes too wide. Min/max height/width maintains design consistency.
13. Upgraded font picker
The new font picker helps you find the perfect font faster. Search for fonts by name, filter based on criteria, and preview font names in their own style.
14. Updates to the file browser
The file browser has improved search, sorting, and filtering options. It's easier to locate files and keep your workspace organized. There's a new 'Shared files' section for files shared with you by external teams.
15. Figma acquires Diagram!
Figma has acquired Diagram to enhance its AI capabilities. This acquisition will bring AI-powered features to the Figma platform.
