title
Adobe XD Basics | Top 10 Things to know when getting started with Adobe XD

description
Adobe XD is an awesome design tool for people who want to focus on UI Design, UX Design, Prototyping, Responsive Web Design and more. These are the 10 most basics tasks you will need to know about when you get started. Remember to Subscribe https://goo.gl/6vCw64 If you are just starting out with Adobe XD or UI Design/ Graphic Design Software in General, this tutorial should get you up and running. 0:00 What's Up 1:20 Intro 2:00 Art boards 3:05 UI Tour 4:50 Pen tool 6:25 Symbols and styles 9:18 Repeat grid 10:55 Responsive Resizing 13:55 Preview design 14:45 Images 15:55 Prototyping 18:00 Sharing Adobe XD is pretty awesome. It's still a fairly new tool at this point but has tons of potential. ------------------------------------------------------------------------------------ ////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more... https://designchamps.io/hip ////////// Connect with me here 👍🏼 Instagram: https://www.instagram.com/imjesseshow Twitter: http://twitter.com/imjesseshow Anchor: https://anchor.fm/imjesseshow Medium: https://medium.com/@imjesseshow ////////// Sign up for my Monthly Newsletter 📫 http://jesseshowalter.com/newsletter ////////// Music is from Musicbed click below for a free trial 👇🏼 http://share.mscbd.fm/imjesseshow ////////// Equipment 📸 https://www.amazon.com/shop/jesseshowaltertv

detail
{'title': 'Adobe XD Basics | Top 10 Things to know when getting started with Adobe XD', 'heatmap': [{'end': 454.815, 'start': 429.219, 'weight': 0.813}, {'end': 610.684, 'start': 556.883, 'weight': 0.886}, {'end': 668.172, 'start': 651.164, 'weight': 0.829}, {'end': 989.715, 'start': 967.241, 'weight': 0.826}], 'summary': 'Learn about adobe xd, a ui/ux design tool that competes with sketch and figma, offering prototyping, responsive web design, and covering the top 10 things to know. devmountain bootcamp offers web development, ios development, and ux design, and provides an overview of using adobe xd on apple computers, including creating artboards, navigating the interface, using the pen tool, and creating reusable symbols and styles. adobe xd features include repeatable grid, responsive resizing, previewing designs, working with images, prototyping, and sharing options.', 'chapters': [{'end': 34.278, 'segs': [{'end': 34.278, 'src': 'embed', 'start': 0.309, 'weight': 0, 'content': [{'end': 6.113, 'text': "What's up, everybody? I'm Jesse Showalter, and today I'm really excited to be taking a look at Adobe Experience Design.", 'start': 0.309, 'duration': 5.804}, {'end': 13.418, 'text': "XD is part of the Adobe suite that's primarily focused on UI design, UX design, prototyping, and responsive web design.", 'start': 6.514, 'duration': 6.904}, {'end': 18.122, 'text': "It's available for both Mac and PC as long as you have an Adobe CC subscription.", 'start': 13.719, 'duration': 4.403}, {'end': 25.807, 'text': "It's most definitely a competitor to a lot of the modern design tools that have come out recently and that you might be using, like Sketch or Figma,", 'start': 18.542, 'duration': 7.265}, {'end': 28.549, 'text': 'or the dozen others that are on the market right now.', 'start': 25.807, 'duration': 2.742}, {'end': 34.278, 'text': "In today's video, I'm gonna be covering the top 10 things you need to know about XD when you first open up the project,", 'start': 28.809, 'duration': 5.469}], 'summary': 'Adobe xd is a ui/ux design tool, competing with sketch and figma, covering top 10 features.', 'duration': 33.969, 'max_score': 0.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI309.jpg'}], 'start': 0.309, 'title': 'Adobe xd: ui/ux design tool', 'summary': 'Introduces adobe xd, a competitor to sketch and figma, focusing on ui/ux design, prototyping, and responsive web design, covering the top 10 things to know about xd.', 'chapters': [{'end': 34.278, 'start': 0.309, 'title': 'Adobe xd: ui/ux design tool', 'summary': 'Introduces adobe experience design (xd), a competitor to modern design tools like sketch and figma, focusing on ui design, ux design, prototyping, and responsive web design, and covering the top 10 things to know about xd.', 'duration': 33.969, 'highlights': ['XD is part of the Adobe suite focused on UI design, UX design, prototyping, and responsive web design. XD is primarily focused on UI design, UX design, prototyping, and responsive web design.', 'XD is available for both Mac and PC with an Adobe CC subscription. XD is available for both Mac and PC with an Adobe CC subscription.', 'XD is a competitor to modern design tools like Sketch, Figma, and others. XD is a competitor to modern design tools like Sketch, Figma, and others.']}], 'duration': 33.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI309.jpg', 'highlights': ['XD is part of the Adobe suite focused on UI design, UX design, prototyping, and responsive web design.', 'XD is available for both Mac and PC with an Adobe CC subscription.', 'XD is a competitor to modern design tools like Sketch, Figma, and others.']}, {'end': 550.958, 'segs': [{'end': 78.864, 'src': 'embed', 'start': 34.278, 'weight': 0, 'content': [{'end': 37.664, 'text': 'to help you get up and running and feeling really confident about the program.', 'start': 34.278, 'duration': 3.386}, {'end': 38.706, 'text': "I'm ready to get started.", 'start': 37.865, 'duration': 0.841}, {'end': 39.487, 'text': 'I hope you are.', 'start': 38.866, 'duration': 0.621}, {'end': 40.249, 'text': "Let's do this thing.", 'start': 39.668, 'duration': 0.581}, {'end': 51.588, 'text': 'Before I get started, this video is sponsored by the awesome people over at DevMountain.', 'start': 47.847, 'duration': 3.741}, {'end': 59.671, 'text': 'DevMountain is a bootcamp experience that offers on-campus and online programs for people who want to start a new career in design or development.', 'start': 51.908, 'duration': 7.763}, {'end': 67.833, 'text': "If you're interested in learning web development, iOS development, UX design in a 13-week program, that'll spit you out career ready.", 'start': 60.051, 'duration': 7.782}, {'end': 70.394, 'text': 'then check out the link in the description and check out DevMountain.', 'start': 67.833, 'duration': 2.561}, {'end': 75.019, 'text': "Okay, let's jump right into the computer and figure out what the 10 basic things are that you need to know.", 'start': 70.994, 'duration': 4.025}, {'end': 78.864, 'text': "I'm just gonna roll down, I'm gonna open up Adobe XD from my dock.", 'start': 75.299, 'duration': 3.565}], 'summary': 'Devmountain offers bootcamp programs for web development, ios development, and ux design in a 13-week program.', 'duration': 44.586, 'max_score': 34.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI34278.jpg'}, {'end': 134.269, 'src': 'embed', 'start': 111.913, 'weight': 2, 'content': [{'end': 120.219, 'text': "Let's just start out with an iPhone X and we'll open up the program and you can see it opens it right up and it's dropped an artboard onto our canvas.", 'start': 111.913, 'duration': 8.306}, {'end': 126.043, 'text': 'The artboard system is a really common thing nowadays in modern design tools and XD is no different.', 'start': 120.839, 'duration': 5.204}, {'end': 130.246, 'text': 'It allows you to put new artboards onto the canvas anytime you want.', 'start': 126.083, 'duration': 4.163}, {'end': 134.269, 'text': "You can do that by rolling over here into the tools panel and there's an artboard tool,", 'start': 130.506, 'duration': 3.763}], 'summary': 'Using adobe xd, you can easily add artboards to your canvas for modern design. iphone x is used as an example.', 'duration': 22.356, 'max_score': 111.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI111913.jpg'}, {'end': 243.913, 'src': 'embed', 'start': 216.779, 'weight': 6, 'content': [{'end': 225.803, 'text': 'The assets is where XD is gonna store all of your colors and your character styles and your reusable symbols or components you can reuse through your project.', 'start': 216.779, 'duration': 9.024}, {'end': 231.927, 'text': 'And so knowing how to click back and forth between your layers and your symbols or your layers and your assets, really, really powerful part of XD.', 'start': 225.843, 'duration': 6.084}, {'end': 237.57, 'text': 'Right next to that we have all of the artboards displayed and you can see all three of them on their own separate line.', 'start': 232.347, 'duration': 5.223}, {'end': 243.913, 'text': "Up at the top left you can see we are currently on the design tab and we'll talk about this later but we can click over to the prototyping tab.", 'start': 237.85, 'duration': 6.063}], 'summary': 'Xd stores colors, character styles, and symbols. artboards displayed separately. design and prototyping tabs available.', 'duration': 27.134, 'max_score': 216.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI216779.jpg'}, {'end': 305.321, 'src': 'embed', 'start': 281.351, 'weight': 4, 'content': [{'end': 288.915, 'text': 'And we have some different prototyping options as well as all of our appearance options like color and text and typography and different stroke sizes.', 'start': 281.351, 'duration': 7.564}, {'end': 292.897, 'text': 'So all that good stuff is there and that is a basic tour of the interface.', 'start': 288.935, 'duration': 3.962}, {'end': 299.859, 'text': 'All right, the third thing you might wanna know how to do using Adobe XD like any other Adobe product is to use the pen tool.', 'start': 293.277, 'duration': 6.582}, {'end': 305.321, 'text': "And that's by simply clicking on the pen tool in the tools panel or by pressing the hotkey of P.", 'start': 299.899, 'duration': 5.422}], 'summary': 'Adobe xd offers various prototyping and appearance options, including color, text, and typography, with the ability to use the pen tool by clicking or using the hotkey p.', 'duration': 23.97, 'max_score': 281.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI281351.jpg'}, {'end': 346.974, 'src': 'embed', 'start': 320.687, 'weight': 5, 'content': [{'end': 327.75, 'text': 'I can also delete each node one at a time by pressing the delete key and it will just slowly move around and delete each of those points.', 'start': 320.687, 'duration': 7.063}, {'end': 334.211, 'text': 'A few interesting things about the pen tool in Adobe XD is that if you start drawing with the pen tool and,', 'start': 328.05, 'duration': 6.161}, {'end': 340.993, 'text': 'like most other Adobe products and you hold, as you are making that second point, you start getting some simple bezier curves.', 'start': 334.211, 'duration': 6.782}, {'end': 346.974, 'text': 'I can hold down shift and get increments, or I can just kind of freeform it by doing it with nothing but my hand.', 'start': 341.253, 'duration': 5.721}], 'summary': 'Adobe xd pen tool allows drawing with bezier curves and offers different methods for precise control.', 'duration': 26.287, 'max_score': 320.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI320687.jpg'}, {'end': 460.161, 'src': 'heatmap', 'start': 429.219, 'weight': 0.813, 'content': [{'end': 431.52, 'text': 'I could probably create a reusable color.', 'start': 429.219, 'duration': 2.301}, {'end': 437.883, 'text': 'So now we have the border color and the fill color that are both a part of now, the rest of this design,', 'start': 431.68, 'duration': 6.203}, {'end': 440.564, 'text': 'and I can always come back and reuse those styles.', 'start': 437.883, 'duration': 2.681}, {'end': 444.106, 'text': 'I can also create a reusable symbol, and I can rename this symbol.', 'start': 440.664, 'duration': 3.442}, {'end': 446.407, 'text': "I'll call it blah, because that's what it looks like to me.", 'start': 444.406, 'duration': 2.001}, {'end': 454.815, 'text': 'And anytime I wanted another one of these, I could either option drag another one out or I could drag one from my assets panel.', 'start': 446.787, 'duration': 8.028}, {'end': 456.036, 'text': 'And there it is.', 'start': 455.396, 'duration': 0.64}, {'end': 456.537, 'text': 'I like this.', 'start': 456.136, 'duration': 0.401}, {'end': 460.161, 'text': "It's a nice visual representation of all your reusable components in your project.", 'start': 456.597, 'duration': 3.564}], 'summary': 'Creating reusable color, border and fill styles, and symbols for visual representation.', 'duration': 30.942, 'max_score': 429.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI429219.jpg'}], 'start': 34.278, 'title': 'Devmountain bootcamp and adobe xd basics', 'summary': 'Introduces devmountain, a 13-week bootcamp program sponsored by devmountain, offering web development, ios development, and ux design. it also provides an overview of using adobe xd on an apple computer, and covers adobe xd basics, including creating artboards, navigating the interface, using the pen tool, and creating reusable symbols and styles.', 'chapters': [{'end': 97.663, 'start': 34.278, 'title': 'Introduction to devmountain bootcamp', 'summary': 'Introduces devmountain, a bootcamp program offering web development, ios development, and ux design in a 13-week program, to prepare individuals for new careers, sponsored by devmountain, and provides a brief overview of using adobe xd on an apple computer.', 'duration': 63.385, 'highlights': ['DevMountain offers web development, iOS development, and UX design in a 13-week program, preparing individuals for new careers.', 'The video is sponsored by DevMountain, a bootcamp experience that offers on-campus and online programs.', 'The chapter provides a brief overview of using Adobe XD on an Apple computer.']}, {'end': 550.958, 'start': 97.663, 'title': 'Adobe xd basics', 'summary': 'Introduces adobe xd basics, covering topics such as creating artboards for different devices, navigating the interface, using the pen tool, and creating reusable symbols and styles.', 'duration': 453.295, 'highlights': ['Adobe XD provides tools for creating artboards for different devices, such as iPhone X, Android, and iPad, allowing easy resizing and movement of artboards. Demonstrates the process of creating artboards for various devices and explains how to resize and move them on the canvas.', 'The interface of Adobe XD includes a tools panel for shapes and lines, a layers and assets panel for managing design elements, and tabs for design and prototyping, providing a basic tour of the interface. Explains the different components of the interface, including tools panel, layers, assets, and tabs for design and prototyping.', 'The pen tool in Adobe XD allows users to create custom shapes, add nodes, and manipulate bezier curves, offering control over the design elements. Details the functionality of the pen tool, including creating custom shapes, adding nodes, and manipulating bezier curves for design control.', 'Adobe XD enables the creation of reusable symbols and styles, allowing for the easy reuse of design elements such as colors, symbols, and character styles across the project. Describes the process of creating reusable symbols and styles, showcasing the functionality of the assets panel and the ability to apply and modify symbols and styles.']}], 'duration': 516.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI34278.jpg', 'highlights': ['DevMountain offers web development, iOS development, and UX design in a 13-week program, preparing individuals for new careers.', 'The video is sponsored by DevMountain, a bootcamp experience that offers on-campus and online programs.', 'The chapter provides a brief overview of using Adobe XD on an Apple computer.', 'Adobe XD provides tools for creating artboards for different devices, such as iPhone X, Android, and iPad, allowing easy resizing and movement of artboards.', 'The interface of Adobe XD includes a tools panel for shapes and lines, a layers and assets panel for managing design elements, and tabs for design and prototyping, providing a basic tour of the interface.', 'The pen tool in Adobe XD allows users to create custom shapes, add nodes, and manipulate bezier curves, offering control over the design elements.', 'Adobe XD enables the creation of reusable symbols and styles, allowing for the easy reuse of design elements such as colors, symbols, and character styles across the project.']}, {'end': 1165.121, 'segs': [{'end': 615.946, 'src': 'heatmap', 'start': 550.958, 'weight': 0, 'content': [{'end': 555.002, 'text': 'you can right click and highlight all of them on every canvas throughout your entire project.', 'start': 550.958, 'duration': 4.044}, {'end': 556.443, 'text': "That's really, really cool as well.", 'start': 555.342, 'duration': 1.101}, {'end': 561.705, 'text': "The fifth thing we're gonna be talking about in Adobe XD is, in my opinion, one of its coolest features,", 'start': 556.883, 'duration': 4.822}, {'end': 568.248, 'text': "and that's its ability to repeat grids and speed up the design process with its repeatable grid feature.", 'start': 561.705, 'duration': 6.543}, {'end': 571.19, 'text': "I've now created what I consider to be a reusable component.", 'start': 568.729, 'duration': 2.461}, {'end': 575.332, 'text': "I'm gonna click back over to my layers view, and I'm gonna group that together.", 'start': 571.25, 'duration': 4.082}, {'end': 576.312, 'text': "I'm just gonna call that.", 'start': 575.372, 'duration': 0.94}, {'end': 578.653, 'text': 'card Okay.', 'start': 577.833, 'duration': 0.82}, {'end': 586.216, 'text': 'I want to perhaps make lots of these cards and then edit the spacing and how they all work together.', 'start': 579.173, 'duration': 7.043}, {'end': 592.558, 'text': 'Like all at one time, instead of duplicating, duplicating, duplicating, duplicating, that can get a little bit tedious.', 'start': 586.436, 'duration': 6.122}, {'end': 594.139, 'text': 'Instead, I can just click on the element.', 'start': 592.778, 'duration': 1.361}, {'end': 597.7, 'text': 'I want to duplicate and head over to my properties panel and hit repeat grid.', 'start': 594.159, 'duration': 3.541}, {'end': 603.862, 'text': 'And now we get this little vertical and horizontal scroll bar that we can access however we want.', 'start': 598, 'duration': 5.862}, {'end': 605.863, 'text': 'So maybe we want these cards to go down.', 'start': 604.222, 'duration': 1.641}, {'end': 606.263, 'text': "We can't.", 'start': 605.923, 'duration': 0.34}, {'end': 610.684, 'text': 'We just drag that thing down and all the copies of it appear.', 'start': 606.283, 'duration': 4.401}, {'end': 615.946, 'text': 'And now we have multiple copies that are being controlled by our grid.', 'start': 611.084, 'duration': 4.862}], 'summary': 'Adobe xd allows for easy creation and management of repeatable grids, speeding up the design process with a reusable component.', 'duration': 64.988, 'max_score': 550.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI550958.jpg'}, {'end': 683.795, 'src': 'heatmap', 'start': 651.164, 'weight': 1, 'content': [{'end': 655.926, 'text': "Okay, the sixth thing you're gonna wanna know about an Adobe XD is actually one of its newer updates,", 'start': 651.164, 'duration': 4.762}, {'end': 659.448, 'text': 'and that is responsive resizing right here within Adobe XD.', 'start': 655.926, 'duration': 3.522}, {'end': 668.172, 'text': 'The ability to create components and different pieces of design that can stretch in an intelligent way across all sorts of different device sizes.', 'start': 659.708, 'duration': 8.464}, {'end': 669.992, 'text': 'On the screen, we have two different artboards.', 'start': 668.492, 'duration': 1.5}, {'end': 671.293, 'text': 'We have an iPad and iPhone.', 'start': 670.012, 'duration': 1.281}, {'end': 676.494, 'text': "And over on my iPhone side, I've started designing a really, really basic application right?", 'start': 671.573, 'duration': 4.921}, {'end': 683.795, 'text': 'Where we just have, if you click into it, you can see we have a nav up top, a little hamburger menu and a logo or whatever.', 'start': 676.534, 'duration': 7.261}], 'summary': "Adobe xd's new update includes responsive resizing for components, allowing designs to stretch intelligently across various device sizes.", 'duration': 32.631, 'max_score': 651.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI651164.jpg'}, {'end': 876.07, 'src': 'embed', 'start': 848.076, 'weight': 2, 'content': [{'end': 853.919, 'text': 'You also have the ability to record things right here and export different types of movie files and you can share those with different people.', 'start': 848.076, 'duration': 5.843}, {'end': 864.985, 'text': "The second way you can preview your designs is to head up to the top right and hit the actual device icon and make sure that you've downloaded the Adobe XD Viewer and you're able to then,", 'start': 854.379, 'duration': 10.606}, {'end': 869.687, 'text': "if you've saved it to the cloud or you can do a live preview and it's gonna load it right there on your device.", 'start': 864.985, 'duration': 4.702}, {'end': 876.07, 'text': "It does require that you have your device plugged in to actually do that viewing, so you can't just do it by Bluetooth,", 'start': 869.827, 'duration': 6.243}], 'summary': 'Adobe xd allows recording and exporting movie files for sharing. it also enables live preview of designs on devices by using adobe xd viewer.', 'duration': 27.994, 'max_score': 848.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI848076.jpg'}, {'end': 940.698, 'src': 'embed', 'start': 903.745, 'weight': 3, 'content': [{'end': 906.106, 'text': 'We can resize our image.', 'start': 903.745, 'duration': 2.361}, {'end': 908.547, 'text': 'We can also change the border radius of the image.', 'start': 906.246, 'duration': 2.301}, {'end': 910.988, 'text': "It's just going to kind of crop those in a little bit.", 'start': 908.627, 'duration': 2.361}, {'end': 916.43, 'text': 'We can also double click on the image and kind of move it around inside of its frame.', 'start': 911.508, 'duration': 4.922}, {'end': 917.79, 'text': "So that's one way you can do it.", 'start': 916.71, 'duration': 1.08}, {'end': 924.693, 'text': 'The way I like to work with images inside of XD is actually to draw a shape and then take an image and try to drop it inside of the shape.', 'start': 917.85, 'duration': 6.843}, {'end': 931.235, 'text': "Anytime you see a blue highlight, that's XD trying to mask that image into that shape.", 'start': 924.793, 'duration': 6.442}, {'end': 940.698, 'text': "What's great about this technique is that you can actually move your shape around, change your shape, the size or the constraints of your shape,", 'start': 931.455, 'duration': 9.243}], 'summary': 'In xd, we can resize, change border radius, and move images inside shapes, allowing for flexible design.', 'duration': 36.953, 'max_score': 903.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI903745.jpg'}, {'end': 999.523, 'src': 'heatmap', 'start': 967.241, 'weight': 0.826, 'content': [{'end': 971.564, 'text': "You're literally just gonna click on any sort of element that you want, like, for instance, our card,", 'start': 967.241, 'duration': 4.323}, {'end': 973.885, 'text': "and you'll get a little blue tab to the side of it.", 'start': 971.564, 'duration': 2.321}, {'end': 981.51, 'text': "You grab that tab and just connect it to whatever art board you'd like to go to, and you're gonna set the type of trigger, like for instance, a tap.", 'start': 973.945, 'duration': 7.565}, {'end': 989.715, 'text': "We're gonna do a transition, and we're gonna choose the destination to the second art board there, and then we wanna choose some sort of transition.", 'start': 981.77, 'duration': 7.945}, {'end': 999.523, 'text': "So we'd like to maybe slide up like a modal or something, and we're gonna do, let's do, ease in and out, and we'll preserve the scroll position.", 'start': 989.795, 'duration': 9.728}], 'summary': 'Click on element, connect to art board, set trigger and transition, choose destination and type of transition.', 'duration': 32.282, 'max_score': 967.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI967241.jpg'}, {'end': 1089.76, 'src': 'embed', 'start': 1070.035, 'weight': 5, 'content': [{'end': 1080.539, 'text': "It's one of the main fundamental things you'd wanna use XD for is to create these large scale interactive prototypes of your project and be able to share those with the people that you need to share them with.", 'start': 1070.035, 'duration': 10.504}, {'end': 1084.317, 'text': "Which leads us to our final point, it's all about sharing.", 'start': 1081.195, 'duration': 3.122}, {'end': 1087.118, 'text': 'Sharing is caring, and XD is all about sharing.', 'start': 1084.397, 'duration': 2.721}, {'end': 1089.76, 'text': 'And so we are in our prototype view right now.', 'start': 1087.158, 'duration': 2.602}], 'summary': 'Adobe xd is used to create large scale interactive prototypes and facilitate sharing with collaborators.', 'duration': 19.725, 'max_score': 1070.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI1070035.jpg'}, {'end': 1155.253, 'src': 'embed', 'start': 1127.632, 'weight': 4, 'content': [{'end': 1134.197, 'text': "It's gonna open up that prototype, and now people are able to go in and kind of view our prototype and click around and play with it.", 'start': 1127.632, 'duration': 6.565}, {'end': 1137.16, 'text': "They don't have to have an application to check it out.", 'start': 1134.477, 'duration': 2.683}, {'end': 1140.683, 'text': "They can just do it right here in the browser, and that's pretty nice.", 'start': 1137.2, 'duration': 3.483}, {'end': 1141.743, 'text': "Well, that's it.", 'start': 1141.283, 'duration': 0.46}, {'end': 1145.106, 'text': 'Those are the 10 things you need to know when you first open up Adobe XD.', 'start': 1141.783, 'duration': 3.323}, {'end': 1146.627, 'text': 'I hope you guys enjoyed the video.', 'start': 1145.146, 'duration': 1.481}, {'end': 1149.229, 'text': 'If you did, make sure to leave a thumbs up and subscribe to the channel.', 'start': 1146.727, 'duration': 2.502}, {'end': 1155.253, 'text': 'I do lots of videos about design and development and walkthroughs just like this one, so maybe stick around.', 'start': 1149.489, 'duration': 5.764}], 'summary': 'Adobe xd prototype now accessible in browser, 10 key features highlighted.', 'duration': 27.621, 'max_score': 1127.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI1127632.jpg'}], 'start': 550.958, 'title': 'Adobe xd features and basics', 'summary': 'Covers adobe xd features like repeatable grid, responsive resizing, and previewing designs. it also introduces basics of working with images, prototyping, and sharing, including techniques for easy prototyping and sharing options.', 'chapters': [{'end': 883.594, 'start': 550.958, 'title': 'Adobe xd features overview', 'summary': 'Covers adobe xd features including repeatable grid for speeding up design process, responsive resizing for intelligent stretching of design components, and previewing designs for effective prototyping and sharing.', 'duration': 332.636, 'highlights': ['The ability to repeat grids in Adobe XD speeds up the design process by allowing for easy duplication and editing of elements, reducing tedious tasks and enabling rapid prototyping. Repeatable grid feature in Adobe XD allows easy duplication and editing of elements, reducing tedious tasks and enabling rapid prototyping.', 'Responsive resizing in Adobe XD enables intelligent stretching of design components across different device sizes, with the ability to anchor elements, set fixed dimensions, and maintain responsive design across various artboards. Responsive resizing in Adobe XD enables intelligent stretching of design components, with the ability to anchor elements, set fixed dimensions, and maintain responsive design across various artboards.', 'Adobe XD provides two ways to preview designs, including a built-in previewer for live previewing and recording of interactions, as well as the option to preview designs on actual devices using the Adobe XD Viewer for effective prototyping and sharing. Adobe XD provides two ways to preview designs, including a built-in previewer for live previewing and recording of interactions, as well as the option to preview designs on actual devices using the Adobe XD Viewer for effective prototyping and sharing.']}, {'end': 1165.121, 'start': 883.634, 'title': 'Adobe xd basics & prototyping', 'summary': 'Introduces the basics of working with images, prototyping, and sharing in adobe xd, including techniques for working with images, easy prototyping with different triggers and transitions, and sharing options such as publishing prototypes with public links.', 'duration': 281.487, 'highlights': ['Adobe XD basics: Working with images The speaker explains the process of working with images in Adobe XD, including resizing, changing border radius, and using shapes to mask images, providing a simple and flexible method for image manipulation.', 'Prototyping in Adobe XD The chapter details the process of prototyping in Adobe XD, covering the easy creation of transitions with different triggers, support for timed transitions, and the ability to create large-scale interactive prototypes for sharing.', 'Sharing options in Adobe XD The speaker demonstrates the sharing options in Adobe XD, including publishing prototypes with public links, allowing comments and full-screen viewing, and providing the ability to share prototypes via browser links, enhancing collaboration and feedback.']}], 'duration': 614.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JttI6YpmPGI/pics/JttI6YpmPGI550958.jpg', 'highlights': ['Repeatable grid feature in Adobe XD allows easy duplication and editing of elements, reducing tedious tasks and enabling rapid prototyping.', 'Responsive resizing in Adobe XD enables intelligent stretching of design components, with the ability to anchor elements, set fixed dimensions, and maintain responsive design across various artboards.', 'Adobe XD provides two ways to preview designs, including a built-in previewer for live previewing and recording of interactions, as well as the option to preview designs on actual devices using the Adobe XD Viewer for effective prototyping and sharing.', 'The speaker explains the process of working with images in Adobe XD, including resizing, changing border radius, and using shapes to mask images, providing a simple and flexible method for image manipulation.', 'The chapter details the process of prototyping in Adobe XD, covering the easy creation of transitions with different triggers, support for timed transitions, and the ability to create large-scale interactive prototypes for sharing.', 'The speaker demonstrates the sharing options in Adobe XD, including publishing prototypes with public links, allowing comments and full-screen viewing, and providing the ability to share prototypes via browser links, enhancing collaboration and feedback.']}], 'highlights': ['XD is part of the Adobe suite focused on UI design, UX design, prototyping, and responsive web design.', 'XD is available for both Mac and PC with an Adobe CC subscription.', 'XD is a competitor to modern design tools like Sketch, Figma, and others.', 'DevMountain offers web development, iOS development, and UX design in a 13-week program, preparing individuals for new careers.', 'The video is sponsored by DevMountain, a bootcamp experience that offers on-campus and online programs.', 'Adobe XD provides tools for creating artboards for different devices, such as iPhone X, Android, and iPad, allowing easy resizing and movement of artboards.', 'The interface of Adobe XD includes a tools panel for shapes and lines, a layers and assets panel for managing design elements, and tabs for design and prototyping, providing a basic tour of the interface.', 'The pen tool in Adobe XD allows users to create custom shapes, add nodes, and manipulate bezier curves, offering control over the design elements.', 'Adobe XD enables the creation of reusable symbols and styles, allowing for the easy reuse of design elements such as colors, symbols, and character styles across the project.', 'Repeatable grid feature in Adobe XD allows easy duplication and editing of elements, reducing tedious tasks and enabling rapid prototyping.', 'Responsive resizing in Adobe XD enables intelligent stretching of design components, with the ability to anchor elements, set fixed dimensions, and maintain responsive design across various artboards.', 'Adobe XD provides two ways to preview designs, including a built-in previewer for live previewing and recording of interactions, as well as the option to preview designs on actual devices using the Adobe XD Viewer for effective prototyping and sharing.', 'The speaker explains the process of working with images in Adobe XD, including resizing, changing border radius, and using shapes to mask images, providing a simple and flexible method for image manipulation.', 'The chapter details the process of prototyping in Adobe XD, covering the easy creation of transitions with different triggers, support for timed transitions, and the ability to create large-scale interactive prototypes for sharing.', 'The speaker demonstrates the sharing options in Adobe XD, including publishing prototypes with public links, allowing comments and full-screen viewing, and providing the ability to share prototypes via browser links, enhancing collaboration and feedback.']}