Unity Editor Design System

Overview

The Unity Editor Design System was developed to create a unified, efficient design language across Unity’s editor tools. A key deliverable was the Unity Foundations website, a resource hub that showcases and documents the design system for internal teams and the broader Unity community. Additionally, a comprehensive Figma toolkit was developed to provide easily accessible, reusable components, enabling Unity designers and developers to work faster and with greater consistency. Together, these resources streamlined design workflows and established a cohesive user experience across Unity's interfaces.

Image of the Unity Editor Foundations home page

Project Goals and Objectives

• Establish a Unified Design Language: Create a single, cohesive visual and interaction language across all Unity editor tools, reducing inconsistency across different interfaces.

• Enhance Team Efficiency: Provide designers and developers with a complete Figma toolkit containing standardized components and guidelines, allowing for rapid prototyping and reduced errors.

• Support Scalable Growth: Build a design system website that would serve as a scalable, accessible resource for Unity’s teams and users as the product suite expands.

  
  

Role and Responsibilities

In leading the design system initiative, I focused on:

• Early designing and structuring the design system to present components, guidelines, and system usage with clarity and ease to internal teams across Unity.

• Developing and overseeing the creation of a comprehensive Figma toolkit that included all reusable elements, standardized for Unity’s unique requirements.

• Collaborating with cross-functional teams to ensure that both the website and toolkit met the needs of Unity’s diverse user base, including external developers and internal product teams.

• Led a talented, cross-disciplinary team of designers and a UX writer to develop, enhance, and launch the Unity Foundations website and Figma Toolkit.

  
  

User Research and Insights

To ensure the Unity Design System was intuitive and effective for all users, we conducted extensive user interviews, one-on-one research sessions, and walkthroughs with internal Unity developers and cross-functional team members who build Unity features. This approach helped us identify and address their specific needs, making the design system easy to adopt and apply.

We also engaged with external Unity developers who create tools for their production teams or sell their tools on the Asset Store. These insights were invaluable in ensuring that the design system empowered them to create high-quality, intuitive editor features that align with Unity’s standards.

Key findings included:

• Need for Consistency: Both internal and external users highlighted the need for a cohesive, visually consistent experience to improve usability and align with Unity’s brand.

• Efficiency in Design and Development: Teams expressed a strong need for accessible resources and standardized tools that reduce redundancy, streamline workflows, and ensure consistency across projects, which ultimately enhances productivity.

Image of a page from the Unity Editor Foundations website

These insights directly influenced all of our decisions in creating and developing the Foundations website and the Figma toolkit, focusing on usability, accessibility, and integration with current workflows.

Key Deliverables: Design System Components and Guidelines

1. Unity Foundations Website

   • The Unity Foundations website serves as a dynamic resource for understanding Unity’s design system. The site includes detailed component guidelines, interactive previews, and usage examples, ensuring easy access to design principles and fostering consistency across all Unity products.

2. Figma Toolkit

   • Our Figma toolkit provides a comprehensive, ready-to-use collection of Unity components, including buttons, sliders, typography standards, color schemes, and layout grids. This toolkit enables quick prototyping and ensures design fidelity from concept through implementation, all while supporting the scalability of Unity’s design system.

3. Core Design Standards

   • Established typography hierarchies, color schemes, spacing standards, and layout rules to unify visual elements. The standards are extensively documented on the Foundations website, making it easy for teams to apply them consistently.

Image of the Figma Toolkit

Zoom out Figma Toolkit page on software layers

User Feedback Highlights

• “The new design system is a game-changer for development teams—having a consistent design language has improved our productivity tremendously.” – User on Unity Discord Channel

• “Unity Foundations has been a valuable resource; navigating the components and guidelines has simplified our workflow immensely.” – User feedback on Unity Forum

• “The Figma toolkit is a huge asset. It’s great to have pre-built components that match Unity’s look and feel, saving us so much time.” – Internal Unity Designer

• 
  

This feedback underscored the positive impact of both the website and the Figma toolkit on team productivity and user satisfaction.

Challenges and Solutions

Challenge: Ensuring the design system and website were intuitive for teams with diverse skill sets.

Solution: Developed the Foundations website with clear navigation, real-world examples, and tutorials to support designers and developers alike.

Challenge: Building a flexible design system that could scale with new features, patterns, and other content.

Solution: Structured the design system and Figma toolkit to be adaptable and easily updated, allowing for future expansion.

Challenge: Creating a design system robust enough to answer most user questions upon visiting the site.

Solution: Leveraged user feedback to curate essential core content, ensuring the design system addressed common user needs. Additionally, we closely monitored search data to identify high-priority topics, allowing us to continuously expand content based on the most-searched items.

Results and Impact

• Enhanced Efficiency: The Unity Foundations website and Figma toolkit allowed teams to work faster and more consistently, reducing duplicative work and enhancing design fidelity.

• Increased Consistency: A unified visual language across Unity products improved the user experience, aligning with Unity’s brand identity.

• Scalable Resources: The website and toolkit provided a foundation that can grow with Unity, accommodating new features and updates efficiently.

Image of the button component page from the Unity Editor Foundations website

Conclusion

The Unity Editor Design System, Unity Foundations website, and Figma toolkit collectively transformed how Unity teams approach design. These resources established a consistent visual language and significantly improved productivity, creating a scalable foundation for future growth.

This case study captures the Unity Editor Design System’s foundational impact and the role of the Foundations website and Figma toolkit in enhancing Unity’s design capabilities.