/export-x

Adobe XD plugin for streamlined mass exports

Primary LanguageJavaScript

Export X

Adobe XD plugin for streamlined resizing and export of existing image assets.

How To Use

First, create an Artboard of the size you want your images to be exported as; (@ 1x scale). Then work your way down the panel sections. Details of each section can be found below.

Imports

Specifies the images to be imported. You can import PNG and JPG/JPEG images.

  • Form Selection
    • Imports a selection of images from the file system.
  • From Directory
    • Specifies the root directory to import images from.
    • Requires a Globbing pattern to specify the import items.

Size & Origin

Specifies the size and origin each imported image will be set to before being exported.

  • Width and Height
    • Specifies the width and height to resize each imported image to.
  • X and Y
    • Specifies the x and y origin coordinates to place each imported image; relative to the parent artboard.

Scales

Specifies the scales you want each imported image exported at.

  • Must specify at least one scale.
  • Press the trash icon to delete a scale.
  • Press the plus icon to add another scale.
  • Expects a DPI multiple in the range [0.1, 100], (e.g. 2.0 for @2x DPI).

File Name

Specifies the file name (and extension), for each exported image.

  • Name

    • Specifies the base name for each exported image.
    • %n maps to the name of the imported file.
    • %i maps to the index of the imported file, in the files array.

  • Prepend

    • Optionally specifies a string to sit between the base name and scale value.

  • Append

    • Optionally specifies a string to attach to the end of the scale value.

  • Extension

    • Specifies the file type for all exported images.

    Based on the Selected Extension

    • JPG
      • Quility - Specifies the compression quality in the rang [1, 100]; Defailts to 100.
    • SVG
      • Minify - If selected, SVG code should be minified.
      • Embed Images - If selected, bitmap images are stored as base64 data inside the SVG file. Else, bitmap images are saved as separate files linked from the SVG code.

Export

Specifies the export directory for each exported image.

  • Specify the root directory for all images to be exported to.
  • Optionally specify a new directory name for each export group.
    • %n maps to the name of the imported file.
    • %i maps to the index of the imported file, in the files array.

NOTE

  • If the export file names are not unique, the plugin will attempt to resolve this by prepending %i to the conflicting file names.
  • If the export directory name is not unique for each image group, all exported images will be exported to the same directory.
  • For support you can: