Figma - Deep Dive: Designing Figma's UI3 icons (project walkthrough)
The conversation highlights the process of redesigning icons for Figma's UI3, focusing on creating a balanced and user-friendly icon set. The transition from UI2 to UI3 involved softening sharp edges to make icons appear more friendly and human, which is beneficial for users on non-retina screens. The redesign process included examining existing icons, identifying stylistic patterns, and creating guidelines for consistency. Practical examples include the redesign of the 'Scroll to' icon, which was made more playful by incorporating an anchor symbol, and the 'Conditional' icon, which was improved for clarity by using a check mark and cross. The discussion also covers the importance of involving other designers in the icon creation process, encouraging them to contribute and learn. The iterative design process involves sketching, exploring existing patterns, and refining ideas in Figma, ensuring icons are both functional and aesthetically pleasing.
Key Points:
- Redesigning icons for UI3 involved softening sharp edges for a friendlier appearance, especially beneficial for non-retina screens.
- Creating guidelines and consistency in icon design helps maintain a balanced visual weight across the icon set.
- Involving other designers in the icon creation process fosters collaboration and learning, enhancing the overall design quality.
- Practical examples like the 'Scroll to' and 'Conditional' icons demonstrate the importance of clarity and playfulness in design.
- Iterative design involves sketching, exploring existing patterns, and refining ideas to ensure functionality and aesthetics.
Details:
1. 🎨 The Art of Icon Design: Balancing Sharpness
- UI3 icons at Figma are intentionally designed to be less sharp than those in UI2, which benefits non-retina screens by providing a more visually appealing experience.
- Removing sharpness from icons can make them appear more playful and add charm, akin to crafty street signs in small towns.
- The design process involves iterations; initial overly complex designs were simplified to better fit the overall system, as seen with the Scroll to Icon which evolved to maintain its symbolism but with a more refined and cohesive design.
- The transition from UI2 to UI3 reflects a broader trend in design towards simplicity and functionality, where aesthetic choices are made with user experience as a priority.
2. 👨💻 Figma's Icon Evolution: A Designer's Journey
- The designer joined Figma during the development of the UI3 icons, with no existing guidelines for icon design, highlighting a gap in structured design processes.
- To address the lack of guidelines, the designer initiated the creation of new icons while simultaneously developing comprehensive guidelines for UI3, ensuring consistency and clarity.
- Approximately 200 new icons were created for the UI3 release, demonstrating the extensive scope of the redesign project.
- Existing icons were inconsistent, necessitating a revision and expansion to enhance uniformity and functionality across the icon set.
- The transition from UI2 to UI3 represented a significant stylistic shift, indicating a strategic decision to modernize the icon aesthetic and improve user experience.
3. 🔍 UI 2 vs. UI 3: A Comparative Analysis
3.1. Icon Design and Visual Aesthetics
3.2. User Experience and Interface Philosophy
4. 🚦 Crafting Consistency with a Touch of Playfulness
- Icons should maintain consistency akin to traffic signs to prevent confusion, especially in high-traffic areas where quick information absorption is crucial.
- In unique or low-traffic areas, playful elements can be infused into icons to enhance charm without causing confusion, such as transforming a scroll-to icon into an anchor symbol.
- Prototyping stages offer an opportunity to experiment with fun elements in icons, allowing designs to evolve creatively while keeping the overall system intact.
- Consistent iconography ensures quick comprehension, while playful designs in controlled areas can make interactions more memorable and enjoyable.
5. 🔄 Embracing Iteration and Feedback in Design
- Initial design challenges included communicating complex actions like 'mouse over' with icons, highlighting the need for effective iteration and feedback.
- Feedback-driven changes significantly improved icon clarity by adding elements like a cross and check mark to denote outcomes, demonstrating practical improvements.
- Balancing visual weight and context within icon sets is crucial for effective prototyping; iteration helped refine these aspects, emphasizing the importance of cohesive design collections.
- The decision to use a d-pad icon over a full console shows how iteration can incorporate personal design preferences and nostalgia, impacting final outcomes.
6. 💡 Creating Unique Icons: From Concept to Execution
- Custom icon creation is labor-intensive but allows for flexibility and customization beyond existing icon sets.
- Using pre-existing icon sets is sufficient for many applications, but complex apps like Figma often require unique icons not found in standard sets.
- Building icons internally or contracting them is necessary when required icons are not available in existing sets.
- Involving and training other designers in the icon creation process can distribute workload and foster skill development.
- Encouraging designers to create their own icons ensures they are contextual and tailored to specific project needs.
- Collaboration with designers aids in achieving pixel-perfect results and consistent stylistic choices in icon libraries.
- Training designers involves teaching them the technical aspects of vector graphics, scalability, and the use of design software tools.
- The process of creating icons includes brainstorming, sketching, digital drafting, and iterative feedback and refinement.
- Technical aspects of icon creation, such as maintaining consistency in line weight and color palettes, are crucial for a cohesive design.
7. 📝 The Design Process: Sketching and Prototyping
- Start icon design by identifying the type needed; use existing conventions for well-known actions to maintain user familiarity.
- Conduct research on existing icon patterns using search engines to understand current trends for unique designs.
- Begin with sketching to quickly explore ideas before moving to digital tools like Figma.
- Use paper and pen for fast, cost-effective prototyping, transitioning to digital platforms for collaboration and feedback.
- Icons enhance user interface design, aiding recognition and understanding, especially in menus with text.
- Follow design system guidelines on sizing, stroke thickness, and styles to ensure consistency.
- Balance visual weight and complexity by assessing icons from a distance to ensure cohesion.
- Iterate on icon designs by refining details, recognizing the impact of small changes.
- Pair icons with text to clarify complex concepts, enhancing user understanding.
- Experiment with abstract designs for highlights and shadows, ensuring effective communication of meaning.
- Transition from sketching to digital tools for detailed refinement and collaborative feedback.