Michael Chow

Creating a Prototype in Adobe XD

Assessment Published 8/6/19 Last updated on 8/6/19

After wireframes, it’s mockups and then prototypes. What’s the best way to go? What are the pros and cons of each method? These are questions that new designers and developers — and even experienced ones consider changing their workflow. Down the road, you can decide what’s best for you and your team. Today, we will create a mockup of our design into a pixel-perfect comp in Photoshop that is intended to represent the final design as accurately as possible which is used to help build a prototype for the team. Then bring it all together in Adobe XD, a prototype, collaboration & workflow platform.

  • Photoshop

    Editing and compositing for photos, web and mobile app designs, 3D artwork, videos, and more.

  • Adobe XD

    Design, prototype, and share user experiences.

Age Levels
1+ Day
Content Standards
British Columbia
ISTE Standards
Students: Creative Communicator, Students: Empowered Learner, Students: Innovative Designer, Students: Computational Trainer, Students: Knowledge Constructor

Computer: PC or Mac

Software: Photoshop and Adobe XD

CC License
Attribution Non-Commercial Share Alike
5 / 5 • 1 Rating

Resources (1)

or Join for free to access materials
File Size

Comments (2)

Write a reply...
or Join for free to view all comments and participate in the discussion.

Alper Ciftci

Posted on 9/8/19 5:20:13 AM Permalink


Michael Chow

Posted on 8/6/19 10:45:43 PM Permalink

​Please post a comment and what else would you like to see created in RSS with Adobe XD?