The three handy tutorials will help you get to grips with Adobe Experience Design.
As the demand for UX design professionals continues to grow, designers are looking for easy-to-use tools that are powerful enough to create high quality prototypes, but that feel familiar to the tools they already use every day.
Adobe XD (Preview) does just that, allowing users to easily create, edit and socialise prototypes for mobile designs, all within one program. New features are being worked on all the time, but, for now, these quick tutorials will help you get started with prototyping in Adobe XD.
01. Create a prototype from a wireframe
Creating prototypes is easy with Adobe XD
To create a prototype from a wireframe, follow these simple steps:
Click prototype at the top or command tab
Click command a to show interactions, then click preview to connect prototype
Click through to the screens of prototype to see overall navigation and transition affects
02. Creating interactions
To create an interaction from one screen to another select an object and drag the blue arrow to the art board you want to link to
The first thing you'll see is a blue home button icon in the top left of the screen, which indicates the home screen. You can change that by clicking a different title and then clicking on the grey home icon attached to the screen you want to be your new home screen.
To create an interaction from one screen to another select an object and drag the blue arrow to the art board you want to link to. You can remove an interaction by clicking on the blue arrow and dragging it to a empty space. When you create an interaction the dialogue box automatically gives you options on define the segue, easing and duration type. Command click can easily do this from a prototype.
Press command enter for a preview. Without closing the preview window you can edit by clicking on the blue arrow for the interaction and change from there
03. Sharing prototypes
Publish to share online by simply clicking share online in the upper right corner of the screen
With the preview window still open, tap record and click through the interactions on your prototype. Once you’re done hit record again and save the movie file to your desktop. When colleagues view the movie file there are visual markings to indicate the hotspots where you clicked when recording.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
You can also publish to share online by simply clicking share online in the upper right corner of the screen, type in a title in the space provided and drag an image from finder into the space provided to create a preview panel and then create a link. Adobe XD automatically creates a sharable link that can be viewed in any web browser. Markers automatically indicate the hot spots if the reviewe does not click in a defined period of time.
You can also review on a mobile device by pasting the same link into your mobile browser. The visiual indicators do not appear when testing on a mobile device to give a more realistic experience.
If you save the URL on your home screen the icon will automatically appear as the thumbnail preview image you selected earlier
You can make any necessary changes in Adobe XD. To share revised versions simply click share again. You will be given the option to update the original link, or to create a new link. To manage links. Click manage links through your Creative Cloud assets account. All protypes are saved online in your protype section for easy management.
