Unified Extensibility Platform (UXP) for Photoshop

repository·main·Indexed 40 days ago

https://github.com/adobedocs/uxp-photoshop

Documentation for developing Adobe Photoshop plugins using the Unified Extensibility Platform (UXP). Includes guidance on building user interfaces with UXP Spectrum Components, choosing between non-blocking Plugins panels and blocking Plugins dialogs, and adhering to Adobe's UX requirements and best practices for plugin approval.

Tokens
267.6K
Snippets
857
Records
1.5K
Agent score
47%

What's inside UXP

  1. Overview of Data Transfer APIs in UXP

    main

    The UXP environment provides several web-standard APIs for handling data transfers, including network requests, binary data, and clipboard operations. These APIs allow Photoshop plugins to communicate with external servers, manage file-like data, and interact with the system clipboard.

    Available Data Transfer interfaces include:

    • Binary Data: Blob
    • Clipboard: Clipboard
    • Network/HTTP: fetch, Request, Response, Headers, FormData, XMLHttpRequest
    • Real-time Communication: WebSocket
  2. Overview of Persistent File Storage in UXP

    main

    Persistent File Storage in UXP provides an abstraction for interacting with the file system. It allows developers to manage files and folders across different storage domains. The API is structured around several core components:

    • localFileSystem: The primary entry point for accessing the local file system.
    • FileSystemProvider: An abstraction for different storage providers.
    • Entry: The base class for items within the file system.
    • File and Folder: Specific implementations of Entry for files and directories.
    • EntryMetadata: Information describing an entry (e.g., name, size, timestamps).

    To use this API, you must understand the available domains, modes (how files are opened), and file types supported by the environment.

  3. Overview of the Adobe UXP Developer Tool

    main

    The Adobe UXP Developer Tool is a utility designed to simplify the development lifecycle of UXP-based plugins for Photoshop and other UXP-powered host applications. It provides capabilities to:

    • Create: Generate new plugins using provided templates.
    • Load: Import and run plugins within the host application.
    • Debug: Inspect and debug plugin code during development.
    • Package: Prepare plugins for distribution.

    Note on Permissions: The tool requires elevated privileges to function correctly. If you are on a managed system, ensure you have the ability to elevate to Administrator privileges.

  4. Understand Adobe UX patterns for Photoshop plugins

    main

    To ensure your plugin is approved by Adobe and provides a high-quality user experience, you must follow specific UX patterns. These are divided into two main categories:

    1. UX Requirements: Mandatory patterns that all plugins must follow to meet Adobe's approval criteria. These typically involve specific layout and dialog specifications.
    2. UX Best Practices: Recommendations for improving usability, behavior, user feedback, privacy, and interface guidelines. These are often presented as "do" and "don't" examples to guide design decisions.
  5. Access UXP JavaScript APIs

    main

    UXP provides a set of common APIs available in UXP-powered host applications (such as Adobe Photoshop 2021). These APIs can be accessed in two ways:

    1. Global Context: Many APIs are included directly in the global context.
    2. Modules: APIs can be loaded as require-able modules.

    Refer to the Global Members and Modules documentation for specific API details.

  6. Explore UXP Global Members

    main
    The UXP environment provides several global members that allow you to interact with core system capabilities. These include APIs for cryptography, data storage, data transfers, DOM manipulation, image handling, and file system paths. Use these global objects to perform tasks that fall outside of the specific Photoshop application object model, such as managing local storage or handling binary image data.
  7. Explore UXP CSS Reference

    main

    The UXP CSS Reference provides technical documentation for the CSS styles and features supported within the UXP environment. Use this reference to understand the subset of CSS available for styling UXP plugins and components.

    Key areas covered include:

    • General CSS: Core styling capabilities.
    • Media Queries: Responsive design features.
    • Pseudo-classes: State-based selectors (e.g., :hover).
    • Pseudo-elements: Styling specific parts of an element (e.g., ::before).
    • Selectors: Methods for targeting elements.
    • Styles: Specific CSS properties and values.
  8. Use Spectrum UXP typography widgets

    main

    Spectrum UXP provides a set of typography widgets to ensure consistent text styling within your Photoshop UXP plugins. These widgets are categorized by their semantic purpose:

    • sp-body: For standard body text.
    • sp-detail: For secondary or less prominent detail text.
    • sp-heading: For headings and prominent titles.
    • sp-label: For short, descriptive labels.

    Each widget should be used according to its intended semantic role to maintain visual hierarchy and accessibility within the Spectrum design system.