mo•tif mō-ˈtēf. 1. : an important and usually repeating idea or theme in a work of art. 2. : a feature in a decoration or design.

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared library and visual consistency across different pages and platforms.

Client: HD Supply | A Home Depot Company
Duties: Components, Styles, in-page annotations, brand management: color, typography, spacing, icons, variables
Role: UX Product Designer | Design System
Plan: Add product design thinking to constantly improve the design system, to get ongoing feedback from all stakeholders.

The Process

Creating a robust design system in Figma involves more than just designing elements—it’s about crafting a cohesive ecosystem where every component works harmoniously. Start by defining your design principles and creating a comprehensive style guide that includes colors, typography, and spacing rules. Build reusable components such as buttons, forms, and icons, and ensure they are meticulously organized within Figma’s components and variants system. Leverage auto-layout to create adaptable, responsive designs that maintain consistency across different screen sizes.

Once a component is done, it’s best to prototype the actions for seamless handoff to dev with annotations and requirement specs on how UX designed the component to work.

Accessibility Baked In

Building a Design System from scratch allowed me to integrate accessibility from the beginning rather than treating it as an afterthought.

Here are some key principles focused on:

  • Checking color contrast against various backgrounds and interaction states, including a deep dive into accessibility standards for disabled buttons.
  • Ensuring font sizes and touch targets are appropriate for mobile devices.
  • Maintaining consistency across layouts and similar UI elements.

While there’s always room for improvement and some trade-offs are necessary due to time constraints, this approach puts us on the right track and fosters a shared commitment to accessibility standards.