Figma - Deep Dive: Designing Figma UI3 (Project Walkthrough)
The discussion centers around the redesign of Figma's UI3 toolbar, internally known as the 'tool belt.' The main goal was to open up as much canvas space as possible by removing the solid bar across the top, which was seen as obstructive. The redesign process involved extensive exploration and collaboration among designers, with a focus on making the design intuitive and less intrusive. The team used a messy, iterative approach, encouraging feedback and exploration from all team members. They also conducted research sessions with internal and external users to gather feedback, ensuring the design met user needs while maintaining a clear vision. The final design moved tools to the bottom, freeing up vertical space and making the interface more airy and less cluttered. The process emphasized the importance of collaboration, feedback, and adaptability in design, with the team continuously refining the design based on user feedback and internal discussions.
Key Points:
- The redesign aimed to maximize canvas space by removing the top bar and relocating tools to the bottom.
- Collaboration and feedback were crucial, with team members encouraged to explore and iterate on designs.
- Research sessions with users helped refine the design, ensuring it met user needs while maintaining a clear vision.
- The design process was iterative and messy, allowing for flexibility and creativity in finding the best solutions.
- The final design improved usability by making the interface less cluttered and more intuitive.
Details:
1. 🎨 Embracing Messiness: Design Exploration
- The messy work approach enhances creative flow by allowing broad exploration and flexibility in design iteration.
- Designers benefit from duplicating and tweaking designs to solve UI problems effectively.
- Opening up the canvas expands the design space, encouraging innovative solutions.
- The iterative process involves evolving designs through various states, enhancing adaptability and refinement.
- Testing subactions in submenus shows a strategic approach to UI structure, considering user experience and functionality.
2. 🔍 Introduction to Tim Van Damme's Figma Journey
- Tim Van Damme, also known as maxw on Twitter, has been instrumental in evolving Figma's user interface, particularly through his work on the 'tool belt', Figma's new toolbar.
- Van Damme joined the Figma team over 9 months ago, diving into a project that had been in development for 2-2.5 years, initially spearheaded by Ryan Hassan.
- The 'tool belt', a name reminiscent of Van Damme's previous work on a similar feature called 'bat belt' at Abstract, aims to streamline user experience by providing a more intuitive interface for designers.
- His contributions are part of a broader effort to enhance Figma's functionality and user engagement, reflecting his deep expertise and innovative approach in UI design.
- The development of the 'tool belt' has been a collaborative process, involving overcoming challenges such as integrating new features without disrupting existing workflows.
3. 🛠️ Crafting the Figma Tool Belt
- Design exploration involves extensive iteration, duplication, and tweaking, allowing for a wide range of creative possibilities.
- Team collaboration is crucial, as different designers contribute to and inspire various branches of exploration, ensuring a diverse and dynamic creative process.
- Annotations and comments are vital for maintaining clarity and context in design files, making it easier for team members to provide feedback and for future designers to understand past explorations.
- Maintaining organized and annotated design files helps avoid repeated mistakes and dead ends, facilitating smoother transitions when new designers take over projects.
- Designers work in shared 'scratch files' where they commonly annotate and comment directly on the page, fostering an open and collaborative environment.
- There is a focus on making design files intuitive and easy to grasp quickly, which aids in effective feedback and continuity in design projects.
- Specific tools within Figma, such as the commenting feature and version history, enable seamless collaboration and exploration by allowing designers to track changes and discuss iterations in real-time.
- The use of shared libraries within Figma supports consistency and efficiency by enabling team members to access and utilize common components and styles.
- Real-world example: A design team reduced project turnaround time by 20% through effective use of Figma's collaborative features, such as real-time editing and shared templates.
4. 🚀 Goals and Challenges in UI3 Redesign
- The UI3 redesign focused on maximizing canvas space by removing the 48-pixel tall toolbar from the top, which previously housed tools, selection actions, file info, and sharing options.
- Tools were relocated to a new tool belt at the bottom, freeing up the top space and making the interface more open and less cluttered.
- Selection actions are now positioned closer to the item information, and sharing options are moved to the right sidebar, while file information remains at the top left.
- The redesign aimed to address the need for more vertical screen real estate, considering most screens are landscape-oriented.
- The project involved several weeks of intense design exploration and was worked on until two weeks before the release event, highlighting the ongoing nature of design evolution.
- Relocating tools to the bottom tool belt enhances accessibility and user interaction by aligning with common design practices seen in mobile interfaces.
- The new layout with repositioned sharing options in the right sidebar improves the workflow by reducing distractions and focusing user attention on primary tasks.
- The removal of the toolbar and strategic relocation of elements were driven by user feedback that emphasized the importance of more canvas space and streamlined navigation.
5. 🔄 Iterative Design and Feedback Loops
- The initial design by Ryan required iterations to align with advanced styling needs, highlighting the importance of flexibility in design processes.
- Rounded corners on buttons created centering issues with icons, leading to critical redesigns to maintain aesthetic functionality.
- Unpredictable tool belt width affected menu option visibility, demonstrating the need for adaptable design elements that accommodate various display configurations.
- Stress-testing designs across different modes, like Dev and regular, ensured consistent user experience and identified potential adaptability challenges.
- Vertical tool belt versions were considered but not executed, reflecting iterative decision-making based on practicality and user usability.
- Comments and documentation provided critical feedback mechanisms, facilitating seamless onboarding and iterative improvement.
- Structured design reviews and critiques were instrumental in aligning the design with strategic goals, ensuring readiness for final approval.
6. 📊 Balancing Feedback and Vision
- Initially, the redesign of UI3 was kept confidential to create an element of surprise, indicating a strategic approach towards product reveal.
- Feedback was solicited both internally from designers and externally from users to ensure diverse perspectives were incorporated.
- Internal feedback from the design team was used to refine initial concepts before external testing.
- External user feedback was gathered through research sessions, allowing users to interact with the new UI using their own files, providing contextually relevant and actionable insights.
- Patterns in feedback were identified and prioritized, allowing the team to address common concerns effectively rather than reacting to each piece of individual feedback.
- Design decisions were made with a clear vision in mind, balancing user feedback with the team's creative direction to maintain a coherent product vision.
- Despite being subjective, design changes were guided by user feedback patterns and objective data to ensure improvements were meaningful and aligned with user needs.
- The team acknowledged that different design teams or individuals could produce different outcomes, highlighting the subjective nature of design and the importance of a unified vision.
- Continuous improvement is emphasized, with a commitment to act on feedback and data patterns as more users engage with UI3.
7. 🧩 Stress Testing and System Integration
7.1. Stress Testing New Tools
7.2. Feedback and Collaboration
8. 💬 Collaborative Design Culture
- Utilize a 'sandbox' approach for design iterations, allowing for numerous revisions and a wide exploration of ideas before finalizing a design direction.
- Implement finalized designs into a centralized UI library, ensuring all team members access the updated components seamlessly, facilitating consistent design updates.
- For major design changes, use separate files to manage revisions, while smaller tweaks can be handled through branching in the library file, allowing for efficient merging and integration.
- Embrace feedback from multiple stakeholders to enhance design objectivity, resulting in a more robust and well-rounded final product that aligns with collective insights rather than individual perspectives.
- Adopt an iterative design process that involves adding multiple elements initially and progressively simplifying the design, leveraging team feedback to maintain objectivity in deciding which elements to keep or remove.
- Maintain a record of discarded design ideas as learning artifacts, which can serve as reminders of past explorations and help inform future design decisions.
- Encourage a culture where expansive design ideas are explored and documented, even if not implemented, to foster creativity and innovation within the team.
- Value iterative design artifacts as storytelling tools that document the evolution of a design from inception to completion, providing a narrative of the design process.