Components in design tools: a step-by-step guide (Adobe XD and beyond)

Components are reusable design elements, such as buttons, inputs and cards, that update everywhere when the main version changes. In Adobe XD they support states and overrides; in Figma and Sketch they support variants or overrides, properties and shared libraries. Building a small, well-structured component set speeds up design and keeps interfaces consistent.

What components are

A component is a reusable design element. You create it once, as a main or master version, and then place copies, often called instances, throughout your designs. When you change the main component, every instance updates automatically. Instances can usually be customised in limited ways, such as changing text or swapping an icon, without breaking the link to the main version.

Components solve one of the most common problems in interface design: inconsistency. Without them, designers copy and paste elements, and over time small differences creep in. Updating a button style across a large project becomes slow and error-prone. Components make designs faster to build, easier to update and more consistent, and they form the foundation of design systems.

A note on Adobe XD

Adobe XD introduced components with features such as states, which allow one component to hold several appearances like default, hover and pressed. Adobe has since stopped active development of XD, placing it in maintenance mode. Existing XD users can still use components, but most teams starting new work choose Figma or Sketch. The concepts in this guide apply across all of these tools. Our Adobe XD vs Figma vs Sketch decision guide explains the options.

Component terms across tools

Step 1: create a basic component

• Design the element: For example, a button with a label and background.
• Turn it into a component: Use the create component command.
• Name it clearly: Use a consistent naming pattern, such as Button / Primary.
• Place instances: Drag copies into your designs.
• Test updates: Change the main component and confirm instances update.

Step 2: add states or variants

Interactive elements need several appearances: default, hover, focus, pressed, disabled and sometimes loading or error. In XD these are states within one component; in Figma they are variants grouped into a component set. Defining all states up front makes prototypes more realistic and helps developers understand how elements should behave. Our modern UI design guide lists the states every component should have.

• Default: The normal appearance.
• Hover and focus: Responses to pointer and keyboard.
• Pressed: Feedback while the action happens.
• Disabled: Unavailable actions.
• Loading: Work in progress.
• Error: Something needs attention.

Step 3: make components responsive

Components should adapt when content changes. A button should grow with longer text, a card should stretch to fit its container and a list item should handle different lengths of content. Use layout features, such as stacks and padding in XD or auto layout in Figma, so components resize correctly without manual adjustments.

Step 4: nest components

Complex components are built from simpler ones. A card might contain an image, a heading, text and a button component. A navigation bar might contain icon and menu item components. Nesting means that when you update a small component, such as a button, every larger component that uses it updates too. Keep nesting logical and not too deep, so components remain easy to understand.

Step 5: share components in a library

Publishing components to a shared library makes them available across files and to the whole team. Designers pull components from the library instead of recreating them, and updates can be published centrally. Document each component with a short description and usage guidance. Our guide to building a design system from zero explains how libraries become part of a wider system.

Connecting design components to code

Components are most valuable when they match the components developers build in code. When the button in the design file has the same name, states and properties as the button in the codebase, handoff is faster and fewer differences appear between design and the live product. Many teams document components in tools such as Storybook alongside their design library, so designers and developers can see the same building blocks. Regular reviews between design and engineering keep the two in sync as the product evolves.

Naming and organising components

• Use a consistent pattern, such as Category / Name / Variant
• Group components by type: inputs, buttons, navigation, feedback
• Keep names short and readable for designers and developers
• Match names to code components where possible
• Archive or remove components that are no longer used

Common mistakes

• Detaching instances instead of improving the main component
• Creating too many near-identical components
• Forgetting interactive states
• Building components without responsive layout
• Leaving components undocumented

Frequently asked questions

What is a component in UI design?

A reusable design element, such as a button or card, that updates everywhere when its main version changes.

What are component states in Adobe XD?

Different appearances of one component, such as default, hover and pressed, stored together.

Is Adobe XD still a good tool for components?

It works for existing projects, but XD is in maintenance mode, so most teams use Figma or Sketch for new work.

How many components does a design system need?

Start with the most-used elements, often ten to twenty, and add more as needs arise.

Can components be shared between different design tools?

Not directly. Moving between tools usually means rebuilding components, which is a good time to clean up and improve them.

Should every element be a component?

No. Turn elements into components when they repeat or need to stay consistent. One-off layouts can stay as regular frames.

Related articles

• Building a design system from zero to one
• Adobe XD vs Figma vs Sketch: a decision guide
• Figma basics: what Figma is and how to use it