As the first day of the highly anticipated Figma Config 2023 conference drew to a close, it's time to delve into some of the captivating announcements.
New Dev Mode
One of the biggest announcements is, of course, Dev Mode (now available in open beta), a new space in Figma for developers with features that help translate design into code, faster. Figma stated that on their paid plans more developers visit Figma than designers. Now the company is bridging the gap between design and development, so teams can build products faster. This starts with making Figma a better place for developers.
What are the features Dev Mode offers:
- Inspect designs: Simply hover and click objects to get details like measurements, specs, and styles - all within a safe space that won't impact the design file.
- Copy relevant code: Generate production-ready CSS, iOS, or Android code snippets from your design — or use a plugin to customize code for whatever framework you’re using.
- Keep work aligned and connected: Streamline your workflow and stop jumping between your design libraries, codebase, and project management tools when you bring everything together in Figma (Read more).
- Add structure to handoff: Seamlessly transition from design to development with new ways to organize files and stay up to date on changes.
- More developer tools for productivity.
Figma Acquires Diagram: The Next Chapter in Design
Of course, there were some news about AI. Figma acquired Diagram, an AI-powered design tool platform.
It is anticipated that in the near future, Figma's AI capabilities will enable us to:
- Generate text for designs;
- Create elements on demand or based on context;
- Quickly replace content on demand (for example, replace photos in AI-generated cards);
- Summarize ideas;
- Generate production-ready code for build;
Figma states that AI will help designers bridge the gap between intent and action more smoothly. With fewer clicks and decisions.
Other Figma Announcements
- Variables to streamline your design systems with tokens and theming.
- Advanced prototyping to create realistic prototypes in fewer steps: Conditional logic, mathematical expressions, variables, and the inline preview (available on Professional plan and up).
- Auto layout updates including wrapping and min/max: Wrap items to a new line and set minimum and maximum widths and heights.
- Font picker: Peruse and preview fonts.
- An updated file browser: Global search and notifications.