Adobe XD is a pretty awesome program for designing websites and far surpasses its old predecessor Adobe Photoshop. At Bright Vessel. We have made it our go-to program to build out user experiences for clients.
1. You first want to open your adobe XD file
2. Once you have your file open you will want to make sure you provision the files so they can export correctly.
The need to be precise and all elements need to be group and in their own section.
In this image, a designer adds elements in several different layers, so when all layers were grouped. The elements were not properly cropped. This is an easy fix. When double-clicking on one of the elements, Ex: the man. You drag so that no elements bleed to a different row.
This is an easy fix. When double-clicking on one of the elements, Ex: the man. You drag so that no elements bleed to a different row.
3. Naming scheme is very important. It is always good to name your images not just for an easy way to identify but also for SEO. We will use HDR for headers and then BG for backgrounds.
This makes it easier to know what type of elements image it is and then the name of the section if a background or the element if it is typography, button, etc. In the layers area, name the group and single images. Use lower case and a dash between each word.
4. Now the easiest way to export once you have corrected all elements is to group them so you can export the image needed. In most cases, you will be gathering assets that otherwise could not be done in HTML and our a builder that you may be using.
File > Export > Selected
Now that we named the layer, we do not have to type it out. So we know what type of elements images are for the background, typography, button, etc. It is always good to name your images not just for an easy way to identify but also for SEO. We will use HDR for headers and then BG for backgrounds.
Once you have exported, you should then have a group of elements in the desired type of image file.
You must be logged in to post a comment.
