Loading...

Convert XD to HTML and CSS

Your First XD to HTML and CSS Export

Easily convert Adobe XD to HTML and CSS with support for multiple pages, custom styles and dynamic elements. You can use your current XD design or any XD Template found online to get started.

TIP: Learn How to use Export Kit with XD and start to experience awesome in seconds.

You can export (a) a single Artboard, or (b) all Artboards as individual HTML pages. If you export a single Artboard then you will get an individual .css file per export. If you export all Artboards, you will get individual .html files with a single .css file for easy caching.

A Deeper Look into HTML and CSS Exports

Your Adobe XD to HTML and CSS export will reflect the design of your XD document to maintain the parent/child relationship of layers, along with mapping XD properties to the corrisponding HTML element.

The exported HTML and CSS files are clean, easy-to-read, and ready-to-use right away. Names of elements within the code is reflective of the naming convention of your XD document.

Text, Font and Style Ranges

Export Kit has great support for custom style rangers within XD text layers. Using Paragraph text and ${p} tags, you can render your complete style ranges.

EXAMPLE: ${p} my custom text

Style Ranges allow you to have multiple font styles applied to individual words or characters whitin the same paragraph; whitout having to create a new text element for each style.

HTML Web Forms and Input Elements

Create unlimited HTML Web Forms with dynamic Input elements directly from your XD design using our ${form} tag. Web Froms allow users to provide information which can then be handled by the client or server back-end.

EXAMPLE: ${form|post:email_form.php} my contact form

All web forms require Input elements to process data on the server. You can add unlimited input items to your webform using our Input Tag.

IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.
TIP: Take care when adding layer names for Input items, the layer name will be used as the Input item name in the output.  Learn more about Layer Naming Rules.

Input Tags work with Form Tags to provide customization support for web forms. Input Tags will allow you to define many input elements and export them directly in your HTML5 webpage.

  • checkbox
  • file
  • hidden
  • password
  • radio
  • reset
  • text
  • textarea
  • submit
EXAMPLE: ${input:password} user_password

Custom CSS Input Element Styles

CSS class styles apply directly to any element regardless of the XD layer type. This makes it easy to fully customize the final output of all projects to match any design specification.

TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.

CSS and JavaScript Popup Lightbox

Create custom dynamic content such as Popups and JavaScript Lightboxes directly using your XD layers along with ${class} and ${code} tags. You can create any native HTML element or run-time script within XD.

TIP: Learn more about Class Tag and Code Tag to create native HTML elements.

You can further customize your output with any HTML5 element using our Class Tag with your folders. All elements support custom properties so you can map them any way you like.

IMPORTANT: When creating empty elements (eg. <div />) with Class Tag, you must include an empty argument (eg. ${class|div: }).

You can create ANY element including iframe, canvas and object, the following are just examples.  Note that Class tag only works with Folders.

HTML Tag

Usage

<div>

${class|div: }

<img>

${class|img: }

<span>

${class|span: }

<form>

${class|form:action=”/path/to/script.php”}

<input>

${class|input:type=”textarea”}

<p>

${class|p: }

<a>

${class|a:href=”http://google.com” title=”google link”}

<textarea>

${class|textarea:rows=”5″}

<ul>

${class|ul:class=”menu nav”}

<ol>

${class|ol:class=”menu footer”}

<li>

${class|li:class=”nav nav-item”}

<section>

${class|section:role=”content” data=”val1″}

<header>

${class|header:id=”page_content_header”}

<footer>

${class|footer:id=”page_content_footer”}

CSS Rollover and Hover Buttons

XD to CSS is even easier with Export Kit. You can map any custom CSS style to XD layers and manipulate any property at run-time. Rollovers and Hovers support text, images, shapes and folders; with a few layer tags you can customize the look and feel of elements with any native CSS state.

TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.

Create pseudo selectors to the full extent of CSS3. You only need to change the layer names to reflect your desired output.

EXAMPLE: my_style:first-child

You can add direct selectors to each layer in styles folder to native HTML elements. You will have to use ">>" (without space) when adding selectors.

EXAMPLE: my_style>>span

You can use any valid CSS3 selector with Export Kit to define your custom classes.

EXAMPLE: my_style>>a[href$=".pdf"]
NOTE: When you create your custom CSS classes, don’t worry about the size, position or content of the layer. Only the styles and effeccts will convert in your output.

CSS styles also support Hidden Layers which will allow you make layers visible/hidden only when required or triggered by the user. Hidden layers can be used to create dropdown menus, steppers, and more – only limit is your imagination!

CSS and JavaScript Animations

Apply any custom CSS or JavaScript animation to any element inside your XD document. You can embed custom styles and scripts, or load any external file to apply interactivity at run-time.

TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
TIP: Learn more about Code Tag to embed or load external CSS and JavaScript files.

JavaScript Photo Slideshows

Depending on your slideshow needs, you may want to Google “free javascript slideshow script” and download a free JavaScript slideshow script to get you started with your slideshow.

NOTE: You will need to have a general understanding of HTML and JavaScript to create your own custom slideshow or modify an existing one.

The setup of your JavaScript file is important because the HTML elements the script looks for, are the same XD layer elements you are required to create. Export Kit makes it easy to map your JavaScript elements to any XD layer element, you only need to know the name, or the class to include in your PSD.

Website Navigation Menus

Nav Menus are a group of anchor links used to direct users to both internal and external pages. Nav Menus are involved in all common designs for both websites and applications.

TIP: Learn more about Link Tag for individual layers.
TIP: Learn more about Class Tag for groups and folders.

IMPORTANT: You must design your menus to reflect the number of navigation items you require. Eg. if you need 4 nav links, then you must create 4 individual elements in your design.
NOTE: Consider a nav menu will require individual buttons to navigate to each page link. You will need an individual text layer per button to correctly place links and organize your content.

Fixed and Static Menus

Take control of your XD to HTML export with dynamic objects such as fixed and static menus. You can personalize the complete look and feel of your project to provide the best user experience.

TIP: Learn more about Code Tag to embed or load external CSS and JavaScript files.

Website Wireframe Templates

Explore your creative potential and learn how to convert your currnet design into 100s of sub-designs with a few simple steps. With a single design, you can provide multiple themed layouts to both clients and end-users.

TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.

Responsive HTML and CSS

Create XD to Responsive HTML5 and CSS3 websites using any Adobe XD file. You can define multiple screen sizes to support any number of devices inlcuding desktop, tablet and mobile.

You can set the screen size to any custom size, but generally here are a few common sizes:

  • default (required)
  • 320 (mobile)
  • 768 (tablet)
  • 1280 (desktop)
EXAMPLE: ${css|screen:default} default (required)
EXAMPLE: ${css|screen:1280} desktop

Export Kit will not assume you want an element in a particular position or size when you output your responsive css screen. Your design is just that – your design! Export Kit allows you to customize each target screen so you can personalize your Output for that screen.

IMPORTANT: You need 1 screen folder per target screen, if you have 3 target screens – eg. Desktop, Mobile and Tablet, then you will need 3 css screen folders to support the design.

Each responsive css screen folder allows you to change the look and feel of your Output to target the user screen size. You can change the element size, position and effects for each individual css screen folder.

IMPORTANT: DO NOT change the layer names in your css screen folder.

We recommend you start with the LARGEST responsive target screen size and work-down in size when creating css screen folders. This will save you lots of time when creating additional css screens.

NOTE: CSS3 has strict rules when rendering responsive designs, you need to have the smaller target screen rendered before larger ones. Because the Export Process is a bottom-up process, you need to place your smaller screen folders below the larger ones in your Artboard.
TIP: You should always add a base or minimum target screen along with your default to prevent display errors, eg. ${css|screen:320} will target most common devices and display on any screen as long as the device is wider than 320px.

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.

Live Demo Export

Our Creative Team will export your project live and answer any questions you may have - 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

★ New XD Panel ★ - Update Now, Subscribe