> For the complete documentation index, see [llms.txt](https://docs.devlaunchers.org/dl-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/components/consuming-components.md).

# Consuming Components

### 🔍 Finding Components in Figma

1. **Open the Assets Panel**
   * Navigate to the **Assets** tab on the left sidebar of your Figma file.
2. `🧩 Components` — ready-to-use patterns like:

* **Avatars**
* **Buttons**
* **Inputs**
* **Tags**
* **Modals**
* **Nav elements**
* and more

3. **Search or Browse**
   * Use the **search bar** to quickly find specific components
   * Or scroll through folders to explore what's available by category

> 💡 Components are grouped based on purpose and use-case. Look for variants and documentation inside the right panel when you select a component.

***

### 🖱️ Inserting Components into Your Designs

1. **Select Your Component**
   * Click the component name in the Assets panel.
   * Details (description, usage tips, variants) will appear in the right sidebar.
2. **Insert on Canvas**
   * **Drag and drop** the component onto your canvas
   * Or **double-click** to place it at your current cursor location
3. **Customize Responsibly**
   * Adjust size, text, icons, and variants **using the right sidebar**
   * Use toggles, properties, and variant options — **never detach**!

***

### 🚫 Never Copy or Detach Components

#### ❌ What *Not* to Do

Do **not** duplicate or detach components from the Universal Design System (UDS) library. This will:

* ❌ Break the connection to the source-of-truth
* ❌ Prevent you from receiving updates or bug fixes
* ❌ Increase design debt and maintenance burden
* ❌ Introduce visual or accessibility inconsistencies
* ❌ Fragment the shared design language across teams

#### ✅ What to Do Instead

Always use **component instances** and modify them via their **exposed properties**.

* Use toggles, variants, and predefined slots to customize
* Review available options in the **right-hand properties panel**
* Only override values when absolutely necessary — and document why

#### ⚠️ Exceptions

In **rare, explicitly specified** situations (e.g., the `Breakpoints` component), detaching may be permitted. These components will be clearly labeled within their configuration panels.

> 💡 When in doubt, ask a Design Systems Lead before detaching.

***

### 🔄 Updating Components

If a component is updated in the UDS library:

* You’ll see a **blue update icon** in the layer or assets panel.
* Right-click the component → Select **“Update Instance”**

This ensures:

* You’re working with the latest designs
* Fixes and improvements are inherited automatically
* Your work stays in sync with the design system

***

### 🤔 Can’t Find What You Need?

Before building something from scratch:

1. **Check the latest library updates**
2. If it doesn’t exist, **submit a request**:
   * Tag `@Universal Design Team` in the `#design` channel on Discord
   * Include:
     * Description of your use case
     * Screenshot or quick sketch
     * Priority level (low/medium/high)

📎 [UDS Figma Library](https://www.figma.com/design/14ySC6RFgp4hxDcHfRbGSO/UDS---in-progress-?node-id=12088-4304)\
📎 [Component Request Form](https://drive.google.com/file/d/1OCCu8xWt1kFoMQa9YAAEcMl4Eg_eBC7n/view?usp=drive_link)

***

### ✅ Quick Tips for Success

* Use **semantic text styles** and **tokens** instead of custom overrides
* Use **component properties** to toggle styles, themes, or behavior
* Test combinations for **accessibility** if using appearance variants
* Collaborate with devs early to ensure semantic tags and variant logic translate to code

***

> 💡 UDS is a living system. Use it as your foundation — not just a toolbox, but a shared language between design, development, and accessibility.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/components/consuming-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.