Användarhandbok Avbryt

Create interactive prototypes

Sök
  1. Adobe XD User Guide
  2. Introduction
    1. What's new in Adobe XD
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    5. Workspace basics
    6. Change app language in Adobe XD
    7. Access UI design kits
    8. Accessibility in Adobe XD
    9. Keyboard shortcuts
    10. Tips and tricks
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lottie animations
      1. Work with videos
      2. Create prototypes using videos
      3. Work with Lottie animations
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links
    10. Create hyperlinks
    11. Preview designs and prototypes
  5. Share, export, and review
    1. Share selected artboards
    2. Share designs and prototypes
    3. Set access permissions for links
    4. Work with prototypes
    5. Review prototypes
    6. Work with design specs
    7. Share design specs
    8. Inspect design specs
    9. Navigate design specs
    10. Review and comment design specs
    11. Export design assets
    12. Export and download assets from design specs
    13. Group sharing for enterprise
    14. Back up or transfer XD assets
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
    3. Coedit documents shared with you
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Publish design from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents and Creative Cloud Libraries
      1. Issues with XD cloud documents
      2. Issues with linked components
      3. Issues with libraries and links
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

Learn how to create interactive prototypes others can use to test, optimize, and perfect the user experience.

After you have completed designing your screens, you can visualize how users can experience your app or website by building an interactive prototype.

You can wire up your screens in desired navigation sequence and organize Multiple Flows having 2 or more artboards wired together. After your screens are set, you can share each flow as shareable links for review, gather feedback, and publish them on various target surfaces at once.

Set the Home screen

The Home screen is the first screen of your app or website. Your users begin to navigate the app or the website from the Home screen.

Also, when you preview your prototype and nothing is selected, the preview begins with the Home screen. That is, by default, your Home screen is set to the first artboard you add a wire to.

  1. Switch to Prototype mode.

  2. Click the artboard that you want to set as the Home screen. A gray home icon appears in the upper left corner.

  3. Click the Home icon. It turns into blue indicating that the artboard is now successfully set as the Home screen.

    Set as Home screen option

    Home screen set

    To set a different artboard as the Home screen, simply click the Home icon associated with that artboard. To view all the artboards after publishing, ensure to link all the relevant artboards.

Set up Multiple Flows in your project

Multiple Flows lets you create and share multiple versions of a design from the same document, or in the same file and leverage the same set of artboards across many prototypes or design specs. Each flow retains its own set of wires and share details so you can make changes and re-publish without having to undo and redo all of your settings each time.

If you want to create versions of your design, set a second Home artboard, wire them together, and share unique links for each set. Home artboards act as a starting point for the design where you can drag wires to connect different screens together.
Use the same set of artboards across multiple prototypes without having to duplicate your work. Make changes to your designs and update your links all in the same page.

Another example of setting up different flows is when designing a website that is targeted for multiple platforms such as mobile, desktop, tablet, and so on, you can define and author multiple interaction flows where in each flow depicts a user journey and later share each individual flow with your stakeholders to gather feedback.

Read on to learn how to set one or more Home artboards and define Multiple Flows.

Linking interactive elements to target screens
Set up Multiple Flows

  1. Switch to Prototype mode.
  2. Set the Home artboard to define the starting point of your design.
  3. Enter a name for each flow to organize them better.
  4. If your design consists of Multiple Flows, set Home artboards for each of those flows.
  5. Click the next object or artboards that you want to link. A connecting handle with an arrow appears from the object or the artboard. Click and drag to release the handle on the destination object or artboard.

Add interactions for objects and artboards

Once your screens are defined and wired, you can make your prototypes more engaging by introducing triggers and actions for objects and artboards. To do so:

  1. Select an object, and click + next to it, or click + in the Property Inspector. Set Triggers and Action Type. Once the action type is chosen, set the specific options for that action type, including Destination (if applicable).

    For example, if you want to enhance the navigation experience for your prototypes, you can choose to add anchor links by setting Scroll To as an action type. For more information on this, see Create navigation links within an artboard.     

    Prototyping options
    Prototyping options

    A. Set to Tap, Drag, Hover, Time, Keys & Gamepad, Voice, or End of Playback. B. Set time Delay in seconds. C. Set to Transition, Auto-animate, Overlay, Scroll To, Previous Artboard, Audio Playback, Speech Playback, Video Playback, or Lottie Playback. D. Change the destination artboard if required. E. Set to Dissolve or None. F. Select the easing effect. G. Enter the time duration in seconds. 

  2. If you select Tap as the trigger, you can now combine Transition with a non-transitional action such as Speech or Audio playback. To add the second action, set the first Action + button in the Property Inspector to Transition, Auto-Animate, Overlay, Scroll to, or Previous artboard, and set the second Action + button to Audio playback or Speech playback.

    If you select Audio or Speech playback as the first action, you cannot add a second action.

  3. You can also combine multiple triggers to create advanced interactions without distributing the triggers across different objects on an artboard. To do so, use the + button on the canvas or click + in the Property Inspector, and select Triggers, Action, and Destination.

    Obs!

    Remember that you can apply Tap, Drag, Hover, and Time triggers only once, and Voice, and Keys & Gamepad many times. 

    Combine multiple triggers
    Combine multiple triggers


    You can achieve realistic simulation of scrolling in your designs. To pin the design elements to a fixed position, select Fix Position When Scrolling in the Property Inspector.

  4. To preview your prototype, click Desktop preview   .

You can manage and publish each flow as shareable links for review and gather feedback. For more information on how to share Multiple Flows, see Share designs and prototypes.

Tips

  • To edit or delete a wire, select the wires to edit or delete them. You can also select a single interaction from the Property Inspector and edit its interactions.
  • To hide the wires temporarily in the Prototype mode, hold down Option (macOS) or Alt (Windows) key. 
  • Hover over the wire to view a tool tip that tells you the number of interactions and their type. 
  • To apply the defined interaction to another object, select the object or the artboard, select copy, click the destination object or artboard, and in the right-click context menu, select Paste Interaction.

Link to previous artboard

  1. In the Prototype mode, select the element or the artboard you want to link. When a small arrow appears, click and drag the arrow to the previous artboard, or select Action > Previous Artboard.

    Select previous artboard
    Select previous artboard

  2. When the Action is set to Previous Artboard, a tail icon appears at the end of the wire.

    Set the target
    Set the target

    Obs!

    If you want to unlink a wire from an artboard, click anywhere on the wire and drag it away from the destination artboard.

  3. Use the preview window to preview the linking.

Unlink artboards

  1. In Prototype mode, select Destination > None.

    You can also click anywhere on the wire and drag it away from the destination artboard.

    Unlink artboards
    Unlink artboards

    Obs!

    The None option is available only if the artboard is linked to a target.

  2. Preview the linking in a browser. Any target link previously set from the element is removed.

Preview and record interactions

Obs!

Recording prototypes is not supported in Adobe XD on Windows. However, there's a workaround. Press the Windows + G keys and use the native recorder to record the Preview window.

To test your prototype and the interactions, you can preview the prototype. You can also record the preview and save the recording as a .mp4 file. You can then choose to share the .mp4 file with your stakeholders, who can view (or review) the walkthrough of the prototype and provide feedback.

  1. Click the Desktop Preview icon. The Preview window appears and displays the artboard in focus.

    To test the navigation between screens, click the interactive elements.

    You can edit the design and interactions in your prototype while previewing in the preview window. The changes are instantaneously available for preview.

  2. To record the interaction, click Record icon in the preview window. To end the recording, press Esc or click the Record icon again.

    .
    Record prototype interactions

  3. Specify a name and location where you want to save the recording. The recording is saved as a .mp4 file.

Learn more

Here's a video to help you get started with interactivity: 

Related Resources

Talk to us

Ask the Community

If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.

Adobes logotyp

Logga in på ditt konto

Snabblänkar

Visa alla dina planer Hantera dina planer

Legal Notices    |    Online Privacy Policy