Config 2024: Design systems best practices

Summary

The Figma Advocates, Anna, Alexia, and Chad, delve into building effective design systems. They emphasize core principles like caution in complexity, grounding in priorities, and validation before execution. The discussion includes actionable tips on Figma features, insights on user-centric design systems, and the importance of communication between designers and developers. They also highlight the significance of community building and data-driven decision-making for the continuous evolution and adoption of design systems.

Takeaways

• 🌟 **Embrace Complexity with Caution**: Design teams often face challenges with complexity, which can lead to rigid design systems and higher maintenance costs.
• 🔍 **Prioritize Wisely**: Aligning design systems with organizational priorities such as efficiency, consistency, and communication helps guide decision-making and reduce unnecessary complexity.
• 📊 **Validation Before Execution**: Teams that validate changes before full implementation avoid disruptions and maintain trust in the design system.
• 🔧 **Iterative Approach to Design System Updates**: Start small, gather feedback, and iterate to find the best solution for the design system.
• 👥 **Designer and Developer Collaboration**: Open communication between designers and developers is crucial for a successful design system.
• 🔗 **Leverage Figma Features**: Utilize Figma's component sets, props, and variants to manage complexity and create a user-centric design system.
• 📚 **Documentation and Resources**: Provide champions with resources like educational materials and documentation to help spread awareness and understanding of the design system.
• 🤝 **Building a Community**: Identifying and engaging champions who are enthusiastic about the design system can encourage others to adopt it.
• 📈 **Use Analytics and Metrics**: Both qualitative and quantitative data can provide insights into the usage and health of the design system, guiding future improvements.
• 🔄 **Adapt and Evolve**: Design systems are not static; they require ongoing attention and updates to support new use cases and technologies.
• 📝 **Plan and Communicate Changes**: When updating the design system, plan the changes, test their impact, and communicate them clearly to avoid confusion and disruption.

Q & A

What roles do Anna, Alexia, and Chad have at Figma?

Anna, Alexia, and Chad are designers and advocates at Figma. They come from design backgrounds and work with the Figma community to enable teams by sharing feedback, tips, tricks, and resources for using Figma.

What is the main focus of the discussion led by Anna, Alexia, and Chad?

The main focus of the discussion is on building Design Systems in Figma, including core principles, insights from their experiences, and actionable tips on Figma features for Design System journeys.

Why is approaching complexity with caution important in building Design Systems?

Approaching complexity with caution is important because introducing too much complexity can create a more rigid design system, which may require more time and resources for maintenance and enablement. It can also make it harder for designers to understand and utilize the system effectively.

What is the significance of being grounded in priorities when building a Design System?

Being grounded in priorities helps reduce complexity and guide decision-making, ensuring that the design system aligns with what's most important to the organization. It also helps in identifying quick wins and long-term projects, preventing the team from becoming overwhelmed.

What does Alexia mean by 'keeping a consumer-first mindset' in Design Systems?

A consumer-first mindset refers to focusing on the actual users of the design system, which may include designers or developers. It's about ensuring that the design system is user-friendly and meets the needs of those who will be using it in their work.

How can teams avoid introducing unnecessary complexity in their Design Systems?

Teams can avoid unnecessary complexity by not taking optimization too far, avoiding the creation of overly customizable components, and by not overproducing their design system to mimic larger organizations unless it's necessary for their own needs.

What is the purpose of using a prioritization matrix in Design Systems?

A prioritization matrix helps teams identify quick wins, long-term projects, and potential additional projects that can be squeezed in if time allows. It ensures that expectations are realistic and helps prevent the team from becoming overwhelmed.

Why is validation before execution important when making changes to a Design System?

Validation before execution is important to prevent shipping changes that may need to be rolled back, which can cause additional work and confusion for users. It allows for an iterative approach to ensure the changes are the right approach before full commitment.

What is the relationship between props and variants in Figma's component sets?

Props and variants work together in Figma's component sets to create a user-centric design system. Variants help designers visualize different states of components, while props guide them on parts they can override, such as icons or text content.

How can teams ensure that their Design Systems are aligned with both designers' and developers' needs?

Teams can ensure alignment by maintaining open communication channels, involving developers early in the design process, sharing knowledge and resources, and utilizing Figma's features like component descriptions and Dev mode to facilitate collaboration.

What are some strategies for building a community around a Design System?

Strategies include identifying and engaging champions who are enthusiastic about the design system, providing educational resources, recognizing and rewarding participation, and fostering two-way communication between the Design Systems team and users.

How can feedback and metrics guide the next steps of a Design System?

Feedback and metrics, both qualitative and quantitative, can provide insights into user behaviors and needs, help identify areas for improvement, measure the health of the design system, and inform decisions for maximum impact.

Why is it important to approach Design Systems as an ongoing journey rather than a one-time project?

Design Systems need to evolve with the products they support, requiring ongoing attention, collaboration, and adaptation. This includes incorporating design and code updates, and addressing changes in technology, use cases, or rebranding.

What are some best practices for managing updates in a Design System?

Best practices include making updates in a way that doesn't disrupt the source of truth, using branching for work in progress, planning and testing changes thoroughly, and communicating these changes effectively to prevent confusion for system consumers.