Edit in GitHubLog an issue

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.

Copyright © 2021 Adobe. All rights reserved.