Home How to Make a Prototype in Adobe XD CC | Adobe Creative...

How to Make a Prototype in Adobe XD CC | Adobe Creative Cloud

Learn how to design a simple, yet elegant mobile app layout. Then, wire interactions to simulate the user experience.

Start from scratch, or download practice files [https://adobe.ly/2mcm6DP] for a head start. Steps below.

Design your prototype:

1. Open an .xd document, or use ours (prototype.xd).
2. Click the gray thumbnail on the artboard, then click Repeat Grid. Drag the green handle to the right until 3 thumbnails appear.

Tip: If necessary, put the cursor between the thumbnails and drag the gutter in or out until the thumbnails are centered.

3. Open Finder on Mac, or Explorer on Windows, then drag the 3 images from the knots_details folder on to the thumbnail Repeat Grid.
4. Click the green border of the Repeat Grid and drag the 3 thumbnails below the artboard.
5. Make 2 copies of the artboard: Click the artboard name, select Edit – Duplicate. Do this twice to create 2 artboards.

Tip: you can also use Cmd+D on Mac, or Ctrl+D on Windows, to duplicate.

6. Click the gradient on the leftmost artboard, choose Edit – Copy, then Edit – Paste.
7. Click Repeat Grid and pull the green handle to create 3 copies of the rectangle. Place your cursor between images and drag until the margin is equal to the distance between artboards – in the example, the margins are 70px.
8. Drag the 3 images from the knots_full folder on to the Repeat Grid, then click the pasteboard (the gray area) to deselect the Repeat Grid.
9. Click the Repeat Grid to reselect it, right click and choose Ungroup Grid, then right click and choose Send to Back.
10. Cmd+click (on Mac), Ctrl+click on Windows, the product name, double click to highlight it and type “Mustard floor cushion”.
11. Right click the outer edge of the text box and select Update All Symbols. Double click the text in the 2nd artboard and change “Mustard” to “Royal Blue” and the 3rd artboard to “Red Wine”.

Wire your prototype:

1. Click Prototype at the top to change to the Prototype workspace.
2. Cmd+click, or Ctrl+click, on the thumbnail on the left, drag the little white arrow to the first artboard, and set the Transition to None. Repeat to connect the blue and red thumbnails to the corresponding artboards.
Tip: The Transition, Easing, and Duration default to the previous settings so you don’t have to change these each time.
3. Click the set of 3 thumbnails, select Edit – Cut.
4. Click the 1st artboard title and select Edit – Paste. Repeat for the remaining 2 artboards. Shift+click all 3 thumbnails and drag to align just below the large image on the artboards.
5. Click Desktop Preview and click each thumbnail to preview the prototype.

That’s it!

To learn, more visit our Adobe XD CC Tutorials page: https://adobe.ly/2Athprt

Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1

LET’S CONNECT
Facebook: http://facebook.com/adobecreativecloud
Twitter: http://twitter.com/creativecloud
Instagram: http://www.instagram.com/adobecreativecloud/

Adobe Creative Cloud gives you the world’s best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Comments

comments

Latest articles

Easy Ways to Select Artwork in Illustrator | Adobe Creative Cloud

Explore a variety of methods for making selections in your projects to make creating and editing faster and easier in Adobe Illustrator. To download the sample files and learn more about Artwork selection methods, click on https://adobe.ly/2AXMTv1 Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1 LET’S CONNECT Facebook: http://facebook.com/adobecreativecloud Twitter: http://twitter.com/creativecloud Instagram: http://www.instagram.com/adobecreativecloud/ Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Transform Artwork Freely in Illustrator Using Puppet Warp | Adobe Creative Cloud

Learn how to transform artwork using the Puppet Warp and Free Transform tools in Adobe Illustrator. To download the sample files and explore more tutorials on Artwork selection in Illustrator, go to https://adobe.ly/2vul87Y Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1 LET’S CONNECT Facebook: http://facebook.com/adobecreativecloud Twitter: http://twitter.com/creativecloud Instagram: http://www.instagram.com/adobecreativecloud/ Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

How to Make a Custom Brush with Adobe Capture CC | Adobe Creative Cloud

Create a brush from a simple sketch. Start from scratch, or download practice files [https://learndownload.adobe.com/pub/learn/mobile-apps/make-a-custom-brush.zip] for a head start. Steps below. Prep your project: 1. Save the practice image (source-image.jpg) provided here to the Camera Roll on your mobile device, or use your own. 2. Download the Adobe Capture CC mobile app from the App Store for your iOS device, or from the Play Store for you Android. Open the app and sign in with your Adobe ID. 3. Tap Brushes from the top menu. Create a custom brush: 1. Tap Brushes from the menu. 2. Tap the image icon at the bottom, then tap Camera Roll. 3. Choose an image from your Camera Roll. 4. Tap areas to erase unwanted marks. Tap the checkmark. 5. Drag the resize handles (white dots) to position the blue box around the part of the image you want to use as the brush. 6. Tap Styles from the main menu. Tip: For the example in the video, we chose a style in the Photoshop CC & Adobe Sketch Brushes section. 7. Tap Presets. Adjust the Size, Spacing, and other settings as you like. Tap Done, or the right arrow on Android devices. 8. Choose the appropriate Creative Cloud Library. Tap Save. Apply style in Adobe Photoshop CC: 1. Open artwork in Photoshop. 2. Choose the Brush tool. 3. Choose your new brush from the Libraries panel (Window – Libraries). 4. Use the new brush to enhance your creation. That's it! To learn more about Adobe Capture and Adobe's other mobile apps, visit our Mobile apps Tutorials page. Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1 LET’S CONNECT Facebook: http://facebook.com/adobecreativecloud Twitter: http://twitter.com/creativecloud Instagram: http://www.instagram.com/adobecreativecloud/ Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Bring Dull Photos to Life Using Lightroom CC | Adobe Creative Cloud

Learn how to enhance sharpness, detail, and textures using Clarity and Dehaze sliders in Lightroom CC. Download sample files and learn more about image editing techniques in Lightroom: https://adobe.ly/2wbDUS0 Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1 LET’S CONNECT Facebook: http://facebook.com/adobecreativecloud Twitter: http://twitter.com/creativecloud Instagram: http://www.instagram.com/adobecreativecloud/ Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Comments

comments