Adobe Workshop - XD and Dreamweaver 29th April 2020 with Tim Kitchen and Brian Chau

Inject Creativity - LIVE!

Sharing ideas with Adobe XD

with Brian Chau

Brian has been with Adobe for many years - originally from Macromedia. He migrated across when Macromedia was acquired by Adobe. Brian is very keen to show us the "wonderful product that is XD"!

Pull ideas from your head into reality

Rather than demonstrating a concept with a series of still shots or concept drawings, Adobe has created a new application that incorporates Photoshop, Illustrator and Dreamweaver into a fully integrated central location through which you can demonstrate the look and feel of an application, packaging it and letting it run on a mobile device.

You don't need to know how to code or use Javascript to use Adobe XD

The mobile preview function enables you to present a proof of concept from Adobe XD with the click of a button!

See how this mirrored device shows a live demo on a physical phone, straight from XD.

People can pitch their ideas without needing to engage with a third-party developer and expend effort in expense to push your concepts through someone else's filter.

XD in Education

Students can use XD as a more creative alternative to visualise ideas - they have options to the more traditional option of creating a simple slide presentation or static poster.

XD is available through the Adobe Creative Cloud on PC and MAC.

XD on the go (iOS and Android)

Check out the App Store or Google Play to find the app for your mobile device.

Building in XD

Select your canvas size (device type) and get building! Add features and create a mind-map of the screens and interactions on the go.

The interface is simple and you can add as you work - you are not confined by early decisions in your project.

Adding content

Create by dropping images and text as you work, with simple drag and drop interactions within the program. Choose your images, font and settings as you go, on the go.

Setting text is simple in XD

Stuck for ideas?

'Wireframes' are available in XD with pre-established templates that you are free to use, browse and adapt as needed.

Add some simple template 'wireframes', and copy / paste elements to help keep your build moving.

Drag and drop from a local file on your computer is also available in XD. This means that you can determine the file library and resolution, organising your files in advance and then literally pulling them into your project.

XD is intuitive and will place the image in the frame you drag it to.

Add interactions

Select assets and choose your:

  • Trigger
  • Action
  • Destination
  • Animation

For example: 'Tell' XD that you want the 'Continue' button, when pressed, to transition the user to the Feature Page so they can scroll through the images (see below).

Design interactions without writing any code in the traditional sense.

You can even determine how the 'hamburger' menu overlays on your screen, changing the experience of the interactions with the app. Chop and change what happens and when, nailing down the user experience.

See the interactions indicated by the arrows? This visualises the decisions your have already made.

Once you have saved your project (using either a local save or the Adobe Creative Cloud), you can share your project with others, regardless of whether you are in the same physical space. The recipient doesn't need to have access to Adobe Creative Cloud, XD, or even the device that you have created the prototype template for! They just use the link to preview your work.

A simple URL is all you need to share your concept.

Once you are done, you can share your project to a programmer, so they can commence the build of your concept and make it a reality!

For students and teachers

Students do not have to build an app to submit it as an assignment. It is possible for them to share the link with their teachers, but also to save the XD file with their teacher who also has access to XD from the Adobe Creative Cloud.

Feel like a babe in the woods?

Plenty of resources are available on the Adobe Creative Cloud channel for you to access at your leisure.

Even more is available on the Adobe Education Exchange.

Adobe Distance Learning Resources

with Tim Kitchen

Khan Academy has partnered with Adobe to offer great, engaging lessons.


Other resources available are:

  • Talks and Webinars
  • Courses, Articles, and Blogs
  • Higher Ed projects
  • K-12 Projects
  • Resources to support young learners
  • Events and activities for teens and college students
  • Wellbeing resources for educators
  • Digital literacy resources


Tim uses our network of Adobe Leaders, who often wear the hats of both educators and parents, and discuss topics relevant to adults supporting students on both sides of the educational fence.

And last, but not least...

Dreamweaver, with XD and Javascript

You can share your concept created in XD and convert it to a website, and Dreamweaver can help you make that a reality.

Dreamweaver enables you to pull content from mobile to desktop format in a snap! You can code directly into the editor, but you also have a great menu system available that can help you frame your 'blanks' before you fill them in.

Dreamweaver offers predictive options based on your coding needs.

CSS Designer

Cascading Style Sheet - your CSS options are built straight into Dreamweaver. Build up your design with your options based on predetermined criteria. For example, flip your 'hamburger' into a full menu once your screen goes over a certain size by coding that requirement straight into DW.

The menu goes from a hamburger to a full menu because of a small addition to the code, triggered once the screen is wide enough.

CSS 'flex' enables you to code something that was previously difficult to actualise simply and quickly in DW

Adobe PhoneGap

Package your project (with the required developer certifications) with PhoneGap to create your App and package it in the Cloud.

Using this will require a certification - this is separate to Adobe and is for iOS or Android.
Created By
Erin Raethke


Created with images by TheDigitalArtist - "woman technology binary" • 742680 - "chalkboard story blogging" • geralt - "hands received on light" • PublicDomainPictures - "baby boy child" • Pexels - "technology computer black" • markusspiske - "code programming computer"