How to Create Adobe XD Interactive Prototypes
Adobe XD interactive prototypes are essentially dynamic designs created by using page state interlinking with transitions and other effects. A basic UI/UX design will typically have several pages to represent different pages on the final application or website. It will also have multiple page states to show how an asset or object behaves when the user interacts with it. By creating these pages and then linking them with specific parameters, you can create an Adobe XD interactive prototype for other stakeholders to preview and to handoff to the developer. This will allow them to have a ‘touch and feel’ impression of what the application or website will ultimately look like because it will essentially be an Adobe XD clickable prototype.
- Part 1: How to Create Interactive Prototype with Adobe XD
- Part 2: How to Create Interactive Prototype with Adobe XD Alternative
How to Create an Interactive Prototype with Adobe XD
The interlinking part of this process is also referred to as ‘wiring’. After designing your artboards, you can ‘wire’ them together in a sequential flow. Multiple flows can be shown by adding several wires to and from an artboard. These flows can then be shared online using a link so other stakeholders can provide feedback, etc. They can also be used to publish the prototype to multiple devices at the same time. Let’s look at the prototyping process in more detail:
- Once your design is ready, keep it open in Adobe XD and go to Prototype mode.
- Choose one screen/artboard as your Home page and click on it, then click the house icon on the top left. The artboard will change color (blue), indicating that your Home page has been selected.
- Click an object in the Home page and then click another object on a different artboard to link from one to the other. This Adobe XD drag and drop interaction allows you to quickly wire the entire design.
- The next step is to add actions and transitions. This will make your links interactive when you and others preview it. To do this, after linking, go to the Interaction tab on the right; now, select a trigger, an action type or transition, and an animation. The destination will already be set based on which page you linked the object to. You can also choose time parameters for these attributes.
- You can now preview your prototype by clicking the Desktop preview option. The Adobe XD export interactive prototype step will be the final stage before it goes to the developer.
Note: Multiple flows can be created with a unique name for each flow. This can be used to represent different flows on different devices or different types of flow for the same design.
Would you interested in creating Adobe XD to GIF format? Click and learn more about How to Create Adobe XD to GIF Format.
How to Create an Interactive Prototype with Adobe XD Alternative
Although Adobe XD is a robust tool when it comes to hi-fi prototyping, it has a lot of drawbacks. For example, there’s no native option to export your design as HTML, and no style code is generated for different platforms. Also, the transitions are quite basic and the user interface can get a little confusing because keyboard shortcuts aren’t the same as Photoshop and other Creative Cloud apps, which means there’s a learning curve involved.
To avoid all the pain, consider using a versatile tool like Wondershare Mockitt.
This online utility is hosted on the cloud, which allows a greater level of collaboration between the designer and other stakeholders. Before we get into how to prototype like a pro using Wondershare Mockitt, here are some additional features from its wide selection of functionalities.
- Preset, uploadable, and customizable asset libraries give you ready assets and the freedom to import your own or customize existing ones. Even share libraries within team members so everyone can work faster.
- Dynamic widgets can be given multiple states within a single artboard or screen.
- Extensive gestures, transitions, and animation effects to make your prototypes really pop.
- Convenient commenting and other collaboration tools for feedback, sharing, and co-editing.
- Design assets have their backend code auto-generated so the developers have all the HTML and style code for assets that they need for a smooth handoff.
- Tons of other features make this a highly functional design and prototyping utility for small and large design teams alike.
How to Create an Interactive Prototype with Wondershare Mockitt
The steps to create the design are very straightforward, so let’s go through them quickly.
- Once you’re logged into your online Wondershare Mockitt account, create a new project and define the target device.
- When you see the first screen, start adding assets to create the layout. New page states can be added from the State section on the upper right side.
- After creating your design screens with their respective layouts, you can begin the prototyping process. You can also find help in the user guide.
The prototyping portion involves creating links between page states and then editing the links to add gesture or action triggers for transitions and animation effects. Follow the steps shown below:
- Click the link icon to the left of a particular asset and drag it to the list of pages on the left panel. Drop it there to create the link.
- Once a link is created, use the New Link panel on the right to add gestures, transition, and animation to the interaction.
- Continue doing this for all interactive objects, starting from your Home screen.
- As you create the links to show the relationship between different screens, you can also use the Sticky widget to make notes on your design. This helps other stakeholders better understand the process and the logic flow.
- Once the interactive prototype is created, it can be previewed for various devices and downloaded in several formats, including HTML, PNG, and Android APK. It can also be shared with the developer, who will then log in and can inspect the code and download the full HTML and style code and documentation for all assets.
