# Adobe XD Bootcamp Canonical URL: ## Overview If you're looking to break into UI and UX design, this course takes you through Adobe XD from the ground up, covering everything from beginner basics to advanced features. Unlike tools like Photoshop, which were built for photo editing and print, XD was designed from the start with web, app, and UX designers in mind. That focus shows in everything the app does, from its artboard-based workspace that lets you design for mobile, tablet, and desktop all at once, to its vector-based foundation that makes scaling for different screen sizes a breeze. You can craft visuals and turn them into working prototypes without ever leaving the app. The course gets into the features that make XD genuinely powerful, including components, repeat grids, and built-in prototyping tools. You'll learn how to design complex, realistic prototypes with advanced functionality, using component states to create hover effects, auto-animate to bring motion into your designs, and scroll groups to make specific areas of content scrollable. On top of that, you'll explore 3D transforms to make your graphics pop, anchor links for in-page scrolling, audio sound effects for your interfaces, and much more. By the end, you'll have the skills to design and prototype professional-grade user experiences with confidence. ## What you'll learn - Create UI (User Interface) and UX (User Experience) designs for websites and apps - Design finished layouts that are optimized for mobile, tablet, and desktop screens - Design on grids, extract image assets, share designs with clients/developers, and more - Create more complex & realistic prototypes - Add component states, such as hovers - Make animations using auto-animate - Define scrollable areas using scroll groups - Scroll up & down within a page using anchor links - Add audio and sound effects ## Curriculum ### Section 1 #### Creating New Files & Designing on a Grid - Creating a new file - Setting up artboards - Importing text - Creating colored backgrounds for text #### Importing & Cropping Photos - Importing a photo as an image fill (crop a photo) - Rounding corners #### Vector Graphics, Colors, Shadows, & More - Importing & modifying vector graphics - Aligning & distributing layers - Layer opacity vs. fill opacity - Reusing colors (color swatches) - Adding a drop shadow #### Character Styles - Creating & Editing Character Styles ### Section 2 #### Repeat Grids - Creating a Repeat Grid - Customizing the content - Adjusting the design #### Components (Reusable Elements) - Creating & editing components - Overriding content in one instance vs. globally updating all components - Detaching from a component - Components versus Repeat Grids #### Turning a Design into a Clickable Prototype - Linking between artboards - Previewing the prototype - Creating an overlay - Background blur - Fixing the position of elements so they don’t scroll - Making a recording of a prototype #### Exporting Assets for Web: SVG, JPEG, & PNG - Exporting individual assets - Exporting artboards #### 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 ### Section 3 #### Stacks, Padding, & Responsive Resize - Creating a Stack & Adjusting the Spacing - Rearranging & Adding Items to a Stack - Responsive Resize, Stacks, & Padding - Keystrokes for Working with Stacks & Padding - Nesting Stacks (Stacks Within Stacks) #### Linking Up/Down a Page & Scrollable Areas - Making Links that Scroll Up/Down a Page - Making the Navbar Fixed to the Screen - Adjusting the Position & Speed of the Scroll - Creating a Scrollable Area Within a Page #### Intro to Auto-Animate - The Basics of Auto-Animate - Different Kinds of Easing - Adding a Timed Animation #### Parallax Animation - Setting Up the Parallax Assets - Building the Parallax Animation #### Component States (Hover & Toggle) - Adding a Hover State to a Button - Creating a Toggle State ### Section 4 #### Creating 3D Transforms - Adding 3D Transforms - Front to Back versus Z Position #### Adding Interactions to a Slideshow: Tap, Drag, & Keys - Creating a Working Slideshow Prototype - Adding Tap Interactions - Adding the Ability to Drag - Adding Keystrokes #### Time Interactions & Adding Audio (Sound Effects) - Adding a Drag Interaction - Adding a Time Interaction - Adding a Sound Effect - Adding a Keystroke #### Shared XD Libraries - Publishing a Library - Using an XD Library ## Instructors ### Michael Suen — Instructor Michael is an independent designer and creative director. For over a decade, he has run the design studio Weirdo, helping early-stage startups and enterprise companies alike clarify their unique value proposition and meaningfully engage their customers. Drawing on his experience as a certified Design Sprint facilitator and former startup co-founder, Michael has worked side-by-side with leaders at LinkedIn, Bose, KonMari, Lovevery, IntelyCare, Hazel Health, and more to launch new brands, products, and services. His projects have been featured in the likes of _TechCrunch_, _The_ _Wall Street Journal_, and _NPR_, and won awards at South by Southwest and Games for Change. Prior to his position at Noble Desktop, Michael served as an adjunct professor at the City University of New York, where he co-created the user experience curriculum for their workforce training program. He has also taught user experience design at General Assembly and lectured on playful design at MIT and Haverford College. In his former lives, Michael covered arts and culture as a journalist, shipped award-winning educational games as a digital producer, and participated in two successful startup exits as a founding designer (SwitchUp acquired by Optimal in 2018, VocaliD acquired by Veritone in 2022). Raised in Hong Kong and educated in Vermont, he now lives in Queens, NY. ### Christophe Drayton — Instructor Christophe is the instructor for the UX & UI Design Certificate, Figma Advanced, and Generative AI courses at Noble Desktop, and the founder and Chief Design Officer of Kaaiind, which specializes in Applied Artificial Intelligence in the Creative field. With over 20 years in Branding, UX Design, and Accessibility across Europe and the US, Christophe has positively impacted the digital experience of a large spectrum of companies, ranging from big data to startups, government entities to nonprofits, both in the private and public sectors. As an Educator, Christophe has led transformative and award-winning UX programs at Thinkful, the City University of New York (CUNY), and the Brooklyn Public Library, which have opened doors for underrepresented groups in tech who have secured roles at top companies like Google, Uber, Citi, and IBM. Most recently, he has developed innovative curricula about AI in the workplace for the University of Phoenix, LinkedIn Learning, and Coursera. Today, he focuses on developing Allie, one of the first AI-powered, patent-pending color-blind safe and WCAG-compliant design system generator, while concluding his 5-year fundamental research on color vision deficiencies in digital environments. Christophe believes in hands-on, practical application of human-centered strategy and ethical and inclusive design. He is passionate about sharing his knowledge to inspire and empower the next generation of designers, especially those entering the field through nontraditional paths. ## Reviews > I’ve taken a few in-person Adobe classes with Noble Desktop and their UX/UI Certification remotely. Every tech school is built different, and this school is great for those that enjoy the traditional classroom setting with a live instructor [online and in-person classes all have live instructors]. It’s a great option to add supplementary knowledge to your tech skill set. With the different options for scheduling, you can go as in-depth as much as you want too. It’s also a good starting place in case you want to dip your toes in a certain field of study without too much time commitment just yet. It gave me a great starting foundation to learn more once classes ended. > > — Ashley Dragan, Software Engineer, Springboard ## Pricing **Tuition:** $650