Introduction

Adobe Express is a powerful tool that allows users to edit photos, create designs, and enhance their creativity. With its wide range of features and functionalities, it offers a great platform for designers and developers to create add-ons that can further enhance the user experience. The Adobe Express marketplace has grown to over 60 add-ons, demonstrating the vibrant ecosystem that has emerged around this platform.

These comprehensive guidelines, developed through collaboration between Adobe’s Extensibility team (particularly Joel Ebner) and early partners like Walter Kimaro during the year-long beta period, will ensure that your add-ons are user-friendly, visually appealing, and seamlessly integrate with the existing functionalities of Adobe Express.

Adobe provides a robust set of controls through the Spectrum UXP which is used with the JavaScript Developer Framework, UXP (Unified Extensibility Platform) – the modern replacement for the legacy Common Extensibility Platform (CEP).

Core Design Principles

Focus and Distinctiveness

Rather than attempting to serve multiple use cases simultaneously, successful add-ons excel at doing one or two things exceptionally well. When you have multiple feature ideas, evaluate whether these concepts fall under the same order of functionality:

• Good combination: Libraries of icons and illustrations (similar functionality)
• Better as separate add-ons: Icon library + pattern generator (fundamentally different use cases)

1. Understand the User’s Workflow

Before you start designing an add-on, it is crucial to understand the user’s workflow. Take the time to analyze how users interact with the tool, what tasks they commonly perform, and what pain points they may encounter.

Recommended Approach

• Review complete UX documentation first – Like reading a recipe before cooking, understanding the full context ensures you grasp not just individual components but their relationships
• Study successful add-ons as references:
  • Attention Insight: AI-powered heatmap analysis with complex functionality in a clean interface
  • Color Blindness Simulator: Accessibility testing with multiple viewing options in limited space
  • Vision Board by Walter Kimaro: Developed during closed beta, helped shape the guidelines

Key Observations from Successful Add-ons

• Padding conventions: Use multiples of 8px (typically 8, 16, or 24px)
• Container shapes: Consistent corner rounding of either 4px or 8px
• Button placement: Large Spectrum buttons in “primary” or “accent” variants for key actions

By gaining a deep understanding of the user’s workflow, you can design add-ons that seamlessly fit into their existing processes and provide value without disrupting their creative flow.

2. Keep it Simple and Intuitive

Simplicity and intuitiveness are key when designing add-ons. Users should be able to easily understand how to use your add-on without any confusion or frustration.

Design Best Practices

• Avoid cluttering the interface with unnecessary elements
• Keep the design clean and minimalistic, focusing on core functionality
• Use clear and concise language in instructions and tooltips
• Implement a task-based approach with action buttons for primary workflows

Panel Constraints as Design Opportunities

The fixed dimensions of add-on panels (320px width, browser-dependent height) should guide your design decisions:

• Vertical layout thinking: Design for a tall, narrow workspace
• Above the fold: Keep primary action buttons immediately visible
• Scrolling strategy:
  • Long scrollable sections work well for browsing (icon libraries, templates)
  • Forms should avoid excessive scrolling
  • Use tabs and accordions for distinct content sections
• Drill-down navigation: Follow Adobe Express’s established patterns for hierarchical content

3. Consistency is Key

Consistency is crucial when designing add-ons. Your add-on should adhere to the overall design language and branding of Adobe Express to provide a seamless user experience.

Implementing Spectrum Design System

Component Priority Hierarchy

1. Spectrum Web Components (Strongly Recommended)
   • Framework-agnostic and standards-based
   • Lightweight performance
   • Over 60 components optimized for Adobe Express
   • Installation: npm install @spectrum-web-components/theme @spectrum-web-components/button @spectrum-web-components/textfield
2. swc-react (For React Applications)
   • 62+ components vs React Spectrum’s limited Express theme support
   • Better performance and consistency
   • Full Express theme compatibility
3. React Spectrum (Limited Use)
   • Express theme still in alpha
   • Consider only for specific use cases
4. Spectrum CSS (Simplest Applications Only)
   • Use only for basic typography and forms
   • Not suitable for complex interactivity

Implementation Example

<sp-theme scale="medium" color="light" system="express">
  <!-- Your add-on content here -->
</sp-theme>

Visual Consistency Guidelines

• Typography: Follow Spectrum’s type scale exactly
• Colors: Use only Express theme color tokens
• Spacing: Maintain 8px grid system
• Icons: Utilize Spectrum’s icon library
• Corner radius: Consistent 4px or 8px rounding

Ensure that the colors, typography, and iconography used in your add-on align with the existing design patterns of Adobe Express. Consistency will not only make your add-on visually appealing but also make it easier for users to navigate and understand.

4. Optimize Performance

Add-ons should not compromise the performance of Adobe Express. Users expect a smooth and fast experience when using the tool, and your add-on should not cause any lag or delays.

Performance Optimization Strategies

Bundle Size Management

• Minimize bundle sizes through selective component importing
• Implement efficient webpack configurations
• Use lazy loading for non-critical components
• Optimize asset delivery with appropriate caching strategies

Code Optimization

• Minimize unnecessary network requests
• Optimize image loading with proper formats and compression
• Avoid memory leaks and performance bottlenecks
• Implement efficient state management

Testing Requirements

• Test across different network conditions (3G, 4G, broadband)
• Verify performance on various device capabilities
• Monitor memory usage during extended sessions
• Profile JavaScript execution for optimization opportunities

Optimize your add-on’s code to ensure efficient performance. Test your add-on thoroughly to ensure it does not impact the overall performance of Adobe Express.

5. Provide Customization Options

Users love customization options that allow them to personalize their experience. Provide users with the ability to customize your add-on according to their preferences.

Customization Implementation

• Settings panel: Dedicated area for user preferences
• Theme support: Light/dark mode compatibility
• Layout options: Compact vs expanded views
• Saved preferences: Store user settings locally
• Export/import settings: Allow users to share configurations

Allow users to adjust settings, change themes, or customize the interface to suit their needs. This level of customization will make your add-on more versatile and appealing to a wider range of users.

6. Seek User Feedback

Feedback from users is invaluable when designing add-ons for Adobe Express. Regularly seek feedback from your users to understand their pain points, suggestions, and ideas for improvement.

Feedback Collection Methods

• In-app feedback buttons
• User surveys after key interactions
• Analytics to track usage patterns
• Community forums and Discord channels
• Beta testing programs

Consider implementing user feedback into future updates of your add-on. This will not only enhance the user experience but also build trust and loyalty among your user base.

Technical Requirements and Implementation

Development Environment Setup

Required Tools

• Node.js: Version 16 or newer
• Adobe UXP Developer Tool: For plugin creation, debugging, and packaging
• CLI Tool: @adobe/create-ccweb-add-on@3.0.0 for project templates
• IDE: Visual Studio Code recommended
• HTTPS serving: Mandatory for testing and deployment

Project Templates Available

• swc-javascript
• swc-typescript
• swc-javascript-sandbox
• swc-typescript-sandbox
• react-javascript
• react-typescript

Adobe Express Add-on SDK Implementation

// Import the SDK from Adobe's CDN
import addOnSdk from 'https://new.express.adobe.com/static/add-on-sdk/sdk.js';

// Initialize the SDK
addOnSdk.ready.then(() => {
    // Your add-on initialization code
    console.log('Add-on SDK is ready');
});

Manifest Configuration

The manifest.json must specify:

• Version 2 format
• testId for development
• Semantic versioning
• Requirements for apps and API versions
• Entry points for panels and dialogs

Key Spectrum Web Components

Essential Components for Add-ons

• Action Buttons: Task-based primary actions
• Standard Buttons: Multiple style variants (primary, secondary, accent)
• Checkboxes: Multi-selection interfaces
• Dividers: Content organization
• Pickers: Dropdown selections
• Sliders: Value selection
• Typography Components: Headings, body text, detail text

Resources and Support

Essential Documentation

• Official UX Guidelines on Adobe XD
• Spectrum Design System
• Adobe Express Add-ons Developer Portal
• Spectrum Web Components Repository

Community and Support

• Creative Cloud Developer Forums
• Bi-weekly office hours with Adobe’s team
• Active Discord community
• Adobe Fund for Design program for innovative concepts

Mapsoft’s Adobe Expertise

As an Adobe Business Partner since 1991, Mapsoft brings three decades of experience in Adobe software development:

• Creative Cloud Extensions: Photoshop, InDesign, Illustrator
• Acrobat Plugins: Development since version 1.0
• PDF Development: Adobe PDF Library licensing
• Modern UXP Development: Transition from CEP to UXP
• Enterprise Solutions: Serving Network Rail, Lloyd’s of London, Foster + Partners, Hallmark, Xerox

Conclusion

Designing better add-ons requires a deep understanding of the user’s workflow, a focus on simplicity and intuitiveness, consistency with the overall design language, optimized performance, customization options, and regular user feedback. The guidelines presented here represent the collective wisdom from Adobe’s Extensibility team and successful early adopters.

By following these comprehensive UX guidelines and leveraging the Spectrum Design System with modern UXP development practices, you can create add-ons that seamlessly integrate with Adobe Express and enhance the user experience for all its users. Remember, the key is to design add-ons that provide value, improve efficiency, and make the creative process more enjoyable for Adobe Express users.

These guidelines are a living document that continues to evolve with the platform. As the Adobe Express ecosystem grows, best practices will be refined through ongoing collaboration between Adobe and its developer community.

Associated Links

• Why Custom Software Solutions Are Key to Business Efficiency
• A Guide to Spectrum UXP Components and Design Guidelines
• Adobe Unified Extensibility Platform (UXP)