Figma Config 2023 — 15 sweet updates!

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.