getting-started icon

Getting Started with Figma

This page describes how to access the Dell Design System v2 Figma libraries. These libraries are currently only available to Dell employees and contractors.


What's new

The Dell Design System Figma UI kits contain libraries of prebuilt components. These components were designed to balance flexibility with structure so that teams across Dell’s diverse product ecosystem can use them. Each component has been reviewed by Dell’s Brand, Globalization, and Accessibility teams. The following steps outline how to access the Dell Design System (DDS) v2 Figma libraries and the Accessibility Annotation Kit.

Please note that the DDS v2 libraries cannot be used in combination with DDS v1 libraries. You can still access the Dell Design System v1 at its new URL.

Step 1: Get access to Figma

Create or sign in to your Figma account

If you already have a Figma account set up with your Dell or Dellteam email address, visit Figma.com and sign in. If you do not have a Figma account, visit the onboarding instructions created by Dell Digital Design’s Design Operations team for instructions on how to set up your account.

You do not need to request edit access in the tool in order to join our Figma team, view the UI kit, or enable the DDS v2 component libraries⁠. You only need to request edit access if you are a designer who will be sharing design files with your team. To be granted edit access, you may need to contact your manager or your team’s Figma administrator for approval.

If you are not a Dell employee or contractor, please email delldesignsystem@dell.com for access to the Figma UI kit in the Dell Figma Org.

Join the Dell Design System v2 Figma team

Once you are signed in to Figma, you should find yourself in the Dell Figma Org. In the search bar, search for Dell Design System then select Teams. Click the Join button on the Dell Design System v2 Figma Team to become a member of the team. You must be a member of this team before you can enable the DDS v2 component libraries.

Figma screen highlighting the Teams and Join links

Join the Dell Accessibility Figma team

To join the Dell Accessibility Figma team and have access to its Annotation Kit, you should search for Dell Accessibility, then select Teams. Click the Join button on the card to become a member of the team. If you want to see the same process for joining another team, reference the image in the section above.

Step 2: Enable the component libraries

Open the design file you’d like to connect to the DDS v2 libraries. On the sidebar, select the Assets panel. Select the Library icon to view a list of DDS v2 libraries. To enable the libraries, use the toggle switches. While you can enable all of the libraries, the most commonly used components are located in the following two libraries:

  • Components & Patterns for Web Light Mode
  • Foundations & Icons Light & Dark Mode

The library modal in Figma showing a list of available DDS v2 libraries

Enable Accessibility Annotation Kit

To find the Accessibility Annotation Kit, go to the sidebar and select the Assets panel. Then, select the Library icon to view available libraries under the Dell Digital Design tab. Find or search for Dell Accessibility. To enable the kit, use the toggle switch.

Step 3: Manage components

Components are listed in the Assets panel. Click any component and drag it from the panel onto your canvas. Some components are more customizable than others. Buttons, for example, contain variants and states that can be modified. Visit Figma’s documentation to learn more about how to add components to your designs.

Step 4: Integrate styles

All of the foundational styles for colors, typography, elevation, and grid will fully integrate into Figma when you enable the DDS v2 libraries. You can access library styles in the Properties panel by selecting the style you want to update. Visit Figma’s Style documentation to learn how to work with styles on your canvas.

Step 5: Review updates

You may see a notification that prompts you to review or dismiss component updates. Carefully review the updates before accepting them—they may break your layout or design and you will not be able to undo those changes. Select Review from the notification and choose the updates you would like to apply. Visit Figma’s documentation to learn how to review and accept updates from libraries.

Feedback