Components
Components are reusable, modular building blocks of a user interface, such as buttons, cards, or forms, designed to ensure consistency and efficiency in UI/UX design.
They serve as the foundation for scalable design systems, reducing redundancy and facilitating collaboration between designers and developers.
Why need components?
- Reusability: Design components to be versatile, applicable across multiple screens or contexts to minimize duplication.
- Consistency: Ensure components adhere to the design system’s standards, including typography, colors, and spacing, to maintain a unified look.
- Modularity: Create components that are independent yet interoperable, allowing easy combination or modification without breaking the interface.
- Clarity: Document each component’s purpose, states, and usage to facilitate adoption by designers and developers.
- Accessibility: Build components with inclusive features, such as sufficient contrast ratios and keyboard navigability, to meet WCAG standards.
Common UI Components
| Component | Description |
|---|---|
| Button | Triggers an action or event when clicked. |
| Text Field | Allows users to input text data. |
| Checkbox | Enables selection of multiple options from a set. |
| Radio Button | Allows selection of a single option from a set. |
| Dropdown Menu | Provides a list of options in a compact form. |
| Slider | Lets users adjust a value within a range. |
| Tab | Organizes content into separate views within the same context. |
| Modal Window | Displays content in a layer above the main interface, often requiring interaction before returning to the main view. |
| Tooltip | Offers brief information when hovering over an element. |
| Progress Bar | Visually represents the completion status of a task. |
View Figma Example
To learn more about advanced components, you can check out Atomic Design
Last updated on