Many of the same rules that we follow for photoshop files apply for XD, however the way we export is a bit different. 

Assets art board

There should be an art board labeled "Assets" that contains duplicates of all graphics for export from the design. Including all assets on the art board is a good way to see graphics all laid out and makes it easy to grab all of the same files (ie. all the photos that will be exported as JPGs) and export in a batch format.

Re-exporting icons is also easier using the art board, preventing the need to hunt through layers and groups to retrieve an icon.

This step only needs to be done during the Dev Specs stage, however you may add assets to this art board at any time during the homepage or interiors phase. All assets should be exported into an Assets folder during the Dev Specs stage.

Please make sure all assets are named correctly.

PNGs

These should always be exported as @2x. XD will export both a @1x and @2x, so delete any @1x files. 

**In the style guides we should always note the @2x dimensions of icons, so that the client can create them at double the size as well.**

Logos

These can be exported in two ways, depending on how it is created. If it is all text and vector shapes, it should be exported as an SVG. If the logo is the same for desktop, sticky, and mobile, there should be only one single logo SVG file exported. The dev team will be able to resize it easily. If the logo has a raster image, it can only be exported as @2x PNG. If the logo is the same for all screens, there should only be one PNG file exported. 

**for any designs that follow our mid-tier or down-market templates, the logos should always be exported as separate @2x PNGs for each screen (desktop, mobile, sticky)**

For any logos that are made with live text, make sure to convert the text to a path, as otherwise the SVG file will read it as live text, and for a user that does not have that font installed, it will not display properly.

Call to action buttons

These icons should always be exported as @2x PNG files. The naming convention should be in a number format. ie. 1.png, 1-H.png, 2.png, 2-H.png

Social Media icons

Similar to our photoshop process, these should be exported depending on how they are designed. If the background is the same for all of the icons - inactive AND hover - then the icon itself can be exported as @2x PNG. But if they are different colors or on hover they turn into their different brand colors, then both the icon and background should be exported together as one @2x PNG, for both inactive and hover states.

Imagery

Any photos and images should be exported as a JPG for Design, which is regular @1x dimensions. For hero images, export however many scroll dots are on the slider. Ex. if there are 4 scroll dots, please make sure there are 4 hero images total. 

The developers requested that we also provide images in dimensions that are not exact - only the ones where the client will have control over, so ie. news images or spotlight images, NOT background imagery. This allows them to test and ensure that if the client uploads photos that iare not in those exact dimensions, the images will not stretch disproportionately. For this, we just need to add regular un-cropped/un-masked photos into the assets folder, labeled alt-dimensions.

Other design elements

Any other design elements (such as arrows or footer icons for address, contact, etc) that the client will NOT be able to edit, should be exported as an SVG. 

For instances where the off/hover states change opacity, we only need to export the 100% opacity element as the dev team can add transparency effect to it for its alternate state. 

In these instances, only the full opacity arrows should be exported as SVGs. The rest of the shapes, shadows, colors can be done in CSS, along with the opacity effect for the alternate state previously mentioned.

Less commonly, if there are SVG elements that are masked/cropped in the design, the dimensions of the FULL SVG element should be noted in the Dev Notes as well, since only the cropped dimensions can be accessed in the specs. Even though we export the full SVG asset, the devs are not able to read the dimensions of it like jpgs or pngs unless they drag it into Photoshop which could give misleading dimensions. Below is an example of this case where the dimensions of the full swirl SVG should be noted in the Dev Notes prototype.

Favicon

The favicon should also be exported during the Dev Specs phase, saved into the same folder with the rest of the assets. This lives on its own art-board, in the 256 x 256 px dimensions required. 

Final share link

Provide a link to the assets folder in the Dev Specs task description. If we copy the browser URL, they are restricted from accessing it. Make sure to use the "Share This Folder" method and make the link public (people with the link), to make sure the devs can open it. This is not the default setting so it needs to always be manually changed.