Creating a TypeScript application and working with VS Code for your Adobe XD Web Exports

If you are using Web Export to develop applications and you are a developer or a designer who is working with a developer this guide is for you.

There is a way to build your user interface and setup your project so that you or the developer who wires everything together will be able to work on the page in VS Code (vscode) and get code completion, code hinting, typescript support and so on while the design can be modified easily.

In Adobe XD, or possibly other design tools (more to come) after you have created your user interface designs you need to then export the designs to web pages that the developer can use them. You need to do a few things on the design side and the development side and then this process flows.

The big picture or basic outline is this:

  • Create the designs in XD
  • Give ids to elements you need to reference (usually interactive items that are part of the view)
  • Convert any elements that need to be form elements into form elements
  • Create any item renderers (for repeated items like grids or lists)
  • Create any pop ups
  • Export the page, the item renderers and the pop ups together (as a flat export)
  • Developer focused steps next
  • Create a view class in VSCode (hopefully automated in the future)
  • Create the application class in VSCode (extending the base class)
  • Instantiate the application (in your HTML page)

If you don’t know what this means that means you need to read this guide.

Create the artboards
In XD create the artboards and related items and export them with Single Page (flat)



Open VS Code and open a new window

Open the folder view:

Usually /documents/repositories/my-project-name:

If a dialog appears asking if you can Trust the Authors click yes since you are the author.
You now have an empty project:

Open a new terminal window

Make sure that Typescript is installed (skip this section if you don’t want to use typescript)
Next, create your application class, starter-app.ts (or for JavaScript only, starter-app.js).

starter-app.ts:

class StarterApp {
   constructor() {

   }
}

image
Next create your view class starter-view.ts or view elements starter-elements.ts:
image
The view class or view elements contains references to all the elements in the application you want to reference or interact with via code.


The main difference in the two options is how they are defined and how they are imported later.
starter-view.ts:

export class StarterView {
   tokenInput = document.getElementById("dialog") as HTMLDialogElement;
   openButton = document.getElementById("openButton") as HTMLElement;
}

starter-elements.ts:

export var dialog = document.querySelector("#dialog");
export var uploadButton = document.querySelector("#openButton");

Next we create our base class where we store functions that we will reuse in our application class:

export class BaseClass {
   showClass: string = "display";
   hideClass: string = "noDisplay";
   requestsInProgress: number = 0;

   constructor() {

   }

   bindProperties(mainClass) {
      var properties = Object.getOwnPropertyNames(mainClass.prototype);
      for (var key in properties) {
         var property = properties[key]
         if (property!=="constructor") {
            this[property] = this[property].bind(this);
         }
      }
   }
}

Now in our main class we extend the base class:

import { BaseClass } from "./base-class";

class StarterApp extends BaseClass {
   constructor() {
      super()
   }
}

Next we import the views:

export var view: StarterView = new StarterView ();

The repository for this project is here.

End of part I