WORK/

UI toolkit

COMPANY

Autodesk logo

TEAM

1 UX/UI Principal Designer/Manager (myself)

2 UX/UI Designers

1 Project Manager

CONTRIBUTION MODEL

Cross-functional working group consisting of ~20 internal subject matter experts, including representatives from brand, UX, visual design, research, content strategy, engineering, and product management. Members participated in bi-weekly review sessions and provided critical domain expertise and feedback.

TOOLS

Figma

Framer

RESULTS

  • Efficiently delivered a world-class UI toolkit with limited resources

  • Continued to scale adoption and engagement by effectively leading a diverse working group and creating opportunities for participation

  • Onboarded >150 key stakeholders to support launch of the new brand

  • Toolkit used by >95 teams

  • Figma component inserts averaged >50k per week

SUMMARY

The Digital Human Interface Guidelines (DHIG) is a unified design system that defines standard building blocks and UX patterns for Autodesk branded web and digital experiences. The goal of DHIG is to build better faster by promoting consistency, accessibility, and brand alignment.

The UI toolkit, created by my team in Figma, provides foundational elements, style definitions, design tokens (variables), and components for UX/UI designers to leverage in their work.

Foundational elements

Responsive typography based on a mathematical scale, global color primitives, spacing, and elevation were defined first as we began to explore the new Autodesk brand.

Style definitions

Text, color, and effect styles were added to the UI toolkit in Figma.

Tokens

Also referred to as variables, tokens are the single source of truth to name and store a design decision. We integrated tokens directly into our UI kit, creating a shared language between design and engineering.

Themes

We built and maintained the UI toolkit in light theme, and defined variables for dark theme. Consumers are able to switch between dark and light mode using a Figma community plugin: Atlas Theme Manager

In use

The following examples show foundational elements and components in use in two very different contexts: Autodesk.com and the Account Portal. Components are designed to work well in rich marketing experiences as well as in dense, task-oriented dashboards.

↑ top

next →