v6 to v7 Migration

What’s the difference between v6 and v7?

V7 introduces several new features and enhancements to improve the creation of engaging and visually appealing experiences for customers and prospects. For design the biggest changes are moving to design tokens, surface and dark mode.

For more details on the differences read Migration Overview. For designers one of the biggest difference for v6 to v7 is the use of figma variables to power our design tokens.

New Components

• Icon button
• Icon Toggle button
• Menu
• Segmented Control
• Split button

When should I migrate?

To upgrade to the latest version of the design system, we recommend working closely with your product partners to identify a timeline that works for your product and team. If you are starting a new product or project, we recommend using v7 from the beginning to minimize rework.

How do I migrate a Figma file? 

We recommend teams doing concept work with v7 to get familiar with the system improvements and new components. Always coordinate with your product team before upgrading versions for product work.

1. Get familiar with v7

• Read through our designers getting started docs
• Reach out to your teams DS ambassador
• Get familiar with Figma variables

2. Check you’re using the latest version of the v6 Figma kit.

Follow the steps in the figma guide to review and accept library updates

3. Save file to version history

Save file to version history with the name ‘last save before migration to v7’. Follow the steps in the Figma guide to Create and name a version.

4. Swap Libraries

1. Swap Web Components library and DLS Assets library. Follow the steps in the Figma guide to swap libraries
   • Swap Web components library to DLS 7 Web kit.
   • Swap DLS Assets to DLS 7 assets
2. Remove v6 Web Foundations library. The v7 foundations are built into DLS v7 Web kit. Follow the steps in the figma guide to disable a library in a design file

5. Update Grid and Font styles

You should now have most of your components updated to v7

1. If you use grid, update your pages with the latest grid. You will see the new components align as grid has moved from 10px to 8px.
2. Update font styles for any typography that’s not in a component.

Font Style	Suggested Replacement
Heading 1	sans-xsmall-bold
Heading 2	sans-xsmall-bold
Heading 3	sans-xsmall-bold
Heading 4	sans-small-regular
Heading 5	sans-medium-regular
Heading 6	sans-large-book
Body 1	font.body.small
Body 2	font.body.small.bold
Body 3	font.body

6. Update colors

1. Change pages and frames to dark mode to identify any manual component updates and color changes.
2. Review colors first, here are the common colors that will need to be updated to a foundation token using variables.

A quick way to check if you’re using the new color variables is to see if the color properties in your file are square for fill and strokes. Circle indicates v6 styles, while square indicates v7 variables.

Color Name	Suggested Replacement
BrightBlue	Brand
DeepBlue	Brand Alt
White	Surface Background - Foreground
Gray-01	Surface Background - Foreground Subtle
Gray-02	Surface Background - Base
Gray-03	Border Subtle
Gray-04	Border Regular
Gray-05	Text Subtle
Gray-06	Text Regular
Black	Text Emphasis

For a full list see v6 colors. There is also a airtable interface for current v6 class names and their updated colors. Can’t find a color your looking for? Try changing surfaces or ask in our slack channel #dls-design.

7. Update Local Components

Update any components that were not updated in the file swap, these could be local components, deprecated DLS components, or components from other libraries.

• If local components need updating follow steps 5 and 6
• If other library components need updating get permission to update them in the library or create your own local updated versions.

Here’s a list of deprecated components and suggested replacement.

Component Name	Suggested Replacement
Floating Buttons	Move to using one of Primary, secondary or tertiary buttons
Chevron Button	Move to using one of Primary, secondary or tertiary buttons
Outline (Badge)	Move to using text badge
Hero	Create your own local component to use inside carousel
Maps	Create your own local component
Video player.	Move to use the default browser media player

8. Review file

Review your file:

• Look for moments when new components could improve the user experience.
• Missing content? Open you file again in a new Figma window, go to version history and find ‘last save before migration to v7’. You can copy and paste any copy or whole frames into you file to help you fill in the gaps.

Need support?

Reach out to the DS team or your DS ambassador.

DS Ambassadors #dls-design

---