Adobe XD is a newer app that was built with the specific needs of a modern web designer, UX designer, or app designer in mind. Unlike image editing programs such as Photoshop—which were originally created for print, photo retouching, or illustration—the entire focus of Adobe XD is on designing user interfaces and user experiences. You can craft the visuals and turn them into working prototypes all in a single app!
Adobe XD uses artboards, so you can efficiently design web layouts for mobile, tablet, and desktop (or screens for apps). It’s vector-based, so you can scale for a variety of screen sizes with ease, as well as export hi-res (Retina) graphics for the web or apps. You’ll find tools and features specifically relevant to UI (User Interface) design and UX (User Experience) design, such as symbols, repeat grids, built-in protyping tools, and much more.
Why Learn Adobe XD for UI & UX Design?
With artboards and layout guides, you can design on popular grid systems (like Bootstrap), making it easier to design responsive webpages.
Turn your designs into clickable prototypes quickly and easily. You can create prototypes directly in XD and share them with users or developers.
Export specs to give your web developer so they can inspect a layout for size, colors, fonts, spacing, copy CSS code, and more—all from a web browser without having to own XD.
One of XD’s unique features is the repeat grid. This lets you quickly repeat a design component in columns and rows. You can then customize the content in each copy, while still being able to quickly update the design across all of them.
Importing Vector Graphics, Color Swatches, Shadows, & More
Importing & modifying vector graphics
Aligning & distributing layers
Layer opacity vs. fill opacity
Reusing colors (color swatches)
Adding a drop shadow
Creating & Editing Character Styles
Creating a Repeat Grid
Customizing the content
Adjusting the design
Symbols (Reusable Elements)
Creating & editing symbols
Overriding content in a symbol vs. globally updating all symbols
Detaching from a symbol
Symbols versus Repeat Grids
Turning a Design into a Clickable Prototype
Linking between artboards
Creating an overlay
Previewing the prototype
Making a recording of a prototype (Mac only)
Exporting Assets for Web: SVG, JPEG, & PNG
Exporting individual assets
Sharing XD Files (For Review, Developers, etc.)
Sharing an XD file
Commenting on shared files
Pinning a comment
Updating an existing shared file
Sharing for Development
Design the UI & UX of Websites & Apps
This one-day class will teach you the fundamentals of using Adobe XD to design the UI & UX of websites & apps. Learn these skills with step-by-step exercises in a small class led by a professional design instructor.
“This class is very informative. Even with the UX sphere rapidly growing every day, the instructor managed to stay on top of the many changes happening within Adobe XD and how it stacks up against similar apps.”
“The Adobe XD class was a fun and educational day. Dan explains everything really clearly and it is a really exciting new program to learn. See how it compares to Sketch and other web design programs. Better to learn and understand all of them! Love the prototyping features and soon to come animation. I highly recommend the class to beginners or seasoned pros.”
Learned to design for web and prototyping using Adobe XD.
“Great in-a-day overview. Everything you need to know to get started.”
Assoc. Creative Director, HAVAS Worldwide
“Adobe XD in a Day provides the essential fundamentals for Adobe XD in a concise format. You walk away from the class with a very good understanding of how it works and the potential it has for your future design work. Easy to understand presentation and a good overall classroom vibe to learn within.”
No. Prior experience is not required for this class. Students only need to be comfortable with using a computer.
Familiarity with how webpages are coded with HTML and CSS is helpful, but not required.
Do I need to bring anything to the class?
No. We provide computers (Mac or PC) with Adobe XD installed. Choose your operating system at checkout.
Do you offer discounts or a payment plan for this course?
Shorter courses such as this are already affordably priced and are not eligible for discounts.
This course is not eligible for a payment plan, which is only available for programs priced at $2,495 and above. Read our Payment Plan FAQ for more details.
Can I take this course online (remote learning)?
You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).
How does attending “live online” work?
Students can attend this training remotely through screen sharing software (we use Zoom).
Participants can hear the instruction, ask questions, and even share their screen with the instructor.
For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!
Students learning Adobe XD in class at Noble Desktop
“Noble Desktop has created some of the best hands-on learning materials available. I continue to be impressed with the "real life" exercises that they create for each course as a means of learning the intricacies of the programs they teach. I highly recommend Noble Desktop courses to anyone, from beginner to advanced, who wants to learn graphic design and animation programs.” Joe Busse
Each XD class comes with a custom workbook
Custom Workbook Included
Our Adobe XD class comes with a custom step-by-step training manual sold to universities and schools around the world. Recreate the class projects and refresh the materials anytime after the class.
Photoshop has been around the longest and is used by many web designers. It is a photo editor with web design features added on, so some web designers are turning to other apps such as Sketch and Adobe XD which were created solely for the purpose of visual and UX design.
Sketch is a Mac only app that many web designers are using, and more people every day are switching to it. Not only can you create your designs (for website, apps, etc.), but you can even turn them into working protoypes to show clients and do user testing with.
Adobe XD is a newer Adobe app that is very similar to Sketch. It’s an easy to use app that enables you do design and protype your ideas. Unlike Sketch though, it works on Mac and PC. It’s the newest of these apps, and is still continuing to develop rapidly.