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

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.