Adobe XD CC

free design & prototype tool

Introduction

Adobe XD

"Adobe XD
is the all-in-one UX/UI solution for
designing websites, mobile apps, and more.
Design, prototype, share.
All in XD."

So XD is a prototyping tool!

XD is not…

  • a layout and page design software for print (only RGB)
  • an HTML editor or a webpage/website builder (no code)
  • a Powerpoint or Keynote replacement tool

Benefits of XD?

  • ​Free software! PC/MAC
  • All in one ‘Design-Prototype-Share tool
  • Seamless integration with other Adobe tools
  • It’s vector based technology (SVG) is fast
  • Constant in development
  • sharing & collaborative editing, perfect for teams

Official download & productpage

Interface

Artboards

use artboard tool to
organize your pages & designs

guides & grids

using gridsystems in XD
can help your layout decisions

layers & groups

dynamic layers panel > changes depending on selection or group…

Using Assets

store elements for future use
& keep everything in sync

Creative cloud library

  • ​A cloud-based Adobe service which syncs assets across almost all adobe applications
  • The main reason for this to use, is consistency in your design process and speed
  • Stores all kinds of assets: colors, font styles, images, vector drawings, etc…

VECTORS & PIXELS in XD

SVG?

Scalable Vector Graphics
an XML based internet standard
for static & dynamic vector graphics

Using plugins

An extensible platform
that grows with your needs

Clear workflow​

1.Design | 2.Prototype | 3.Share

1. Design

in XD

  • Vector based drawing tools (Bézier curves)
  • Basic ‘Illustrator minded’ vector tools (path, shapes, stroke, fill…)
  • Basic Text tools
  • Scaleable > perfect for modern screen designs
  • Can work with images, masks & transparency
  • Integration with other Adobe tools
  • Use special design grids

vectors

Working with vectors in XD

Typography

only basic type tools

Images

  • Support for major formats > PSD, AI, JPG, GIF, PNG, SVG
  • NOT supported for now > animated GIF, video :(

Transparency

& Blend modes

components
& states

Create hover effects, micro-interactions, and more…

repeat grids

A tool unique to XD and
a big time saver!

Responsive resize

Design for every screen
(mobile-tablet-desktop)

2. Prototype

adding basic interaction & animations to your artboards

preview

preview your working project
live on your mobile device

share

​sharing you XD designs can be done with a URL.
You have different kinds of sharing…

Collaboration

working together on a document
with live coediting functions

Export

  • ​Adobe XD designs can be exported to
    images & After effects
  • You can use the capture function to
    create a video of your XD documents

resources

introduction

instagram stories

Instagram
story?

is a feature within the Instagram app where users can capture and post related images and video content in a vertical slideshow format with an interval of 15 seconds… during 24 hours

Can I create
Instagram stories in XD?

Yes

​use XD to design, prototype & export your images for your story only with static content…

NO

Need motion? which means video, then you need to create this in other tools like Adobe after effects or photoshop…

guidelines

Instagram story

  • best format 1080 x 1920 pixels
    Full HD (or aspect ratio of 9:16)
  • every page changes after 15 seconds
  • static file formats for images are .jpg and .png
  • video format .mp4 or .mov (max 15 sec)
  • every story can be max 4GB in size
    and will stay online for 24 hours

Challenge

Create a personal instagram story.

  • use XD as your design & storytelling tool
  • search for an interesting story, create custom images
  • try to add one video
  • post online on an a (fake) instagram account

Possible workflow in XD

  1. ​brainstorm and think about an interesting theme… like ‘dream’, plants
  2. create your story. Starting with only words could help.
  3. look for images and try to add them to your artboards (check the plugins!)
  4. try to design some pages > moodboards, add colors, image styles, fonts
  5. create your final artwork
  6. export as PNG & JPG
  7. upload your images to your instagram story

Get inspired!

Interesting tools for images & video

Thank You