Consuming Components

This guide will help you confidently find, insert, and update UDS components in Figma, while following best practices to maintain accessibility, scalability, and consistency across all projects.

🔍 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

1. 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 📎 Component Request Form

---

✅ 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.