Config 2024: How we redesigned Figma (KC Oh, Ryhan Hassan, & Joel Miller, Figma)

Summary

Figma's design team introduces UI3, a significant evolution focusing on a more focused canvas and streamlined interface. They emphasize clarity, minimizing UI to prioritize user ideas, and AI-powered actions to automate routine tasks. UI3 also enhances the properties panel for better usability and introduces a design mode in Figma Slides for a seamless transition between design and presentation. The team reflects on the balance between innovation and honoring user muscle memory, aiming to provide the best editing experience for designers.

Takeaways

• 😀 Figma has maintained a consistent layout since its launch a decade ago, prioritizing user muscle memory by keeping new features in familiar places.
• 🚀 The UI3 update aims to simplify the interface and bring focus to the user's work, streamlining the experience for future functionalities.
• 🔍 An emphasis on clarity has been made in the new update, with improved affordances and labels in the properties panel for better usability.
• 📐 The properties panel has been reorganized to prioritize components and their properties, addressing the complexity that comes with rich design systems.
• 🛠️ Usability improvements have been integrated across the system, including enhancements to auto layout, templates, and other frequently used features.
• 💡 The future design tool by Figma will focus more on the user's ideas rather than the UI, with tools and controls that can be minimized for a full-screen experience.
• 🤖 AI-powered actions are introduced to automate mundane tasks, such as layer naming and prototype wiring, allowing users to concentrate on their creative ideas.
• 📑 The introduction of Figma Slides as part of the 'family of apps' allows for a consistent layout and design mode toggle, enhancing the presentation capabilities.
• 🔄 A significant reorganization of the information architecture was necessary to ensure the canvas remains the primary focus, with tools and controls repositioned for better workflow.
• 🔄 The 'minimize UI' feature was explored extensively, aiming to condense properties and bring them contextually next to the cursor, but stability and predictability were prioritized for the final release.
• 🔄 The redesign process involved numerous iterations and prototypes, emphasizing the need for stability and the gradual adjustment to new workflows and muscle memory.

Q & A

What is the main focus of the UI3 update for Figma?

The main focus of the UI3 update for Figma is to bring more focus to the user's work, organize the interface for the future, and ensure usability improvements that enhance the design workflow.

How has Figma maintained a consistent layout over the years?

Figma has maintained a consistent layout by keeping things in the same place as much as possible, even as new features like components, Auto layout, Dev mode, and variables were added, to avoid breaking users' muscle memory.

What is the significance of the 'minimize UI' feature in the new Figma update?

The 'minimize UI' feature in the new Figma update allows the interface to get out of the way, providing an immersive experience in the canvas and making it possible to further minimize the UI so users can focus on their ideas rather than the tool's interface.

What are the usability improvements made to the properties panel in UI3?

Usability improvements to the properties panel in UI3 include more transparent affordances, softer corner radius, the ability to see labels above controls, and a more stable panel design with persistent panel headers for better navigation.

How does the new layout panel in UI3 aim to improve the design process?

The new layout panel in UI3 merges dimensions with auto layout, provides a toggle button to switch between layout and auto layout modes, and groups position-related properties together to build stronger connections and make the design process more intuitive and responsive.

What is the 'design mode' in Figma Slides, and how does it work?

The 'design mode' in Figma Slides is a special toggle that brings in the familiar layer list and properties from the design tool, allowing designers to fine-tune their slides with the same level of control and precision as in Figma's design tool.

Why did the Figma team decide to keep the sidebars visible by default in UI3?

The Figma team decided to keep the sidebars visible by default in UI3 to prioritize stability and make the interface predictable for users, while still allowing the option to minimize the UI for a more immersive canvas experience.

What challenges did the Figma team face when redesigning the properties panel for UI3?

The Figma team faced challenges such as condensing the height of the panel, maintaining a balance between new design elements and existing muscle memory, and ensuring that the redesign would be impactful while still being stable and intuitive for users.

How did the Figma team approach the iterative process of designing UI3?

The Figma team approached the iterative process of designing UI3 by exploring hundreds of prototypes, testing them within the design team for real-world use, and adjusting the design based on feedback and the need for stability and predictability.

What is the importance of feedback in the development of UI3?

Feedback is crucial in the development of UI3 as it helps the Figma team shape and influence the product, ensuring that the redesign meets the needs and expectations of the user community and that it provides an undeniably great editing experience for designers.

How can users get access to the UI3 beta and provide feedback?

Users can sign up for the UI3 beta by logging into their Figma account and clicking the relevant button. The Figma team encourages users to reach out with feedback, both in person at the conference and online, to help refine the UI3 experience.