> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 7c54430b-f53b-47ad-88f2-83e1a66adf06
---

# Figma Design Kit | UI extensions

> Learn about using the Figma Design Kit for designing UI extensions.

The Figma Design Kit is a visual representation of the [UI components](/apps/developer-platform/add-features/ui-extensions/ui-components/overview) you can include in React-based app cards in UI extensions. Using this kit, you can create more detailed designs to plan out UI extensions, and can be particularly helpful when needing to share demos with stakeholders or keep teams aligned during the development process.

Along with containing visual examples of UI components, the kit also contains high-level UI extension design information, such as a breakdown of app card anatomy and examples of available locations. Note that HubSpot will update this kit over time as new components are added, but the [UI component documentation](/apps/developer-platform/add-features/ui-extensions/ui-components/overview) will be the most up to date source of truth for available components. Be sure to [check the changelog](#using-the-kit) for any recent or upcoming additions.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/figma-design-kit-button-component.png" alt="figma-design-kit-button-component" />
</Frame>

Learn more about using UI kits in [Figma's documentation](https://help.figma.com/hc/en-us/articles/24037724065943-Start-designing-with-UI-kits).

## Access the kit

Click the button below to access the Figma Design Kit.

<Card title="Open the Figma Design Kit" href="https://www.figma.com/community/file/1446579606498505952/hubspot-extensibility-design-kit" icon="figma" horizontal />

After accessing the kit, it's recommended to open the kit in your Figma desktop app, then duplicate it to your drafts:

* In the left sidebar, click **Extensibility Components**.
* Select **Duplicate to your drafts**.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/figma-design-kit-duplicate-to-drafts.png" alt="figma-design-kit-duplicate-to-drafts" />
</Frame>

* A copy will be created to your drafts, which you can then use as needed. As updates will be periodically released, you'll need to check the source kit and duplicate to your drafts again to access new components.

Learn more about [copying UI kits](https://help.figma.com/hc/en-us/articles/24037724065943-Start-designing-with-UI-kits#h_01J0Y2QYS4GKV112NWZHD6019J).

## Using the kit

In the *Pages* section of the left sidebar, you'll find a *Documentation* section which contains the following pages:

* **Introduction:** a brief introduction to what the kit is and what it should be used for, along with links to documentation and a feedback form.
* **Card Anatomy & Location Wires:** high-level breakdowns of app card anatomy, along with wireframes for the different locations you can build UI extensions for.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/figma-design-kit-card-anatomy-and-location-wires.png" alt="figma-design-kit-card-anatomy-and-location-wires" />
</Frame>

* **Changelog:** recent additions and changes, along with upcoming additions. Each entry will include a link to relevant documentation when available, along with the release date.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/figma-design-kit-changelog-with-sidebar.png" alt="figma-design-kit-changelog-with-sidebar" />
</Frame>

In the *Components* section, you'll find the currently available design pages for UI components. Component pages will include a description of the component along with visual examples of different states and variants.

<Frame>
  <img src="https://www.hubspot.com/hubfs/figma-design-kit-checkbox-component-with-sidebar.png" alt="figma-design-kit-checkbox-component-with-sidebar" />
</Frame>