By Dani Beaumont
Design, prototype, and share with Adobe XD
- Adobe XD User Guide
- What's new in Adobe XD
- Common questions
- Design, prototype, and share with Adobe XD
- Color Management
- System requirements
- Workspace basics
- Change app language in Adobe XD
- Access UI design kits
- Accessibility in Adobe XD
- Keyboard shortcuts
- Tips and tricks
- Artboards, guides, and layers
- Shapes, objects, and path
- Text and fonts
- Components and states
- Masking and effects
- Videos and Lottie animations
- Create interactive prototypes
- Animate prototypes
- Object properties supported for auto-animate
- Create prototypes with keyboard and gamepad
- Create prototypes using voice commands and playback
- Create timed transitions
- Add overlays
- Design voice prototypes
- Create anchor links
- Create hyperlinks
- Preview designs and prototypes
- Share, export, and review
- Share selected artboards
- Share designs and prototypes
- Set access permissions for links
- Work with prototypes
- Review prototypes
- Work with design specs
- Share design specs
- Inspect design specs
- Navigate design specs
- Review and comment design specs
- Export design assets
- Export and download assets from design specs
- Group sharing for enterprise
- Back up or transfer XD assets
- Design systems
- Cloud documents
- Integrations and plugins
- Work with external assets
- Work with design assets from Photoshop
- Copy and paste assets from Photoshop
- Import or open Photoshop designs
- Work with Illustrator assets in Adobe XD
- Open or import Illustrator designs
- Copy vectors from Illustrator to XD
- Plugins for Adobe XD
- Create and manage plugins
- Jira integration for XD
- Slack plugin for XD
- Zoom plug-in for XD
- Publish design from XD to Behance
- XD for iOS and Android
- Known and fixed issues
- Installation and updates
- Launch and crash
- Cloud documents and Creative Cloud Libraries
- Prototype, publish, and review
- Import, export, and working with other apps
Learn how to design interactive prototypes, wireframes, and graphics using XD.
Adobe XD enables UX designers design interactive user experiences for web and mobile apps using a single app.
You can design quick and simple designs on artboards in XD. Then wire the artboards together to create an interactive prototype that you can share and iterate with stakeholders. You can also use plugins to automate repeat operations or parts of designer workflows that are tedious, complex, or repetitive.
Adobe XD integrates well with Photoshop, Illustrator, and After Effects.
You can continue designing in your preferred applications, bring the assets into XD, and then use XD to create and share prototypes. XD supports SVG and bitmap files without any loss of fidelity. You can then enhance the assets further in Adobe XD or use them to develop interactive prototypes.
In a nutshell, the workflow can be described in the following high-level steps:
- Design: Create design layout elements, add artboards, and import resources from other applications such as Adobe Illustrator, Adobe Photoshop, and Adobe After Effects. You can also use plugins to automate repeat operations or parts of designer workflows that are tedious, complex or repetitive.
- Prototype: Select objects or artboards in your design and create interactions between artboards.
- Share: Once your project is ready to be reviewed, you can share prototypes or design specs, or export the project or assets with your stakeholders.
Read on for more details on designing, prototyping, and sharing in XD.
Get started with Adobe XD
Select a preset size for the artboard. If you want to work with a custom size, type the width and height in pixels in the text fields under the custom option. If you want to specify a custom size, click the Custom Size icon.
Gather your assets in one of the following ways:
- Use Adobe XD's design tools to design your assets from scratch. For more information, see Drawing tools and Text tools.
- Copy your designs from Photoshop, Sketch, After Effects or Illustrator, and paste them into your artboard in Adobe XD. You can also import, drag, or copy and paste a JPG, SVG, PNG, or GIF file from:
- File Explorer (on Windows)
- Finder (on Mac)
- Web browser
- OS clipboard
Enhance the objects in your design. For example, combine or mask objects, change stroke and fill properties, use overlay to stack content on top of a base artboard, and move or rotate objects or use responsive resize to design assets for multiple screen sizes and layouts. Use linked assets to create and maintain a single version for UI kits, sticker sheets or style guides, and share them across documents for a consistent design scalability and plugins to automate repeat operations or parts of designer workflows that are tedious, complex, or repetitive.
For more information, see:
- Select, resize, and rotate objects
- Combine objects using Boolean operations and mask objects with shapes
- Group, lock, and duplicate objects
- Move, align, distribute, and arrange objects
- Set stroke, fill, and drop shadow for objects
- Use responsive resize and constraints
- Create and manage plugins
- Work with components
Lay out repeating elements effortlessly using the Repeat Grid feature to create a grid out of existing content without duplicating them manually. For more information, see Create repeating elements.
Use plugins to automate repeat operations or parts of designer workflows that are tedious, complex, or repetitive. For more information, see Create and manage plugins.
Add more artboards for each of the screens you need in your prototype. For more information, see Working with artboards.
You can create interactive prototypes by using voice capabilities, auto-animate, drag gestures, and timed transitions. For more information, see Voice design and prototyping in XD, Create prototypes using auto-animate and drag gestures, and Use timed transitions.
You can preview the interactivity in prototypes and while previewing, record the interaction as an MP4 file.
To link artboards or set up interactivity, select the artboard or an object and click the arrow on the right. A wire appears. Simply drag and connect the wire to another object or artboard. In the pop-up window that appears, specify the transition options and the duration for the transition.
You can also use overlay to simulate the concept of transitions without duplicating content across multiple artboards. For detailed information, see Create interactive prototypes.
Click the Preview icon on the upper right of the application. XD displays a preview screen that allows you to view and navigate the different pages. The Preview screen has a Record icon that allows you to record the flow between pages and save it in MP4 format.
For more information, see Preview and record interactions.
Share prototypes for design review, presentation, or user testing. You can also publish prototypes and design specs for development, or customize the viewing experience as per your preference. For more information, see share designs and prototypes.