Considering you want to convert your XD, we can assume you have your Photoshop design handy. Export Kit takes the headache out of the export process and will save you lots of time and budget with your web projects.
Rule 1: No Empty Layers
You cannot have empty layers in Export Kit, otherwise the export may have display errors. Here is a list of empty layers:
- A layer with no name
- A layer with no image/shape
- A text layer with no text
- A folder with no child layers
Rule 2: Organize Artboards, Layers and Folders
The Export Process will translate each individual arboard to a native page, each individual layer to its native type; so the more layers you use – the more control you have over the output. You should always group your layers into folders if they are related – read more about Organizing Folders and Layers.
Eg. If you have layers that belong to a menu, then you should group those layers and name the group “menu container”.
You can further organize your layers by grouping individual buttons into folders also: “home button”, “contact button”, etc.
Rule 3: WYSIWYG
What You See Is What You Get! If you zoom in to 100%, what you see in your XD – is what you will see in the output. You should always build your default export first (what you expect to see), then customize your final output.
Artboards are *Pages*
RECOMMENDED: Use as many Artboards as possible to reflect your project page / screen structure.
All designs in Export Kit should start at
0,0 will render similar to your design. Stacking content and using Layer Tags allows you to customize your output to match your project requirements.
Content Margin Space
AVOID: If your XD design has the content margin at 500px - your Output content will start at 500px.
Your content will render in the position you place it within your design. When you margin content in your design, the margin will also convert in the output.
✱ NOTE: Avoid using wide margins in your design, eg. to center content - you can control this with Export Kit when you Customize your Alignment.
Rule 5: Layer Ordering is Important!
Export Kit is a Bottom-Up process. This means Export Kit works how you would naturally create designs in XD wihtout changing your design style. Each layer is processed starting from the last or bottom layer (typically the “Background” layer), then up. Read more about Organizing Folders and Layers.