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 newCopy link to this section
Copy link to this section
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 FigmaCopy link to this section
Copy link to this section
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.
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 librariesCopy link to this section
Copy link to this section
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
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 componentsCopy link to this section
Copy link to this section
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 stylesCopy link to this section
Copy link to this section
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 updatesCopy link to this section
Copy link to this section
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.