The Evolution of Prototyping Features (and How to Use Them) in Adobe XD
Designers today have way more options to pick from than they did two years ago. With the evolution of the design process, the market is flooded with different products that specialize in specific parts of design, prototyping, collaboration, review, versioning, and developer hand off. Designers have managed to stitch together these different tools to create a system of products that mimic the fragmented process itself. Our mission with Adobe XD is to build a platform where you no longer have to worry about learning and using many different tools in your workflow.
One of the key areas we focused on this year was prototyping. Over the last 12 months we added several new design and prototyping features that allow you to bring your ideas to life. This post covers every prototyping feature we have in Adobe XD. Whether you’re a beginner, expert, or just curious to learn how to prototype, Adobe XD has something to offer you.
Features covered below:
1. Wires 🖇
2. Preview 👁
3. Fixed Elements 📍
4. Overlays 🥞
5. Time-based Triggers ⏳
6. Auto-Animate 🔮
7. Drag gestures 👆
8. Voice-based Triggers 🗣
9. Keyboard Triggers ⌨️
10. Gamepad Triggers 🎮
11. Speech playback 📣
12. Export to After Effects CC 🔥
13. Easing and animation 🎈
Wires 🖇
Traditionally, tools require you to export your work as images and then create hotspots to link them together as a flow. With XD we simplified the process of creating a click-through prototype or flow. After you are done designing, switch over to Prototype mode and select objects to drag your wire and connect 🔗 them to another screen. ⚡️Creating a flow or click-through prototype in XD is as simple as connecting artboards with wires.
🤙 Tip — Click on the home icon (left of the artboard)to set that specific artboard as your first screen in the prototype.
▶️ Video — Creating a prototype in Adobe XD with Dansky
Preview 👁
Once you’ve wired up multiple artboards, you can preview and interact with the prototype to review the interactions and complete flow. Click on the play icon ▶️ in the top right corner to bring up the preview window. In addition to the preview window, you can also publish your prototype to the web 📤, embed it on Behance, or preview it on an iOS or Android device. 📱
🤙 Tip — You can also record ◉ a prototype as a video from the preview window. Click on the record icon and then start browsing your prototype.
Fixed Elements 📍
In order to prevent objects from moving when scrolling, XD allows you to mark them as fixed elements. In design mode, select an object and select “Fix position when scrolling”📌 in the property inspector. You can have multiple fixed elements across your artboard. XD also honors the position of the object, allowing you to fix elements in the foreground or the background 🤟, thus giving you complete control over the scrolling experience. Fixed Elements allows you to create fixed headers, footers, navbar, backgrounds, and floating buttons.
🤙 Tip — If a fixed object has opacity or blurs, XD renders those in real time 🔮 as the content beneath it scrolls. Fixing objects in the foreground and background can help create some immersive scrolling experiences.
▶️ Video — Creating Fixed Elements with Dani Beaumont
Overlays 🥞
Keyboards, menus, and modals are common examples where you need to stack 🥞 the contents of one artboard over another. In order to create these experiences in XD, where the content of one artboard slides or appears over another artboard, we introduced overlays 🔥. Connect the two artboards using a wire and pick Overlays from the actions dropdown. Use the green position knob ✳️ to adjust the position of the overlay on the base artboard. Overlays helps you reuse an artboard multiple times; imagine designing a menu once and then wiring it up across multiple artboards.
🤙 Tip — If you select a specific animation like slide up or slide down, XD automatically positions the overlay to the appropriate edge of the base artboard.
▶️ Video — Creating Overlays with Dani Beaumont
Time-based triggers ⏳
XD supports different triggers like tap, drag, and voice; however, all of them require the user to interact with the prototype. Time as a trigger ⏰ allows you to define a transition across artboards by setting a delay and duration value. The delay value ⏳ indicates when the transition will automatically begin and the duration value ⌛️ indicates how long it will take to actually transition. Time-based triggers can be used to prototype onboarding flows, progress screens, and decision flows.
🤙 Tip — Time-based triggers can only be set when you drag a wire from the artboard rather than an object on it.
Auto-Animate 🔮
Auto-Animate 🔥 is a new action that can be used to animate objects across artboards. ⚡️In order to create microinteractions and more complex prototypes, you can leverage Auto-Animate. This action will animate 🔮 the difference in properties for the same objects across artboards. Ensure that objects that need to animate have the same layer name ✅ across the artboards. If a new object is present on the destination artboard it will fade in. If an object from the start artboard is deleted it will fade out in the destination artboard. Here are some good examples 🤟 of how to use Auto-Animate by Howard Pinsky.
🤙 Tip — You can stack objects off the artboard in order to stagger them or control the sequence in which they animate position. 🔥
▶️ Video — Leveraging Auto-Animate with Dani Beaumont
Drag gestures 👆
Using drag as a trigger, you can easily prototype the action of dragging objects across screens ↔️. Typically, you need to define the drag start, end, and duration 🤦🏻; however, with XD, simply change the position of the object across artboards and wire them up using Drag from the trigger menu 💁🏻. XD allows you to create a drag gesture in just a couple of clicks 👌. You can use this gesture to prototype dragging cards, pull down screens, scrolling through stacks, etc.
🤙 Tip — We added a new easing function called Snap that was specifically designed for prototypes with drag. When you pick drag, we automatically pick Auto-Animate in the actions drop-down.
▶️ Video — Using Drag as a Trigger with Dani Beaumont
Voice-based triggers 🗣
Our biggest announcement this year at Adobe MAX was voice prototyping in Adobe XD. 🎉 Just like tap, you can also leverage voice as a new type of trigger. Select voice 🔉from the trigger dropdown and type in a voice command that serves as the reference. In the preview window or browser, hold down Spacebar 👽 to trigger the microphone that allows you to speak the command. If the spoken command matches, the screen will transition to the defined destination. It’s as simple as that! 🔥
🤙 Tip — You can have multiple voice commands on the same artboard by creating a voice command on different objects. 🔥 Check out another Howard Pinsky magic tutorial on prototyping with voice 👏
▶️ Video — Prototyping for Voice with Dani Beaumont
Keyboard Triggers ⌨️
You can now assign keyboard shortcuts as triggers to transition or animate your screens in XD. Select Keys/Gamepad from the trigger dropdown and then press any key 🔑on your keyboard to assign it. You can even use a modifier key to create shortcuts like CMD R or CTRL SHIFT L. ⚡️This makes prototyping for desktop apps 🖥️, presentations 🕴️ and games 👾 much more easy!
Refer to this page for more details on keyboard triggers.
🤙 Tip — You can assign keyboard triggers on objects as well as artboards, thus allowing you to have more than one trigger per artboard.
▶️ Video — How to prototype using keyboard triggers with Dani Beaumont.
▶️ Video — Using keyboard triggers to prototype a desktop application with Howard Pinsky.
Gamepad Triggers 🎮
You can now assign keys on a gamepad 👾 as triggers to transition or animate your screens in XD 🎮 Select Keys/Gamepad from the trigger list and then press a button on your connected game controller. XD supports Xbox One and DualShock 4 controllers connected either via Bluetooth or USB.⚡️You can interact and test with these controllers in the preview window as well as on the web once you create a prototype. 🕹️
Refer to this page for more details on gamepad triggers.
🤙 Tip — You can assign gamepad triggers on objects and artboards, thus allowing you to have more than one trigger per artboard.
▶️ Video — How to prototype using gamepad triggers with Howard Pinsky.
Speech playback 📣
Designing for voice is a two-way conversation. You can leverage speech playback to add voice playback to your prototypes. ⚡️Select an artboard and pick speech playback. Type in the text you would like to playback. You can use time as a trigger to define when the speech playback should execute. Speech playback is a great way of designing voice experiences. You can use speech playback in conjunction with voice triggers to build immersive voice-based prototypes. Here’s my favorite example. 🔮
🤙 Tip — Use a comma in your text to pause or add a break in your speech playback. To get started, you can download the Amazon Alexa UI Kit for Adobe XD 📩
▶️ Video — Prototyping for Voice with Dani Beaumont
Export to After Effects CC 🔥
If you need to import your designs to After Effects CC, simply select the artboards and navigate to File > Export > After Effects. 🤝 You don’t need to set up your layers or artboards prior to exporting. 🙌 When exporting we preserve each layer on the artboard and bring it into a new Ae project. This is a quick way of designing in XD but leveraging After Effects for specific workflows.
▶️ Video — Adobe XD to After Effects with Dansky
Easing and animation 🎈
If you are working with basic transitions or overlays, you can leverage the animation options to determine how the screens animate. We support push, pull, and dissolve. Additionally, we have support for easing functions like ease-in/out, bounce, snap, and windup.
That’s a quick overview of every single prototyping feature in Adobe XD, and we are constantly adding new features and improving the overall experience with monthly updates. If you have a feature that you are looking forward to, please upvote it on UserVoice.
We also love to see what you create with Adobe XD. Please tag your work on Twitter, Dribbble, and Behance with #MadeWithAdobeXD and select Adobe XD under “Tools Used” for the opportunity to be featured in the Adobe XD newsletter.
Thank you Dani Beaumont, Howard Pinsky, and Dansky for your amazing videos and tutorials!
