Посібник користувача Скасувати

Work with videos

Learn how to use videos in Adobe XD to create immersive design experiences.

XD allows you to import videos, adjust basic video settings, and control playback. After setting video playback and wiring your prototype, you can preview it before sharing.

Import video, adjust settings, and set a playback option
Import video, adjust settings, and set a playback option

Suggested reading

4 steps to create and share video interactions

Get started by importing your video, and adjusting video settings. Then, set a playback option, preview the prototype, and share it with stakeholders for review.

Import video

Adjust video settings

Set a playback option

Preview and share

Import video

To import your video into XD, drag it to an artboard. Alternatively, choose File > Import.

Video file format

MP4

Video compression (codec)

 H.264

Audio codec

AAC

Maximum size

25 MB

Maximum resolution

4 K

If your video does not meet the requirements given in the table, you get an error when importing it into XD.

Convert or trim your video for it to meet these requirements. Adobe Media Encoder is highly recommended.

Convert or trim video using Media Encoder

You can use Adobe Media Encoder to quickly and easily prepare your video for import into XD.

Download Adobe Media Encoder

Follow the steps given below:

  1. Open Media Encoder. Navigate to File > Add Source, locate your video, and then click Open.

  2. Locate your video in the Queue, and click the Preset link.

    Click the Preset link of the video
    Click the Preset link of the video

  3. In the Export Settings window, do the following:

    1. Ensure that the Format is H.264.
    2. To reduce your video size to below 15 MB, trim the video, or choose a Preset with a lower resolution. As you trim the video or try different presets, you can find the estimated file size in the lower-right corner of the window. A recommended preset is High Quality 720p HD.
    3. Click OK.

    A recommended preset is High Quality 720p HD.

    Select the Format as H.264, and trim the video or choose a lower resolution Preset
    Select the Format as H.264, and trim the video or choose a lower resolution Preset

  4. In the Queue, click the green play button in the upper-right corner to export.

  5. Open XD and import the video.

Adjust video settings

Once imported, the first frame of the video is displayed on canvas. When you select the video in Design mode, you see a play icon   in its upper-left corner.

To preview the video or adjust settings, click the button   in the Video section of the Property Inspector. The Heads Up Display (HUD) opens. In the HUD:

  • You can preview the video by clicking Play  .
  • You can trim video, change thumbnail, set playback to loop, or disable audio.

Trim the video

Trim the video
Trim the video

  1. Click Trim  .
  2. Select a clip by dragging the start and stop points on the slider.
  3. Click the check mark   to save the clip.

Frames are not deleted when you trim them. Click Trim   again to recover the frames.

Change video thumbnail

Change video thumbnail
Change video thumbnail

  1. Click the Thumbnail icon   to open the explorer. 
  2. Browse and choose an image.
  3. Click Import.

To delete a thumbnail, click Delete  .

Set playback to loop

Set playback to loop
Set playback to loop

Use the Loop playback toggle to enable or disable playing the video on loop.

Enable or disable audio

Enable or disable audio
Enable or disable audio

Click the speaker icon (  |  ) to mute or unmute the soundtrack in the video.

Set a playback option

Set a playback option for your video
Set a playback option for your video

After adjusting video settings, control when your video will play by choosing a playback option.

In Design mode, in the Video section of the Property Inspector, choose a preset:

  • Play on tap (default)  
  • Play automatically
  • No playback

Choosing a playback option in Design mode automatically creates interactions for your video in Prototype mode.

To learn more about the video playback options and customizations, see Create prototypes using videos.

Preview prototype and share

Preview prototype in-app, on a mobile device, or on a browser
Preview prototype in-app, on a mobile device, or on a browser

When your design is ready to be shared with stakeholders, set appropriate access permissions and publish the prototype or design specs link, and share it.

Current limitations

  • You can import only MP4 videos into XD, with each video less than 25 MB.
  • You can import a maximum of 20 unique videos in an XD document.
  • Video assets can't be exported from File > Export. However video will be available in design specs.
  • Only one video plays at a time.
  • When the Action type is not Auto-Animate, initiating another trigger stops video playback.
  • Playing videos automatically could conflict with artboard or Lottie animation Time triggers.
  • You can't override videos in a Repeat Grid.
  • Apart from the first video, other videos in a Repeat Grid will have No playback set as the default.
  • Flip options are disabled for video in the Transform section of the Property Inspector.
  • Fill and Border properties are not available for videos.
  • Rounded corners are not available for videos in the Appearance section of the Property Inspector.

Related resources

Have a question or an idea?

ask the community

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!

Отримуйте допомогу швидше й простіше

Новий користувач?