User Interface
Your add-on's user interface should provide a great user experience.
Your add-on design
When it comes to design, create a layout that aligns with the functionality of your add-on.
However, remember that your users will be accessing your add-on as part of their Adobe Express workflow - so try to make sure they can move seamlessly without coming across anything jarring or counter-intuitive.
We highly suggest leveraging the Spectrum Design System and Spectrum Express theme to create user interfaces that feel similar to the Adobe Express user interface.
We’ve included these guidelines here to help you create a great experience for users. Also refer to our User interface design guide, which includes a comprehensive set of UX Guidelines to help with your add-on design.
Display Items
Here are some tips to assist with the layout of your add-on, from display to icons.
Empty screens
You should avoid including any empty screens in your design. All screens within your add-on should feature at least some information.
Scroll bars
If your content does not fully fit on a single screen, you should make it clear that the user can scroll to view the remaining content.
Buttons
All add-on buttons should be displayed correctly, and not overlap with each other.
Changing between languages
The user interface should still be clear and navigable when the user switches between languages.
They should also be able to input special characters or alphabets from other languages without causing malfunctions.
Modal dialog
Avoid using dialog boxes that interrupt the user’s workflow, except in important situations.
For example, use the in-panel UI to display things like success messages, rather than a dialog box.
Icons
Use unique icons to represent the add-on itself, and the features within it. Consider working with a designer to create icons that are clear and distinct.
Using Adobe icons and phrasing
Follow these guidelines to make sure you are referring to Adobe correctly in your add-on.
For more information on using Adobe brand assets, check our Developer Brand Guidelines.
Referring to add-ons
Always use the spelling “add-on”, NOT “addon” or “plugin”.
Referring to Adobe Express
Always use the full name “Adobe Express” when referring to the tool. Do not shorten it to “Express”.
Using Adobe Icons
We allow and encourage you to use the workflow and UI icons in Spectrum Design within your add-on. However, you must not use any Adobe branding elements, such as the Adobe logo or the “Premium” crown icon for paid items.
Referring to stock photos
If your copy includes any mention of stock content or assets within Adobe Express, you must refer to it with a lower case “s” (ie. stock).
This avoids confusion with Adobe Stock, which is a separate service.
For example:
“Discover a wide range of high-quality stock photos in Adobe Express”
Localization
All add-ons must provide support for the English language. In addition, you are welcome to create your add-on in any other supported language.
Functionality for Multilingual UI
You must test your add-on to make sure that the user interface remains intact and functional when you switch between any supported languages.
Text display
Ensure that changing the language does not result in add-on strings or text content being cut-off or truncated. All text should be visible and displayed appropriately on the add-on in all supported languages.
Branding your add-ons for monetization
When building your checkout experience to monetize your add-ons, you can use the approved colors, gradients, and iconography to communicate when content or features in your add-on require purchase and when content or features are paid and unlocked.
Carefully review our monetization brand guidelines to get the latest information on Adobe’s recommendations on branding your add-ons for monetization.
