Web Export - Example Projects (2020 UPDATE)

This page lists some example projects that can be used to show features, verify features work properly and can be used as starter projects.

image

There are quite a few and more will be added. If there are any you don’t see but would like to, mention them in a reply. If you’d like a guide on a certain feature mention it in a reply.

Documentation
Documentation is included in the project and in the online instruction manual here.

Requirements
Adobe XD version 18.1 or greater

Downloads
The links below will take you to a Github page that looks like the following:
image
Click on the XD project name and it will load another page with a Download button like shown below:
image

Feature Examples

  • Adding Additional Attributes - Link
  • Auto Export - Link
  • Centering - Link
  • Adding Additional Classes - Link
  • Code Blocks - Link
  • Column Layout - Link
  • Constraints - Link
  • Dynamic Page Height - Link
  • Verifying Expect Output with Differences page - Link
  • Export as Image - Link
  • Export to same page media queries - Link
  • Export Types - Link
  • External Scripts - Link
  • Exporting an external Stylesheet - Link
  • Flexible Document - Link
  • Form Elements - Link
  • Gradients - Link
  • Hover Effects - Link
  • Hyperlink Styles - Link
  • Id - Link
  • IFrame - Link
  • Lists - Link
  • Markup Before and After - Link
  • Markup Inside - Link
  • Material Design - Link
  • No JavaScript Message - Link
  • Progressive Web App - Link
  • Reveal by Screen size - Link
  • Rotation - Link
  • Row Layout - Link
  • Scaling - Link
  • Single Page Application - Link
  • Style via Classes - Link
  • Adding Additional Styles - Link
  • Defining Tag Names - Link
  • Using Templates - Link
  • Text Ids - Link
  • Text Tokens - Link
  • Embedding Twitter post - Link
  • Wordpress Theme - Link | Link 2
  • Embedding YouTube video - Link

Starter Projects

  • Single Page site - A single page with links to the locations on the same page
  • Single Page site - A single page with fixed header menu
  • Single Page Application - A page with multiple artboards and links to show each view
  • Slide Show - A single page with navigation between each artboard
  • Multiple Page site - Multiple pages with links between them
  • WordPress - Static site (theme) - Video Link
  • WordPress - Single post site (theme) - Link
  • WordPress - Multiple page site (theme) - Link
  • YouTube - Embedding a YouTube video - Video | Link
  • Single page site showing artboards by size of screen
  • Single page site resizing to screen
  • Single page site showing elements by size of screen
  • Single page site scaling to fit the view
  • PayPal starter page
  • Unsemantic starter page
  • Angular starter page
  • React starter page
  • Apache Royale page - Video | Link
  • Discourse - Export a theme

Note: Some of the starter projects (2nd list) are now example projects (1st list).

Note: A few examples are not completely finished. Send a note on the forums if you would like them updated or find any errors.