<p>This guidance outlines how to get access to Figma. By creating your account, joining the Dell Design System (DDS) v3 Figma team, and enabling the libraries, you will be able to use the <strong>DDS v3 UI Kit</strong> Figma librarie in your projects. </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 v3 libraries cannot be used in combination with DDS v2 libraries. You can still access the <a href="https://www.figma.com/files/712376313086869757/project/23537842">Dell Design System v2</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 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 v3 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>
<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 <a href="https://help.figma.com/hc/en-us/articles/360039150173-Create-and-insert-component-instances">Figma’s documentation</a> 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 <a href="https://help.figma.com/hc/en-us/articles/360039234193-Review-and-accept-library-updates">Figma’s documentation</a> to learn how to review and accept updates from libraries.</p>


The **DDS v3 UI Kit** library contain all the DDS v3 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 [DDS v3 UI kit.](https://www.figma.com/design/9R6misT0WAdjAGkdF0XoK3/Dell-Design-System-v3?m=auto&node-id=88-3934&t=78qWSIOKDzFbfzlq-1)

## Enabling component libraries

The DDS v3 UI kit is available after joining the Dell Design System v3 Figma team.

1. Open the design file you want to connect to the DDS v3 libraries.
2. In the left sidebar, select the **Assets** panel.
3. Select the **Library** icon to view the list of available DDS v3 libraries. You can search for "Dell Design System v3".
4. Click **Add to file** on the library card to enable it.

<details data-name='image-block' data-images='[{"alt":"Printscreen from Figma, showing libraries","caption":"","url":"https://dds.dell.com/site/v3/getting-started/figma/va-1-v3kit.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

Foundations and components

The Dell Design System [AI Figma UI Kit](https://www.figma.com/design/J67H8koCKA6Gaj62yKT7YF/Artificial-Intelligence?m=auto&t=siUo0d446cLNjeAz-1) is a library of components that enables product teams to create AI-powered experiences. It includes AI micro-moment components designed in collaboration with the AI Design Center of Excellence (AI Design COE).

Additional elements such as color gradients and sparkle icons are provided specifically for use in AI-related experiences.

## Enabling the AI UI Kit library

The AI UI Kit is available after joining the Dell Design System Figma organization. For setup instructions, refer to the overview tab.

1. Open the design file you want to connect to the AI library.
2. In the left sidebar, select the **Assets** panel.
3. Select the **library icon** to view the list of available libraries.
   <br/>

From here, there are two ways to add the library to your file, depending on your assigned workspace:
<br/>

**Inside Dell Digital Design workspace:**

1. Ensure v2 libraries are enabled by viewing **This file** in the **Manage libraries** modal.
2. If you don’t see the files enabled, select **Recommended** under **Browse Libraries** in the modal. You should see the **Dell Design System v3 libraries** listed.
3. Hover over the **AI library** cover and select **Add** **to file**.

<details data-name='image-block' data-images='[{"alt":"Printscreen of Figma, showing screens","caption":"","url":"https://dds.dell.com/site/v3/getting-started/figma/va-2-ai.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

**Outside Dell Digital Design workspace:**

1. Select **Your organization** under **browse libraries** in the modal.
2. Select the **Dell Digital Design** workspace. 
3. Scroll list of libraries until you see the **Dell Design System v3 team**. Hover over the **AI library** cover and select **Add** **to file**.

<details data-name='image-block' data-images='[{"alt":"Print screen of Figma, showing screens","caption":"","url":"https://dds.dell.com/site/v3/getting-started/figma/va-3-ai.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

The [Accessibility Annotation Kit](https://www.figma.com/file/mp4RG0u7wecgHdCSzeydHJ/Dell-Accessibility-Annotation-Kit?type=design&node-id=0-1&t=OCBBGtv3AumVuS80-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.

From here, there are two ways to add the library to your file, depending on your assigned workspace:

## Enabling the annotation kit

The Accessibility Annotation Kit  is available after joining the Dell Accessibility Figma team. To join, search for Dell Accessibility in the Figma search bar, select Teams, and click Join to become a member.

1. Open the design file you want to connect to the annotation library.
2. In the left sidebar, select the **Assets** panel.
3. Select the **library icon** to view the list of available libraries.
4. Click **Add to file** on the **Accessibility Annotation** library card to enable it.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/getting-started/figma/va-4-accessibility.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

A11y annotation

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

Getting Started with Figma