DESIGN SYSTEM

How I Built and Scaled
a Design System at Unity,

How I Built and Scaled a Design System at Unity,

How I Built and Scaled a Design System at Unity,

By Ensuring Consistency Across Product, and Seamless Collaboration Between Teams and Platforms.

By Ensuring Consistency Across Product, and Seamless Collaboration Between Teams and Platforms.

By Ensuring Consistency Across Product, and Seamless Collaboration Between Teams and Platforms.

ROLE

Design Lead

Design Lead

TEAM

Polina - Design, PhilB -Dev Lead, Alex - Product Lead

Polina - Design, PhilB -Dev Lead, Alex - Product Lead

TOOLS

Figma, Storybook, Notion

Figma, Storybook, Notion

TIMELINE

Adjusted multiple times due to shifting priorities, total time ~6 months

Adjusted multiple times due to shifting priorities, total time ~6 months

ITERATION 1. CHALLENGE

  1. When I joined SyncSketch in summer 2022, my key objective were to audit the existing visual language, strategize, develop, document, and share a comprehensive design system across the team and the Unity organization.

  2. Why? The existing visual style was inconsistent, the product had a lot of custom-made components and overrides, which was impacting user experience and slowing down development.

  1. When I joined SyncSketch in summer 2022, my key objective were to audit the existing visual language, strategize, develop, document, and share a comprehensive design system across the team and the Unity organization.

  2. Why? The existing visual style was inconsistent, the product had a lot of custom-made components and overrides, which was impacting user experience and slowing down development.

IMPACT

Enabled DesignOps' Workflow With Properties, Nested Instances, Variants

More streamlined workflow. Choose a component, adjust properties, swap nested instances.

One source of truth for product design, processes, and product governance.

One source of truth for product design, processes, and product governance.

One source of truth for product design, processes, and product governance.

FIGMA

  1. Design Tokens

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

FIGMA

  1. Design Tokens

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

FIGMA

  1. Design Tokens

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

FIGMA

  1. Patterns

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

FIGMA

  1. Patterns

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

FIGMA

  1. Patterns

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

FIGMA

  1. Components

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

FIGMA

  1. Components

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

FIGMA

  1. Components

Design tokens represent the smallest, repeated design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

IMPACT

Reduced Design and Development Debt With Semantic Tokens

  • Semantic Tokens are based on the context of their use, so there is no more doubt 'which shade: gray-100, or gray-200' to use.

  • Simplified the application of styles in designs.

  • Designers, stakeholders, and developers speak the same language.

2023 — Polina Ziemlinska

2023 — Polina Ziemlinska

2023 — Polina Ziemlinska