Learn Adobe XD

Learn Adobe XD

Some Resources for learning Adobe Experience Design CC (Beta).
Visit the Adobe XD Learning Centre to view the following tutorial concepts.

Create designs for web and mobile apps on Mac OS

Design and prototype apps on Windows 10

Create and share interactive prototypes on Mac OS

Preview your designs and prototypes on actual devices

Check out the online user manual for your product

Experience Design CC (Beta) v. 0.6.20 Released

Experience Design CC (Beta) v. 0.6.20 Released

Zoom tool on Windows 10

Zoom in on a specific area of your artboard by selecting the zoom tool from the toolbar or using a keyboard shortcut.  

Photoshop and Illustrator integration on Windows 10

Copy and paste your Adobe Photoshop CC and Illustrator CC assets directly into Adobe XD.

Pixel-perfect layouts on Windows 10

Align items in your layouts to the nearest whole integer with the Align to Pixel Grid command in the context menu.

Improved onboarding on Windows 10

Get up and running faster with a new XD for Windows start experience that makes it easy to create new documents pre-sized for different devices, open recent documents, and access built-in tutorials.

Share Online for enterprise on Windows 10

Enterprises can now share a link to their XD prototypes using the Share Online service.

Resolve comments

Close the loop on comments without deleting them by marking them as “resolved.” Prototype owners can un-resolve comments to bring them back to the main view.

Adobe Edge Animate 3.0 Available

Adobe Edge Animate 3.0 Available

Adobe Edge Animate 3.0 Overview

The following overview is certainly not complete, so be sure to check out the following official Edge Animate related resource links.


Script Loading

This addition to the Library Panel allows you to integrate remote (CDN) and local scripts into your compositions, loading them at run time into the composition in the preloader. Local scripts are stored in a js/ directory unless included from within the composition directory. Scripts can now be transferred with a composition during Save As and be published into OAM and iBooks packages.

This feature only supports local and remote .js files. If the script you utilizes an associate .css file, then resort to adding the css file as I have captured below. Unfortunately the new Script library does not accommodate loading .css files.


Here are few example Content Development Network resources to refer to for your next scripted project

Responsive Scaling/Center Stage

You can set responsive scaling in the Stage properties to “width”, “height” or “both” to scale the whole composition proportionally. Aspect ratio will be maintained and is determined by the ratio of stage width to stage height. These must be in pixels.

  • Selecting “width” resizes the composition only when the width of the document window changes.
  • Selecting “height” will scale the composition with height of document.
  • Setting Responsive Scaling “both” resizes the composition in both directions.

Scaling is determined by the size of the Stage’s parent. So if you place the stage into a static page, the stage parent’s height and width must also be set.

Placing these compositions into static files gets easier now: the composition fits into the document flow.

Note: Preloader stage also flows with your proportionate option.

Center Stage

Center Stage comes with three options: Horizontal, Vertical and Both.

When selected the preloader will be centered as well.


Audio Support

Edge Animate introduces support for HTML5 audio using the native audio property. With audio you can control audio playback in your compositions and bind audio to touch and mouse events, or with triggers on the timeline.

  • New audio lesson in the Welcome screen or the Wndow > Lessons menu panel;
  • Audio Management control via the Library Panel;
  • Preload Audio option from the Stage;
    Note: Preloading audio is not available on iOS and some Android devices; for widest browser support .mps and .ogg formats.
  • Intuitive Audio Property Controls for the active/selected audio element;
    Note: Default audio control visibility is ‘off’; set to ‘on’ to see the onscreen audio control bar. Volume control allows for keyframing – ideal for intro, exit or cross-fading.
  • Audio Muting Timeline icon and command option: mute audio during playback when it is set to autoplay;
  • New audio Code Snippets to the Actions popup and Code editor;


Supported audio formats include

  • ACC (.m4a, .acc)
  • MP3 (.mps)
  • Wav (.wav)
  • Ogg (.ogg, .oga)

Add any of the above audio format types via

  • File > Import menu command option;
  • Drag and Drop from the file system;
  • Library Panel > Audio (+) subsection;

Note: audio files, like other Edge Animate asset and Elements, adhere to strict naming convention- in other words, avoid special characters, spaces and numeral file names to avoid element ID conflicts.

Motion Path Improvements

Scale and rotate a motion path for easier editing with the following commands:

  • Hover + Alt/Option: Rotate the motion path based on the transform origin of the element;
  • Hover + Cmd/Ctrl + Option: Scale the motion path based on the transform origin of the path;
  • New tooltip overlays when mouse over any given path;


Other 3.0 Improvements

Enhancement to Distribute Command

Two new menu items have been added to the Modify > Distribute menu, “Horizontal Space” and “Vertical Space”. These commands will evenly space objects of different sizes vertically or horizontally.

Publishing improvements for OAM

The Publish Settings for the Animate Deployment Package (.oam) include two new options:

Transparent poster: Poster image for OAM files now respect transparency making it easier to layout the published OAM file with other content in apps like Muse or InDesign.

CDN Runtime: Reduce the size and load time of your .oam file by loading the runtime from an Adobe hosted CDN.

jQuery Updated to 2.0.3: Animate is now shipping with jQuery 2.0.3 (previously we were using 1.7).

MacOS X 10.6 Support: Issues around 10.6 support and this build is now compatible with MacOS X 10.6.

Best of Edge Animate Workflow Samples

Best of Edge Animate Workflow Samples

The following is a compilation of the best Edge Animate workflow examples.

Adobe Edge Animate Portal

The first stop before venturing into Edge Animate is to visit the official portal website by Adobe aptly named Adobe and HTML. Edge Animate is one of many Edge Tools and Services that compliment the Web Platform.


Edge Animate Samples | Edge Animate API | Edge Animate Help Docs

For a comprehensive walkthrough about Adobe Edge Animate follow through with Paul Trani in the Learn Edge Animate, Adobe TV video series.

Edge Animate Integration with Adobe Dreamweaver, Adobe Muse, Adobe InDesign

Edge Animate leverages its workflow management with other applications by packaging its output files to .oam. You then ‘import’, ‘place’ or ‘insert’ the .oam package and the host application handles the rest. Consult the following host application workflows that best suit your needs.

Import Edge Animate Composition into Dreamweaver


Import Edge Animate Composition into Adobe Muse


Import Edge Animate Composition into Adobe InDesign

DPS Integration

A Step-by-step guide to create an Interactive eBook


Edge Animate to Edge Reflow


Fireworks to Edge Animate


Export Flash Symbols as Sprite Sheet to Edge Symbols: Part 1 | Part 2 | Part 3

Working with Edge Animate Compositions

There is no ‘paging’ system inside Edge Animate but there is a workflow where you can bind individual compositions into a single html wrapper.


An alternative approach is to use the Edge Commons ‘Composition Loader’. It is pretty straightforward and the following video demonstrations makes it look easy to set up.


Working with Video/Audio


Adding youtube video using an iFrame


Adding Video using the Edge Hero ‘class’ reference


Add Audio using Buzz.js

Scale to Fit Compositions

Learn how to make your Edge compositions adjust to the screen and a variety of devices.


Scale to Fit Compositions, by Sarah Hunt, Adobe Edge Product Manager


Creating Flexible Layouts, Paul Trani

Edge Animate with Drupal & WordPress


Edge Animate with Drupal, by Timm Jansen


Add Edge Animate to a WordPress Installation with the Edge Suite Plugin



Create 360 View


Enabling Gestures in Edge Animate Compositions


Interactivity with Edge Animate


How to build a web banner in Edge Animate


How to Create a Dynamic Slideshow in Edge Animate


Parallax Scrolling Made Easy with Edge Commons Library


Constructing a Dynamic Slideshow with Timeline Triggers


Binding Clicks to Dynamic Symbols


3D Cubes, Leap Motion, Edge Animate and Greensock


Using Symbols and JSON data in Adobe Edge (an older reference but the context is still relevant to the latest Edge Animate version)


Creating Variables and Conditional Statements in Edge Animate


Loading XML via AJAX into Adobe Edge

Edge Hero Community Portal

Edge Hero Community Portal


The Edge Hero community portal has released version 2 of its extension library. Its aim is to simplify and improve the workflow while working with Adobe Edge Animate by eliminating the grunt work when dealing with code. Edge Hero operates by simply adding the appropriate ‘class’ selector to the Edge Animate element.

Edge Hero offers solutions for these common Edge Animate workflow scenarios:

  • element centering;
  • forms/inputs;
  • html5 video;
  • menus;
  • canvas;
  • youtube/vimeo embedding;
  • 3D rotate including 3dcubes;
  • and much more…

Visit Edge Hero for a complete list of API class options | Edge Hero Website | Edge Hero Tutorials

Edge Animate Adds Support for Edge Web Fonts

Edge Animate Adds Support for Edge Web Fonts

Edge Animate 1.01 is now available for download, containing several bug fixes and performance improvements. This download is recommended for all users.

This update includes:

  • Added support for Edge Web Fonts
  • Performance improvements on published content
  • iOS 6 fix for multiple compositions embedded via iFrame and Adobe DPS
  • Various fixes to improve application stability

For update instructions and release notes, please visit http://helpx.adobe.com/edge-animate/release-note/release-notes-edge-animate.html.


To Add An Edge Web Font Reference to a Project

  1. Open an existing project file (File > Open: .an or .html) or Create (File > New).
  2. Open your preferred web browser and visit the following Edge Web Font resource library: http://html.adobe.com/edge/webfonts/
  3. The follow the below A, B, C routine detailed below.

Edge Web Fonts



Adobe Edge Animate reaches version 1.0

Adobe Edge Animate reaches version 1.0

Adobe Edge Animate 1.0 Overview

It’s been seven glorious public previews over the past year or so and Adobe Edge Animate has reached version 1 status.
The following overview is certainly not complete, so be sure to check out the following official Edge Animate related resource links.

Welcome Screen

From the welcome screen we have instant access to:

  1. project commands: Open File for previously saved projects or Create New to start a new project;
  2. recently saved project files from the Recent Files list;
  3. resource tab options with In-App Lessons (Getting Started), notable core features (Key Features), and resource references (Resources);
  4. social media connection through Facebook and/or Twitter;

Welcome Screen

Official Branding Color, Icon and File Extension(s)

The official branding and color scheme is now graced with a purple overtone.
The file extensions are also finalized as followed:

  • Project files now have the extension of .an;
  • Symbol export files is now .ansym;
  • Animate Deployment Package files (via File > Publish Settings) is .oam;


Edge Animate: Toolset & Workspace Overview

Adobe Edge Animate strength is it’s ability to create engaging experiences through precise authoring tools and a representation on a visual timeline. Interact with elements (1-3) or create elements using the native toolset (4-7) and the end user need to worry about the fine details of HTML5 or CSS.


The following capture shows the general gist of the Edge Animate workspace: use the Toolbar tools to interact with Stage Elements, and create transitions by tracking element Property value changes over time (captured via Keyframes) in the Timeline. Additional image or .svg assets can be imported (File > Import), web font libraries or symbol instances can be housed in the Library Panel.


To adjust the workspace panel positions click and drag the active Panel handler icon to the left of the Panel title (or the entire tab itself); then drop it into one of the Panel ‘Frame’ zones on the target panel. I have them labeled as Above, Below, Left, Right and Tab. The target panel zone will highlight a shade of purple and at that point you can release the mouse to commit the reposition.

panel reposition

When you have the Panels repositioned to your liking go to the Window > New Workspace menu command to save it as a custom workspace.

Edge Animate: Localization

In addition to English, Edge is now available in German, Spanish, French, Italian, and Japanese. To switch the language, select the ‘Help > Change Language’ menu command.


Edge Animate: Publish to Web, Deployment Package and Adobe DPS iBooks

Adobe Edge Animate offers three publishing options via the File > Publishing menu command.

  1. Publish to Web: Render final project for the web at the designated target directory and upload (ftp) to your web host to view.Additional web publish options allows you to target older versions of Internet Explorer by enabling the ‘google chrome frame’. Streamline the loading of frameworks by via CDN. Publish content as static HTML and HTML tags instead of injection via JavaScript improving SEO and compatibility for Screen Readers
  2. Publish as Deployment Package: for use in other Adobe applications such as Adobe Indesign
  3. Publish to Apple iBooks Author


Edge Animate: Stage

  • Access Stage Rulers (Ctrl/Command + R or View > Rulers menu command to toggle) and define Pixel or Percentage Guides;
  • Persistent Stage Scrollbars and an Auto Center Stage target icon command;
  • Scrub Zoom – simply scrub/drag left for zoom control. Double-click the value to manually enter a percentage into the field.
  • Relativity Marker/Pin(s) – when the Stage percentage property is used you get an adjustable ‘pin’ to preview on-stage how the design will reposition based on the value set.
  • Quickly troubleshoot event handler code or generic script errors with Code Error Hints to the lower right of the stage.


Edge Animate: Property Panel

Adobe Edge Animates’ strength is how it captures an assigned (id) element tag and its (css) property changes ‘pinned’ as keyframes on the timeline. The change in property values between those keyframes then translates into a transition or a rendered animation.

The following capture outlines some of the Property Panel context element controls. In my use case the element is an ‘img’ and displays context sensitive properties not available to other elements.

property panel

Edge Animate: Elements Panel

Adobe Edge Animate Elements Panel shows a node tree structure or representation as they appear relative to the parent symbol ‘Stage’. Elements stacked or positioned to the top have a higher z-index (stack) order and appear in front of elements with a lower stack order.

The following capture dictates the majority of the Elements Panel functionality, iconography and use case scenarios.

  • All Elements are assigned a user-defined Id and Tag and is represented with an associated element type icon;
  • Then stack (position) elements using Adobe Edge Animate Group, Nesting, or Symbol Instance functionality.
  • Assign global Stage Actions (compositionReady, scroll, orientationchange, resize .etc) or local Element Actions (click, mouseover, touchstart .etc) by clicking the associated actions icon and choose from the event handler list.
  • Double-click a Symbol Instance icon to enter Symbol Edit in Place Mode.
  • Toggle ‘visibility’ is for preview mode only, and is not apply at runtime.
  • Right Click/Option Click on any Element for further context sensitive commands or go to the Modify menu command for additional commands on an active element.


Edge Animate: Timeline

Adobe Edge Animate Timeline combines the element node tree structure and associated keyframe property on the left with a time-scale infographic on the right. Element property values (keyframes) are pinned at a specific times and a transition is created when that value is changed.

Also demonstrated below:

  • Custom timeline ‘Label’ and ‘Trigger’ can also dictate event conditions and handlers; Ctrl/Command + L to place a ‘Label’ at the position of the playhead. Ctrl/Command +T to place a ‘Trigger’ at the position of the playhead.
  • Filter Animated Elements to isolate only those elements that have transitions applied;
  • Enable Timeline Snapping, Grid and associated Grid Size for user-defined control;
  • Right Click/ Control Click anywhere on the Timeline or directly on a color-coded transition bar for additional context sensitive commands (also available from the Timeline menu command).


Edge Animate: Mobile-ready Content with Responsive Layouts, Restraints & Presets

For a complete overview and example use case go through the ‘Resize’ In-App Lesson on the main splash-screen.

  • Combine Stage level Percentages (optional Constraints) with a mixture of Context Position and Size properties (optional Constraints) to achieve responsive Layouts.
  • Resort to Layout Defaults for new Elements and Imported Graphics or select from a Layout Preset for an active element or image.

Edge Animate: Code Management

Access a more complete view of all the actions and Timeline triggers in a single Code window. Simply go to the Window > Code (Ctrl/Command + E) menu command. Then highlight the action or trigger to the left to view or edit.

  • Click the + icon to add global, local or timeline actions or triggers;
  • Click the Full Code button command to view and edit all actions in a single file;
  • Troubleshoot errors in code with in-panel code error hints;

code management


Adobe Edge Animate Box Shadow Effects

Adobe Edge Animate Box Shadow Effects


Adobe Edge Animate adds a new feature set when working with text, image and shape (Rectangle, Rounded Rectangle, Ellipse) elements.

As captured below, top, a single Rounded Rectangle element, with a 100% Color Fill and a Box Shadow set to Inset creates a neat ‘pillow’ effect.

As captured below, bottom, I created multiple (same dimension: width/height) Rounded Rectangle elements. Then isolated the effect starting with a base shape with a Solid Color Fill of 100%; followed by a variation of Box Shadow ‘Inset’ (solid fill Color set to 0%) versions. The effect resembles a gradient style you commonly see in graphics programs like Photoshop, Illustrator or Firreworks.

Adobe Edge Animate Box Shadow

Here is an elabrate take on the above mult-shape Box Shadow ‘Inset’ – a combination of shape elements with varying Inset properties to create a realistic dial button – all image free.

Preview Box Shadow Effects or click the below image capture to preview the below output animation.

Adobe Edge Animate Box Shadow Inset 

Download sample file below.

Animate Box Shadow Effects

Create details to elements with multiple box-shadow ‘inset’ effects.

Adobe Edge Animate Simple Scrollbar Symbols

Adobe Edge Animate Simple Scrollbar Symbols


The following sample and download demonstrates a simple (custom) use case vertical and horizontal scroll bar.

As captured below, the process uses a simple workflow: nest a text element (child) into a content div (parent) and set the parent div ‘overflow’ property to ‘hidden’. This essentially prevents text longer than the height and width of the parent from showing.

[message type=”info”]See Tip on Nesting Text Elements[/message]

Normally an overflow property of ‘auto’ is used to compensate with standard scrollbars, but in this case we don’t have that option and have to create custom scroll features with additional event triggers.

In this case it wll be a simple scrollbar – just the (Vertical Scroll) up/down buttons; (Horizontal) left/right buttons. An image or, in my case, a rectangle element, will suffice.

To make them scroll the contents of the parent container I will use the jquery (Vertical Sample) scrollTop and (Horizontal Sample) scrollLeft methods on a ‘click’ event handler.

An Example:

The Vertical scrollbar up button, has the following click event handler:

sym.$("content").animate({ scrollTop: "-=45" }, 500);

Download (bottom of page) the sample symbol files and review the click event handlers for the remaining buttons.

Preview ScrollBar Symbols or click the following screen-capture to preview.

Adobe Edge Animate Scroll Symbols

Download the zipped Symbol files (bottom of this page); unzip; then in your Edge project file go to the Library Panel and click the + icon command to the right of the Symbols then from the context list choose ‘Import Symbols…’.

At the prompt, navigate to the unzipped location and select both the .eglib files then click Open to commit the import process. As captured below, right, you should have two new symbols called myHorizontalScroll and my VerticalScroll. Drag and drop onto the Stage of your project file to use.

Adobe Edge Animate Import Symbols

ScrollBar Symbols

Two sample symbols (horizontal and vertical scrollbars) to import into an existing Edge Animate project.

Adobe Edge Animate with Responsive Layouts

Adobe Edge Animate with Responsive Layouts

Adobe Edge Animate Preview 7 Feature Overview:

Responsive Layouts, Restraints & Presets

  • Combine Stage level Percentages (optional Constraints) with a mixture of Context Position and Size properties (optional Constraints) to achieve responsive Layouts.
  • Resort to Layout Defaults for new Elements and Imported Graphics or select from a Layout Preset for an active element or image.


New Ellipse Tool (O), Layout Defaults & Text Tool (T) Improvements

  • New Ellipse Tool (O) – instead of manually configuring the Rounded Rectangle Tool (Corner properties) simply resort to the this tool: activate and Click and Drag to create Ellipse; Shift + Click and Drag for a perfect circle;
  • New Layout Defaults – set relative Position (Top: Left or Right; Bottom Left or Right) and Size (Pixels/Percentage); Use ‘img’ tags for images instead of the default ‘div’; set image width and height to Auto;
  • Text Tool (T) Improvements – now allows for multiline paragraphs.

New Ellipse Tool (O) & Layout Defaults

Timeline Improvements

  • Renamed Timeline Modes: Auto Keyframe Mode (A), Auto Transition Mode (U); Toggle Pin and Easing.
  • Snap to Grid Display Toggle & Options;
  • Create Transitions from Keyframe(s): Select a keyframe in a chain, right-click and choose Create Transition and it will be applied between them. This option is only applicable when the next keyframe captures a change in value.

Timeline Improvements

Stage Improvements

  • New Rulers – Ctrl/Command + R or View > Rulers menu command to toggle;
  • New Guide(s) – drag from the horizontal or vertical Ruler to region an area or easier placement and alignment of elements by employing the Snap to Guides option.
  • Persistent Stage Scrollbars;
  • Center the Stage Option: regardless of where your stage exists along the x, y simply click this option to snap the stage to the center.
  • Scrub Zoom – simply scrub/drag left for zoom control. Double-click the value to manually entera percentage into the field.
  • Relativity Preview Pin/Marker(s) – when the Stage percentage property is used you get an adjustable ‘pin’ to preview on-stage how the design will reposition based on the value set.

Stage Improvements

Property Panel Improvements

  • Restructured and streamlined properties in order of functionality; also when an element is active on the Stage then only its existing property attributes group is active.
  • Toggle Property Groups functionality;
  • User-defined element Class;
  • New Unit Switch– Pixel and Percentage units;
  • New Element ‘Relativity’ Position properties: Top: Left; Top: Right; Bottom: Left and Bottom: Right. Manually set an elements position relative to the Stage (Global) or relative to the Parent Element (Local), or choose from the two available Position Presets from the preset picker icon.

Property Panel Improvements

  • New Box Shadow Properties: applicable to an element, image, text or symbol;
  • New Accessibility Property;
  • New Image property options – Alt description and isolated X,Y and W, H parameters;

Property Panel Improvements

Element Panel Improvements

  • Element Group/Ungroup Functionality – select multiple elements, Right-Click and choose Group Elements in Div;
  • Element Panel now has each element represented with an associated icon;
  • Double-click directly onto a Symbol element in the Elements Panel takes you directly into ‘Edit in Place Mode’.

Element Panel Improvements

Other Notable Improvements

  • Revised Code Panel with basic Error ‘trappings’;

Revised Code Panel

  • New jQuery Events : mouseenter, mouseleave, focus;
  • New Stage Event triggers: orientationchange, resize, onError;
  • One click access to Full Code ‘script’ file within the Code Editor;