User Interface
The user interface section will provide guidance around the different UXP Spectrum components you can use to build a plugin UI. For guidance around the UX of a plugin and best practices refer to UX patterns.
Visit the Adobe Spectrum website to reference
- Styling
- Behaviors
- Usage guidelines
- Download UI files and more
UXP Spectrum Components
Spectrum UXP allows UI to be the same for plugins across XD and Photoshop and support themes. Below is a list to all the components available in UXP and the Spectrum design gudelines.
Action button - Action buttons allow users to perform an action or mark a selection. They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
Button - Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
Checkbox - Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Divider - Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.
Link - Links allow users to navigate to a different location. They can be presented inline inside a paragraph or as standalone text.
Picker - Pickers (sometimes known as "dropdowns" or "selects") allow users to choose from a list of options in a limited space. The list of options can change based on the context.
Radio Button - Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
Slider - Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
Text Field - Text fields are text boxes that allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements.
Tooltip - Tooltips allow users to get contextual help or information about specific components when hovering or focusing on them.
Typography - Typography components include Heading, Body, and Detail.
