Introducing Figma’s Cutting-Edge Features: What’s New in Config 2023?
Every year, design enthusiasts eagerly await Figma’s annual design conference, Config, to catch a glimpse of the latest advancements in the world of digital design. Held on June 21–22, Config 2023 exceeded expectations, leaving attendees buzzing with excitement and anticipation. Figma, the popular collaborative design tool, unveiled a slew of remarkable features that promise to reshape the way designers and developers work. In this article, we will delve into the key highlights and explore the groundbreaking features announced at Config 2023.
1.Dev Mode
Figma introduces Dev Mode, a new feature that streamlines the transition from design to development, making the process faster and more efficient. Designers can label a project as ‘Ready for Dev,’ allowing developers to seamlessly access the required information without the need for additional version updates or excessive communication.
Figma CEO, Dylan Field, summarizes the features of Dev Mode with the following points:
- Understand and translate designs to code faster
- Connect to their tools and codebase with plugins including Jira, GitHub, and Storybook
- Track what needs to go to production
- Inspect files alongside where they code with Figma in VS Code
Additionally, Figma has announced that Dev Mode is now in beta and available to everyone for free through 2023.
2.Variables
Design systems are crucial for supporting diverse digital product design needs. However, the focus on structure often limits designers’ flexibility. As products become more complex, design systems struggle to accommodate multiple themes, platforms, brands, and more. Design system managers resort to using multiple libraries, extensive component sets, and custom plugins, but the designs remain disconnected from the code.
Addressing the community’s demands, Figma introduces variables as a holistic solution that streamlines the design creation process. Variables strike a balance between consistency and flexibility, enabling designers to work efficiently. With this launch, Figma aims to bridge the gap between design and code, providing a connected and seamless design experience.
Dylan Field highlights the potential use cases and adaptability of variables in design processes, including;
- Color, number, text, and boolean variables that store reusable values and can be applied to designs for theming and tokens
- Aliasing and scoping support to contextualize variables for the whole team
- Variable modes with different values (e.g. light and dark) that can be toggled to change between design themes
- Plugin and REST API support for variables to help you scale creation and management
3.Advanced Prototyping
Figma introduces an exciting new feature called Advanced Prototyping, enabling designers to create highly dynamic prototypes and iterate on their designs more efficiently. Advanced Prototyping reduces the need for switching between multiple tools or windows, making it easier for designers to experiment and make adjustments early in the design process. By minimizing the number of frames and connections, designers can save time and effort.
Dylan Field highlights the standout features of Advanced Prototyping, including;
- Advanced prototyping features with variables, conditions and expressions
- Usability updates like in-context editing and inline preview, to edit designs and preview prototypes in the same view
4.Other Updates
In addition to the three major features, Figma announces three additional updates to enhance the user experience of the app;
Auto Layout: Users have the option to utilize an improved auto layout feature that includes the ability to wrap elements and define minimum and maximum height/width. This enhancement provides users with more control and flexibility in designing layouts.
Font Picker: The font picker has been improved to assist users in searching and filtering for specific fonts they need. Additionally, users can easily preview font names in their own font, making it effortless to find the perfect typography for their designs.
File Browsing: Updates to the file browser enhance the user experience by making it simpler for users to find files and projects that have been shared with them by external teams. This streamlines collaboration and ensures seamless access to relevant design assets.
5.Acquiring Diagram
Figma, actively following AI innovations, has acquired Diagram, a third-party Figma plugin for AI-powered content creation. This acquisition aims to expedite design and product processes by seamlessly integrating AI into Figma for rapid implementation.
Conclusion
Figma’s Config 2023 brought forth an impressive array of innovative features that are set to revolutionize the landscape of digital product design. From the introduction of Dev Mode, streamlining the design-to-development process, to the implementation of Variables, bridging the gap between design and code, Figma is empowering teams to create more efficiently and collaboratively. The addition of Advanced Prototyping further enhances designers’ ability to create dynamic and interactive prototypes seamlessly.
Moreover, the user experience updates, including Auto Layout, Font Picker, and File Browsing improvements, demonstrate Figma’s commitment to providing a user-friendly and intuitive design environment. With the acquisition of Diagram, an AI-powered content creation plugin, Figma continues to stay at the forefront of AI innovation. These groundbreaking features announced at Config 2023 showcase Figma’s dedication to empowering designers and streamlining their workflows. As we embrace this new era of design collaboration, Figma remains at the forefront, leading the way towards a more connected and efficient design process.
Ps.
I recommend checking out the playgrounds released by Figma to make all these features more comprehensible. These playgrounds provide a valuable opportunity to explore and interact with the features in a practical manner, enabling a better understanding of their capabilities.
Resources
