Spectrum UXP is a powerful tool that allows for consistent user interfaces across Adobe XD, Photoshop and InDesign UXP plugins, while also supporting themes. In this guide, we will explore the various components available in UXP and how they adhere to the Spectrum design guidelines.
1. Action Button:
Designers create action buttons to let users perform an action or mark a selection within a workflow. These buttons are perfect for interfaces where attracting too much attention to the buttons is not the goal. With their task-based approach, action buttons seamlessly integrate into the overall user experience.
2. Button:
Buttons play a crucial role in enabling users to perform actions or navigate to different pages. Spectrum UXP offers multiple button styles to cater to various needs. Whether it’s a primary call-to-action or a secondary action, buttons are designed to draw attention and guide users through the flow.
3. Checkbox:
Checkboxes allow users to select multiple items from a list or mark a single item as selected. They provide a clear and intuitive way for users to make selections within a given context. With Spectrum UXP, checkboxes are designed to be visually consistent and enhance the overall user experience.
4. Divider:
Dividers are essential for organizing content and establishing visual hierarchy within a layout. They bring clarity by grouping and dividing content in close proximity. Spectrum UXP offers dividers that not only enhance the visual appeal but also contribute to the overall rhythm of the interface.
5. Link:
Links serve as navigational elements, allowing users to move to different locations. You can present them inline within a paragraph or as standalone text. Spectrum UXP designs links to be visually distinguishable, ensuring a seamless navigation experience for users.
6. Picker:
Pickers, also known as “dropdowns” or “selects,” enable users to choose from a list of options within a limited space. The options presented can vary based on the context. Spectrum UXP offers intuitive and visually consistent pickers that enhance usability and streamline the selection process.
7. Radio Button:
Radio buttons provide users with a way to select a single option from a list of mutually exclusive options. All available options are exposed upfront, allowing users to compare and make informed decisions. Spectrum UXP ensures that radio buttons adhere to the design guidelines, providing a consistent and accessible user experience.
8. Slider:
Sliders allow users to quickly select a value within a predefined range. They are particularly useful when the upper and lower bounds of the range are fixed. Spectrum UXP offers sliders that are visually appealing and intuitive, enabling users to interact with ease and precision.
9. Text Field:
Text fields are essential for users to input custom text entries using a keyboard. Spectrum UXP provides various options to communicate input requirements effectively. With consistent styling and clear visual cues, text fields in UXP enhance usability and ensure a seamless input experience.
10. Tooltip:
Tooltips provide users with contextual help or information about specific components when hovering or focusing on them. They play a vital role in enhancing the overall user experience by offering additional guidance when needed. To ensure users have the necessary information at their fingertips, designers create Spectrum UXP tooltips to be informative and visually consistent.
11. Typography:
Typography is a critical aspect of any user interface. Spectrum UXP includes a range of typography components, including headings, body text, and detail text. These components adhere to the Spectrum design guidelines, ensuring consistent and visually appealing typography throughout the interface.
In conclusion
Spectrum UXP offers a comprehensive set of components that adhere to the Spectrum design guidelines. With a focus on usability, consistency, and visual appeal, these components enable developers and designers to create seamless user experiences across Adobe XD and Photoshop plugins. By leveraging the power of Spectrum UXP, you can ensure that your UI remains consistent and visually appealing, while also providing a user-friendly experience for your audience.
Remember to always refer to the Spectrum design guidelines for best practices and to stay up to date with the latest updates and enhancements to the UXP components.
More information about Spectrum UXP can be found in the Adobe documentation.
Associated Links
