getting-started icon

Migrating to DDS v2

This is a high-level overview for teams interested in redesigning their products or applications with DDS v2 from DDS v1. Migrating from DDS v1 to DDS v2 is a one-time procedure that requires substantial engineering efforts.

Contents

Overview

Migrating from DDS v1 to DDS v2 requires rewriting an application’s codebase and additional manual steps. Each component and foundation has changed in some way, and the v1 set of components do not always map to a v2 component. Because of this, you will need to redesign your product using the latest version of DDS v2.

We’ve outlined high-level changes your project will need to consider prior to migration. Additionally, component documentation on the Dell Design System website and in Storybook includes more specific migration information and component changes.

If your product does not currently use designs from DDS v1 and you’d like to start using DDS v2, visit getting started with Vanilla Components or Angular Components for developers and the Getting Started with Figma for designers.

Why update to DDS v2?

The v2 Design System emphasizes accessible experiences. The DDS team partners closely with the Accessibility team to ensure published components meet WCAG 2.1 AA requirements. In addition, the engineering efforts focus on scalability while the designers are reworking the components to conform with UX best practices and a modern look and feel.

If you’d like to see a before and after of a product that has implemented DDS v2, check out the case study Redesigned Premier Home and Category Pages on Inside Dell.

How to update to DDS v2

V2 components are built with different behaviors, modifications, colors, grids, styles, and classes. Due to technical and aesthetic considerations, the DDS team strongly recommends that you do not combine v1 and v2 components.

DDS v2 does not yet have parity with DDS v1. Visit the Component Status page to see which components are published, in progress, or in the backlog. We recommend migrating when most of the components your project requires are published.

Products at Dell are diverse in terms of size, scope, and complexity. We recommend setting up a meeting with the Design System team using the DDS feedback form so we can help your team assess requirements, timelines, and the general feasibility of migrating to DDS v2.

Product owner

  • Migration to DDS v2 requires advanced planning, including scheduling within your product roadmap. You will need to allocate engineering resources to rewrite the application’s codebase and design resources to redesign your product.

Engineering

  • DDS v2 foundations and components are built in Vanilla, which is pure JavaScript with no dependencies. React and Angular are ongoing projects. Components labeled “experimental” are still in beta and not intended for use in production.
  • Migrating from v1 to v2 is only possible using Vanilla components. Each component has a migration section documented in Storybook and will require migrating the library version, HTML, CSS, and JavaScript.

Design

  • DDS v2 UI kits and designs are currently available in Figma.
  • We recommend redesigning the product experience according to UX best practices. This includes wireframing the new experience using the DDS v2 Figma UI kit.