The Export Process, although different for each Environment, is similar in its architecture. There are two main process methods which occur depending on if you are exporting a Photoshop document or layer.

Layer Process

This process involves translating each XD, PSD, AI and INDD layer into its respective code environment. Each layer name will validate to ensure it uses common coding practices, then images related to layers will save and the layer will process depending on its environment.

Layer Names

Export Kit will remove all characters which are not required by the output environment. In most code environments and servers, many character ranges are not accepted, and can cause unwanted display and code errors in the output. Export Kit ensures your output will works by validating your layer names.

Learn more about Layer Naming Rules.

Images

Each layer will process the related image and render as the selected image type if available. The layer element will be captured and rasterized, then saved to the Export Folder.

Learn more about Images.

Layer Eelements

Layers are processed to check for native XD, PSD, AI and INDD layer types such as shapes, smart objects and folders. Each layer type will render differently depending on the selected output environment.

Learn more about Layer Support.

Layer Effects

Layers are then rendered as the selected environment output element. There are default reflections for rendering XD, PSD, AI and INDD layers in each environment
- eg. an Image is an Image
But also specific requirements in some environments
- eg. HTML has poor gradient support for Text effects.

All environments process elements and effects differently!

Learn more about Effects and Styles.

Layer Tags

Custom layer object, relevant to the selected environment are processed using our native Layer Tags to provide additional functionality to XD, PSD, AI and INDD layer elements. Layer Tags require a specific naming convention of layers in your Photoshop document.

Layer Tag Syntax: ${name|type:args}

Sample: ${ form |post ://host/form.php }

Learn more about Layer Tags.

Document Process

This process translates your complete XD, PSD, AI and INDD into your selected environment including the Layer Process (mentioned above) and additional processing to ensure your output is pixel-perfect.

Document Meta Information

All Meta Information is collected from your PSD, AI and INDD document to be used in the output Not available in XD; mainly as comments but some environments provide additional usage for Meta Info. Meta info is used by PSD, AI and INDD to describe the contents of the file, including information such as Title, Author, Keywords, Description and more.

Environment Output

Export Kit customizes the output for each individual environment selected providing you with a pixel-perfect translation of your XD, PSD, AI and INDD document. Each environment has variations on how and where it can render, along with what objects the individual environment supports. Export Kit takes the worry out of this process and make it automatic.

Learn more about Output Environments.

Learn more about Output Customization.

Process Each Layer

This is a layer-by-layer action, running the Layer Process on each element in your document. Refer to Layer Process above.

Custom Environment Objects

This will create custom Class objects for the selected environment. Different environments have rules to process both display and data for elements. Some environments require different settings for objects to be displayed and are mapped in this process.

Learn more about Export Optimization.

Export Files

Your document will render and save as an environment-ready project into your Export Folder. All required assets and code files are saved to the respective output folder and is ready for use once complete.