Considering you want to convert your XD, we can assume you have your XD 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 artboard 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 4: 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.

Changing your layer order will NOT affect your visual output when Dynamic Height is NOT enabled.

Incorrect layer order WILL affect your visual output when Dynamic Height IS enabled.

⛔ IMPORTANT: remember to use FOLDERS with Dynamic Height and not Layers to avoid display errors - read more.