Create interactive prototypes in Adobe XD CC.

A prototype is the first glimpse and test of a product’s usability. Designers need prototypes to communicate their ideas, product goals and user experiences to the team, stakeholders and potential users — and it’s especially helpful for those who don’t come from a design background. Whether for an app, website or product, a prototype brings the experience to life and is the best tool for showing instead of telling. And with usability testing, prototypes help reveal a design’s strengths and weaknesses.
 
 

Create Consistent Experiences with Creative Cloud Libraries

Adobe XD lets you create dynamic, interactive prototypes of designs you would otherwise do statically, with a simple function switch right inside the app. By adding animations to create transitions, you can simulate the flow of your website or app and give it movement and then share an interactive preview in real time with teammates and stakeholders for testing your design.


XD provides two modes for your work: Design and Prototype. In Design mode, you use XD’s tools and features to create elements and add artboards. You then switch to Prototype mode to draw interactive links between artboards. And finally, you can preview the prototype by sharing it with your team. 


Check out our Prototype creation steps below and try it out for yourself.

  • 1. Create your app or website on artboards.

  • 1. Create your app or website on artboards.

    First, you’ll need some artboards. To create a new artboard in a new document, select File from the main menu, then New. A dialogue box of different-sised device screen options for artboards will appear. Click one and XD will open a new document with a blank artboard of that size.

  • To add a new artboard inside the document, hold down the Option/Alt key, click an existing artboard and drag a copy to a new location. You can also copy and paste an artboard using Command/Ctrl-C and Command/Ctrl-V. Alternatively, right-click the artboard name in the Layers panel, select Copy, right-click again and select Paste. To resize an artboard, click the artboard and use the circular handles that appear on the edges.
  • Add new artboards by copying and pasting them next to each other
  • 2. Add interaction to your artboards.

  • 2. Add interaction to your artboards.

    Now that you’ve got a series of static artboards, you can create interactions to define how they work together.

    First, make sure you’re in Prototype mode. Click Prototype in the top left of the app’s window.

    Click the object on the first artboard you want to link. A connecting handle with an arrow will appear on the object. When you hover your mouse over the handle, the cursor changes to a connector.

  • Click and drag your mouse to see the connector. Release your mouse on the target artboard. In the pop-up that appears, specify the transition options and the duration for the transition. When you’re done, press Esc or click outside the pop-up to dismiss it.
     
    Repeat the steps above to link all the interactive elements in your project until the interaction most closely represents the way you expect your app or site to work.
     
    To view the connections to or from a particular artboard, select the artboard title. To delete an interaction, drag the connector’s destination handle off of a target artboard onto the pasteboard.
  • Release mouse on the target artboard.
  • 3. Sharing and previewing your prototype.

  • 3. Sharing and previewing your prototype.

    Share your designs and prototypes by sending a link or embedding a link in a web page. If you are on a Mac, you can also record a walkthrough as a .mov file and you can enable comments if you want feedback from your teammates or stakeholders.

    To create a link to your prototype for sharing, open the XD file you want to share. Click File and Share Online or click the Share Online icon in the upper-right corner of the app window. You can give your prototype a title, add a 120 x 120-pixel image to display on web or mobile and enable or disable comments if you wish. Then click New Link to get an URL or embed code for web pages. You can then email the URL to your stakeholders or embed it in a web page.

    If you make changes to your design and want to refresh that URL, click Update Link instead of New Link.

  • To record an animated preview of your prototype on a Mac and save the recording, click the Desktop Preview icon in the upper-right corner of the app window to open the Preview window. Then click the interactive elements to test the navigation between screens. When you’re ready to record the interactive prototype, click Record in the preview window. To end recording, press Esc or click Record again. Choose where you want to save the recording, which will appear as an .mp4 file.
     
    You can edit the design and interactions in your prototype while in the
    Preview window. The changes are available instantly.
  • XDs Preview window during recording
Prototypes are critical in ironing out bumps and identifying needs, next steps and most importantly, what the user wants and why. Plus, they’re highly effective at showing both the vision and the user experience. And with XD allowing for quick and smooth creation, it’s also a cost-effective way to test as many variations as you need.
Learn more.
Find out how you can preview your designs and prototypes in real time on actual devices.

Now, try creating an interactive prototype for yourself. Set up a couple of simple artboards and a single animation — or, if you’d like, you can add more than one animation per artboard. Switch over to Prototype mode to take your user back and forth between the artboards and learn how it’s done. Add some more objects to interact with and then add a third artboard. Before you know it, your prototype will be ready to share, preview and advance to the next stage.
Get the most out of Creative Cloud with our How-to guides.
Learn how artboards in Adobe XD make it easier to design for different-sised screens ›
Ensure brand consistency across projects, devices and apps with Creative Cloud Libraries ›
See how easy it is to build wireframes and showcase your project with Adobe XD.