<p>The following steps outline how to get access to Figma. By creating your account, joining the Dell Design System v2 Figma team, and enabling the libraries, you will be able to use the <strong>Components and Patterns</strong> and <strong>Data visualization</strong> Figma libraries in your projects. Each component has been reviewed by Dell’s Brand, Globalization, and Accessibility teams.</p>
<p>It is also recommended you join Dell Accessibility Figma team to enable the <a href="/getting-started/annotation-kit/">Accessibility Annotation Kit</a> and make sure your designs are inclusive and usable to all of your users.</p>
<p>Please note that the DDS v2 libraries cannot be used in combination with DDS v1 libraries. You can still access the <a href="https://dds1.delldesignsystem.com/">Dell Design System v1</a> at its new URL.</p>
<h2>Getting access to Figma</h2>
<p>If you already have a Figma account set up with your Dell or Dellteam email address, visit <a href="https://www.figma.com/">Figma.com</a> and sign in. If you do not have a Figma account, visit the page <a href="https://dell.sharepoint.com/sites/FigmaatDell?OR=Teams-HL&CT=1652286709073&params=eyJBcHBOYW1lIjoiVGVhbXMtRGVza3RvcCIsIkFwcFZlcnNpb24iOiIyNy8yMjAzMDcwMTYxMCJ9">Figma at Dell</a> created by Dell Digital Design’s Design Operations team for information on Figma and how to set up your account.</p>
<p>You do not need to request edit access in the tool in order to join a team in Figma, view the UI kit, or enable the DDS v2 libraries⁠. You only need to request edit access if you are a designer who will be sharing design files with your team. To obtain edit access, you may need to contact your manager or your team’s Figma administrator for approval.</p>
<h3>Join the Dell Design System v2 Figma team</h3>
<p>Once you are signed in to Figma, you should find yourself in the Dell Figma organization. In the search bar, search for Dell Design System then select <strong>Teams</strong>. Click the <strong>Join</strong> button on the Dell Design System v2 card to become a member. You must be a member of this team before you can enable the DDS v2 libraries.</p>
<details data-name='image-block' data-images='[{"alt":"Figma screen highlighting the Teams and Join links","caption":"","url":"https://dds.dell.com/site/stage/75/db/Getting_Started_Figma_Step_1_Join_Team_79ba765cb8.png"}]' data-numberofcolumns='1'></details>

<h2>Managing components</h2>
<p>Components are listed in the <strong>Assets</strong> panel. Click any component and drag it from the panel onto your canvas. Some components are more customizable than others. <a href="/components/button/">Buttons</a>, for example, contain kinds, options, and states that can be modified. You can find this information in each component’s documentation. Visit Figma’s documentation to learn more about how to add components to your designs.</p>
<h2>Integrating styles</h2>
<p>All of the foundational styles for <a href="/foundations/color/">colors</a>, <a href="/foundations/typography/">typography</a>, <a href="/foundations/elevation/">elevation</a>, and <a href="/foundations/grid/">grid</a> will fully integrate into Figma when you enable the DDS v2 libraries. You can access library styles in the <strong>Properties</strong> panel by selecting the style you want to update. Visit <a href="https://help.figma.com/hc/en-us/sections/4403928368535-Styles">Figma’s Style documentation</a> to learn how to work with styles on your canvas.</p>
<h2>Reviewing updates</h2>
<p>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 <strong>Review</strong> 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.</p>


The **Components and Patterns for Web** and the **Foundations and Icons** libraries contain all the DDS v2 elements and features. They are building blocks designed to balance flexibility with structure so product teams across Dell can create a standardized, scalable, responsive, and inclusive online experience for their users.

The following steps outline how to access the [Components and Patterns for Web Figma UI kit](https://www.figma.com/file/tEHQtV6HKUB1VFNs0hyQaL/Components-%26-Patterns-for-Web---Light-Mode?type=design&node-id=0-1&t=OnfvyoadC6l2EZFo-0) and [Foundations and Icons](https://www.figma.com/file/fM2zuhp00OtwldRi1qT5oE/Foundations-%26-Icons---Light-and-Dark-Mode?type=design&node-id=0-1&t=33MvRKoQWBFUGZdQ-0) libraries.

## Enabling component libraries

The DDS 2 UI kit can be found when joining the Dell Design System v2 Figma team.

Open the design file you’d like to connect to the DDS v2 libraries. On the left sidebar, select the **Assets** panel. Select the **Library** icon to view a list of DDS v2 libraries. To enable the libraries, toggle the switches on.

The libraries usually used for the components and foundations are:

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

<details data-name='image-block' data-images='[{"alt":"Printscreen from Figma, showing libraries","caption":"","url":"https://dds.dell.com/site/production/cd/a8/Getting_Started_Figma_de93819b93.png"}]' data-numberofcolumns='1'></details>

Foundations and components

The Dell Design System [Data Visualization (DDV) Figma UI kit](https://www.figma.com/file/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?type=design&node-id=0-1&t=0brimcbeQMHr9Knf-0) is a library of components that enables product teams to present data and information in a simple and comprehensible way. The data visualization foundations, elements, and components help teams create a standardized and accessible experience, allowing users to analyze presented data and utilize it effectively for their requirements. The data visualization library also includes [colors](https://www.delldesignsystem.com/foundations/color/?tab=Data-visualization) specifically intended for use with DDV components, ensuring differentiation and accessibility compliance.

The following steps outline how to access the [Data Visualization (DDV) Figma UI kit](https://www.figma.com/file/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?type=design&node-id=0-1&t=WP7XCA0Rwe6lRWRC-0).

## Enabling the data visualization kit

You must have joined the Dell Design System v2 Figma team to enable the libraries. You can find more information on how to join the DDS v2 Figma team in the overview tab. Once you’re a member of the DDS v2 team, open the design file you’d like to connect to the Data Visualization library. On the left sidebar, select the **Assets** panel. Select the **Library** icon to view a list of DDS v2 libraries. To enable the Data Visualization library, toggle the switch on.

<details data-name='image-block' data-images='[{"alt":"Printscreen of Data Visualization library in Figma with the switch on","caption":"","url":"https://dds.dell.com/site/production/54/d2/Microsoft_Teams_image_3_55e272ec3d.png"}]' data-numberofcolumns='1'></details>

Data visualization

The [Accessibility Annotation Kit](https://www.figma.com/file/mp4RG0u7wecgHdCSzeydHJ/Dell-Accessibility-Annotation-Kit?type=design&node-id=0-1&t=UkvbFoNGZ5u6Q4yn-0) consists of several annotation components, available as both assets and as a sticker sheet. It was created in partnership with the Dell Design System team to help you:

* Identify areas within your designs that may need considerations for accessibility.
* Empower to create accessibility requirements around those areas.
* Document those requirements in a way that other members of your team can understand and act upon.
* Drive conversations with members of your team around accessibility throughout the product lifecycle.

## Enabling the annotation kit

When signing in to Figma, you should have your account associated with the Dell Figma organization. To enable the Accessibility Annotation Kit, you should first join Dell Accessibility Figma team. To do so, search for **Dell Accessibility** in the search bar, select **Teams,** and click the **Join** button to become a member.

Following that, on the left sidebar of a document, select the **Assets** panel, and then the **Library** icon to view the [Accessibility Annotation Kit](https://www.figma.com/file/mp4RG0u7wecgHdCSzeydHJ/Dell-Accessibility-Annotation-Kit?type=design&node-id=0-1&t=WadXelHHO61pMtxk-0). To enable it, toggle the switch on.

A11y annotation

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


Getting Started with Figma

Figma

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
