Loading...

XD Design Rules

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.

Read our Optimization Tips to get detailed examples of user cases and common errors/fixes.

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.

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.

Dynamic Layer Order

Because Dynamic Height will stack your content, you will need to have the correct content folders in the correct order – or you WILL have
display errors.

If visually the element (folder) is above another layer (eg. header above content), then the header folder should be below the content folder in your XD layers.

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

LOGIN NOW: Get instant access to our free Online Training - click here.

Using the Plugin

How To Guides

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Dropdown +Rollover Menus

Professional dropdown menus with full CSS rollover support.

Start Your 14 Day Free Trial

Get instant access to your 14 Day Free Trial of advanced features and options, with Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, Contact Us or check the Community FAQs for assistance.

Connect With Us