title
Adobe XD Masterclass for Beginners (Updated 2023)

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. This master class will get you up and running with all basic and advanced features of Adobe XD... 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 give you everything you need to design websites and apps in Adobe XD. 🏆 //////////// Join my members community to get access to perks: You can get this starting and ending design file https://designchamps.io/ 👋 ////////// Join the Discord Server and meet other creatives https://discord.gg/XVDQ2gxsNv ------------------------------------------------------------------------------------ 🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship https://learn.jesseshowalter.com/ 👋 ////////// Follow me on Social Instagram: https://www.instagram.com/iamjesseshow Twitter: http://twitter.com/iamjesseshow 📫 ////////// Sign up for my Monthly Newsletter www.jesseshowalter.com/newsletter ------------------------------------------------------------------------------------ 🖥️ ////////// I build most of my websites using Webflow https://webflow.grsm.io/1976712 🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: https://fm.pxf.io/c/1372011/1347628/16252 📸 ////////// The Equipment I use https://www.amazon.com/shop/jesseshowaltertv 00:00 Introduction 00:35 UI Tour 06:48 Artboards 07:57 Pen Tool 08:47 Shapes 10:29 Pathfinder Tools 10:54 Text Tools 13:45 Styles & Assets 18:04 Components 20:04 Component States 21:35 Responsive Resize 24:52 Photos & Video 27:22 Masks 29:39 Repeat Grid 32:01 Stacks & Padding 34:43 Scroll Groups 36:58 Prototyping 41:28 Gestures & Actions 42:42 Timed Triggers 44:28 Plugins 45:57 Sharing #adobexd #adobexdtutorial

detail
{'title': 'Adobe XD Masterclass for Beginners (Updated 2023)', 'heatmap': [{'end': 907.693, 'start': 811.714, 'weight': 0.774}, {'end': 1170.224, 'start': 1072.276, 'weight': 0.98}, {'end': 1431.603, 'start': 1396.61, 'weight': 0.701}, {'end': 1839.113, 'start': 1773.584, 'weight': 0.73}, {'end': 1985.126, 'start': 1922.707, 'weight': 0.942}, {'end': 2104.488, 'start': 2040.057, 'weight': 0.714}, {'end': 2274.878, 'start': 2210.126, 'weight': 0.939}, {'end': 2395.01, 'start': 2359.224, 'weight': 0.779}, {'end': 2508.45, 'start': 2475.416, 'weight': 0.807}], 'summary': 'This adobe xd masterclass for beginners (updated 2023) covers a crash course on adobe xd 2023, interface overview, tutorial on using adobe xd, features and tools like polygon tool, typography options, component creation and states, video customization, prototyping, and animation.', 'chapters': [{'end': 282.475, 'segs': [{'end': 54.362, 'src': 'embed', 'start': 0.189, 'weight': 0, 'content': [{'end': 7.171, 'text': "What's up, everybody? I'm Jesse Showalter, and in this episode, I'm going to be doing a complete crash course, a total overview of Adobe XD.", 'start': 0.189, 'duration': 6.982}, {'end': 9.692, 'text': 'This is the 2023 revised edition.', 'start': 7.211, 'duration': 2.481}, {'end': 14.934, 'text': "We're going to cover all the latest and greatest features of Adobe XD, as well as all the basics.", 'start': 9.832, 'duration': 5.102}, {'end': 22.457, 'text': 'By the end of this video, you should know everything that you need to know to start using Adobe XD to design web applications, mobile applications,', 'start': 15.074, 'duration': 7.383}, {'end': 23.617, 'text': 'websites and more.', 'start': 22.457, 'duration': 1.16}, {'end': 28.159, 'text': "I'm really excited to get started and walk you through everything that has to do with Adobe XD.", 'start': 23.897, 'duration': 4.262}, {'end': 28.879, 'text': "Let's do it.", 'start': 28.539, 'duration': 0.34}, {'end': 35.243, 'text': "All right, let's jump in and learn about Adobe XD.", 'start': 32.841, 'duration': 2.402}, {'end': 37.606, 'text': 'You can see I have it open here on my desktop.', 'start': 35.263, 'duration': 2.343}, {'end': 42.11, 'text': 'It is available for both Mac and Windows, as long as you have an Adobe subscription.', 'start': 37.726, 'duration': 4.384}, {'end': 46.714, 'text': 'When we open up XD, we get our little welcome screen here, which has a couple of options.', 'start': 42.65, 'duration': 4.064}, {'end': 49.777, 'text': 'Of course, you can hit the big blue button to start a new file.', 'start': 46.855, 'duration': 2.922}, {'end': 54.362, 'text': 'You can also pick from different sizes or device sizes to give you a starting artboard.', 'start': 49.817, 'duration': 4.545}], 'summary': 'Jesse showalter provides a complete crash course on adobe xd, covering the latest features and basics for designing web and mobile applications in the 2023 revised edition.', 'duration': 54.173, 'max_score': 0.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg189.jpg'}, {'end': 118.23, 'src': 'embed', 'start': 87.992, 'weight': 4, 'content': [{'end': 91.836, 'text': 'If you have a track pad, you can also just kind of like track pad around like that.', 'start': 87.992, 'duration': 3.844}, {'end': 95.298, 'text': 'So that is an infinite canvas that you can zoom in and out of.', 'start': 92.596, 'duration': 2.702}, {'end': 98.28, 'text': "I'm holding down command plus or minus.", 'start': 95.358, 'duration': 2.922}, {'end': 100.721, 'text': "That'd be control plus or minus on the PC.", 'start': 98.3, 'duration': 2.421}, {'end': 105.744, 'text': 'Now we have all of our artboards that are on like our canvas.', 'start': 100.921, 'duration': 4.823}, {'end': 109.906, 'text': 'And each of those artboards are represented in our layers panel.', 'start': 106.404, 'duration': 3.502}, {'end': 113.909, 'text': 'Currently, our layers panel is showing each of those artboards, one, two, three, and four.', 'start': 109.967, 'duration': 3.942}, {'end': 118.23, 'text': 'And as I click on them, it highlights them over to the right, like you can see there.', 'start': 114.589, 'duration': 3.641}], 'summary': 'Using a trackpad, you can navigate an infinite canvas and zoom in and out of artboards by using command plus or minus. the artboards are represented in the layers panel, and clicking on them highlights them.', 'duration': 30.238, 'max_score': 87.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg87992.jpg'}, {'end': 188.969, 'src': 'embed', 'start': 128.931, 'weight': 5, 'content': [{'end': 134.694, 'text': 'And from there, you can just be working in that artboard itself and seeing all the layers inside.', 'start': 128.931, 'duration': 5.763}, {'end': 139.575, 'text': "But at any point, if you click on the canvas, it's going to kind of zoom you back out in the layers panel.", 'start': 134.734, 'duration': 4.841}, {'end': 142.699, 'text': 'that 10,000 foot view to all of the artboards themselves.', 'start': 140.115, 'duration': 2.584}, {'end': 143.74, 'text': "That's our canvas.", 'start': 143.039, 'duration': 0.701}, {'end': 146.003, 'text': "That's our layers panel to the left hand side here.", 'start': 143.78, 'duration': 2.223}, {'end': 147.285, 'text': "You're going to have the tools panel.", 'start': 146.023, 'duration': 1.262}, {'end': 148.466, 'text': "It's always going to be present.", 'start': 147.585, 'duration': 0.881}, {'end': 152.772, 'text': 'We have our direct selection tool, which is V on your keyboard.', 'start': 148.767, 'duration': 4.005}, {'end': 155.575, 'text': 'If you like hotkeys, you also have your rectangle tool.', 'start': 152.812, 'duration': 2.763}, {'end': 162.019, 'text': "That's our ellipse with E polygon, which will allow you to create lots of different shapes with multiple different sides.", 'start': 155.696, 'duration': 6.323}, {'end': 168.922, 'text': 'We have line, pen tool, text tool, artboard tool and our zoom tool at the very bottom.', 'start': 162.88, 'duration': 6.042}, {'end': 170.923, 'text': 'This is an important part of our interface.', 'start': 169.183, 'duration': 1.74}, {'end': 172.624, 'text': 'This is where we are currently at.', 'start': 171.224, 'duration': 1.4}, {'end': 174.965, 'text': 'We are in our layers view.', 'start': 172.704, 'duration': 2.261}, {'end': 177.226, 'text': 'These are the three different views of Adobe XD.', 'start': 175.025, 'duration': 2.201}, {'end': 180.547, 'text': 'By pressing command Y, we will see that layers view.', 'start': 177.886, 'duration': 2.661}, {'end': 183.447, 'text': 'It shows all artboards, objects, groups in our document.', 'start': 180.687, 'duration': 2.76}, {'end': 187.108, 'text': 'We can also jump over to the libraries view.', 'start': 184.048, 'duration': 3.06}, {'end': 188.969, 'text': "That's going to be command shift Y.", 'start': 187.228, 'duration': 1.741}], 'summary': 'Adobe xd interface has artboard, layers, and tools panel. hotkeys available for tools. different views accessible by hotkeys. layers view shows all artboards, objects, and groups in the document.', 'duration': 60.038, 'max_score': 128.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg128931.jpg'}, {'end': 291.18, 'src': 'embed', 'start': 264.651, 'weight': 8, 'content': [{'end': 268.452, 'text': 'We have our preview button, our desktop preview, which is going to be really helpful when we press that.', 'start': 264.651, 'duration': 3.801}, {'end': 273.933, 'text': "We get a preview of our prototype of our design with all the interactions that we'll talk about later.", 'start': 268.812, 'duration': 5.121}, {'end': 281.415, 'text': "And then we also have the percentage of how we're currently viewing it, and we can assign what percentage we want that view to be at.", 'start': 274.493, 'duration': 6.922}, {'end': 282.475, 'text': 'Maybe we want to view it at 50%.', 'start': 281.455, 'duration': 1.02}, {'end': 285.696, 'text': "It's going to zoom all of our artwork in and out.", 'start': 282.475, 'duration': 3.221}, {'end': 287.737, 'text': 'We have our contextual panel over here.', 'start': 286.096, 'duration': 1.641}, {'end': 291.18, 'text': "It's grayed out because we don't have anything contextually selected.", 'start': 287.797, 'duration': 3.383}], 'summary': 'The desktop preview button provides a prototype view with interactions and adjustable zoom percentages.', 'duration': 26.529, 'max_score': 264.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg264651.jpg'}], 'start': 0.189, 'title': 'Adobe xd interface and crash course', 'summary': 'Covers a crash course on adobe xd 2023, including all the latest features and an interface overview encompassing canvas, artboards, layers panel, tools panel, views, hotkeys, and functionalities.', 'chapters': [{'end': 70.855, 'start': 0.189, 'title': 'Adobe xd crash course 2023', 'summary': 'Provides a complete crash course on adobe xd, covering all the latest and greatest features, aimed at equipping the viewers with the knowledge to start designing web applications, mobile applications, websites, and more.', 'duration': 70.666, 'highlights': ['The chapter provides a complete crash course on Adobe XD. The video offers a comprehensive overview of Adobe XD, including all its latest features and basics.', 'By the end of this video, viewers should know everything they need to start using Adobe XD. The goal is to equip viewers with the knowledge to design web applications, mobile applications, websites, and more using Adobe XD.', 'Adobe XD is available for both Mac and Windows with an Adobe subscription. Adobe XD is accessible to users with Mac and Windows operating systems as long as they have an Adobe subscription.', 'The welcome screen in Adobe XD offers options to start a new file, pick from different sizes or device sizes, and access recent files. The welcome screen in Adobe XD provides various options, including starting a new file, choosing different sizes or device sizes, and accessing recent files for convenience.']}, {'end': 282.475, 'start': 71.055, 'title': 'Adobe xd interface overview', 'summary': 'Provides an overview of the adobe xd interface, including the canvas, artboards, layers panel, tools panel, and different views, along with essential hotkeys and functionalities.', 'duration': 211.42, 'highlights': ['The canvas is an infinite space for designing, zooming in and out using command plus or minus, or control plus or minus on PC. The canvas is an infinite space that allows zooming in and out using command plus or minus (or control plus or minus on PC).', 'The layers panel displays all artboards and allows drilling down into individual elements, offering a 10,000 foot view and the ability to zoom back out to the artboards. The layers panel displays all artboards and enables drilling down into individual elements, providing a 10,000 foot view and the ability to zoom back out to the artboards.', 'The tools panel includes essential tools like the direct selection, rectangle, ellipse, polygon, line, pen, text, artboard, and zoom tools, with corresponding hotkeys for quick access. The tools panel includes essential tools like the direct selection, rectangle, ellipse, polygon, line, pen, text, artboard, and zoom tools, with corresponding hotkeys for quick access.', 'Adobe XD has three different views: layers, libraries, and plugins, accessible through specific hotkeys for efficient navigation. Adobe XD has three different views: layers, libraries, and plugins, accessible through specific hotkeys for efficient navigation.', 'The interface also features a device preview, desktop preview, and percentage adjustment for viewing designs and prototypes. The interface also features a device preview, desktop preview, and percentage adjustment for viewing designs and prototypes.']}], 'duration': 282.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg189.jpg', 'highlights': ['The chapter provides a complete crash course on Adobe XD, covering all its latest features and basics.', 'By the end of this video, viewers should know everything they need to start using Adobe XD for designing web applications, mobile applications, websites, and more.', 'Adobe XD is available for both Mac and Windows with an Adobe subscription, accessible to users with Mac and Windows operating systems.', 'The welcome screen in Adobe XD offers options to start a new file, pick from different sizes or device sizes, and access recent files for convenience.', 'The canvas is an infinite space that allows zooming in and out using command plus or minus (or control plus or minus on PC).', 'The layers panel displays all artboards and enables drilling down into individual elements, providing a 10,000 foot view and the ability to zoom back out to the artboards.', 'The tools panel includes essential tools like the direct selection, rectangle, ellipse, polygon, line, pen, text, artboard, and zoom tools, with corresponding hotkeys for quick access.', 'Adobe XD has three different views: layers, libraries, and plugins, accessible through specific hotkeys for efficient navigation.', 'The interface also features a device preview, desktop preview, and percentage adjustment for viewing designs and prototypes.']}, {'end': 555.251, 'segs': [{'end': 318.099, 'src': 'embed', 'start': 282.475, 'weight': 2, 'content': [{'end': 285.696, 'text': "It's going to zoom all of our artwork in and out.", 'start': 282.475, 'duration': 3.221}, {'end': 287.737, 'text': 'We have our contextual panel over here.', 'start': 286.096, 'duration': 1.641}, {'end': 291.18, 'text': "It's grayed out because we don't have anything contextually selected.", 'start': 287.797, 'duration': 3.383}, {'end': 298.845, 'text': "So once we select something, we get all sorts of options and they will contextually change depending on what you're currently selecting.", 'start': 291.24, 'duration': 7.605}, {'end': 304.849, 'text': "So if I'm selecting an image like this, we're going to get a lot of image options over here on the right hand side.", 'start': 298.905, 'duration': 5.944}, {'end': 309.052, 'text': "You're always going to get some like your distribution and your alignment tools.", 'start': 304.869, 'duration': 4.183}, {'end': 315.237, 'text': 'You have your Boolean operations like adding, subtracting, dividing things, just like you would in Illustrator.', 'start': 309.432, 'duration': 5.805}, {'end': 318.099, 'text': 'We have some special features like repeat grids and components.', 'start': 315.557, 'duration': 2.542}], 'summary': 'Adobe xd offers contextual options for artwork, including image tools, distribution and alignment tools, boolean operations, repeat grids, and components.', 'duration': 35.624, 'max_score': 282.475, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg282475.jpg'}, {'end': 413.766, 'src': 'embed', 'start': 387.721, 'weight': 3, 'content': [{'end': 394.983, 'text': "we also have an effects panel down below, when they are relevant, and you'll see even more things pop up as we start to click on components,", 'start': 387.721, 'duration': 7.262}, {'end': 398.503, 'text': 'and components that have states and things that have to do with video.', 'start': 394.983, 'duration': 3.52}, {'end': 403.404, 'text': "other things will surface in that contextual panel and we'll talk about it as we go next up.", 'start': 398.503, 'duration': 4.901}, {'end': 405.985, 'text': "let's take a look at these things we've already kind of talked about.", 'start': 403.404, 'duration': 2.581}, {'end': 407.305, 'text': 'these are artboards.', 'start': 405.985, 'duration': 1.32}, {'end': 408.285, 'text': 'how do we draw new ones?', 'start': 407.305, 'duration': 0.98}, {'end': 413.766, 'text': 'well, we would either select the artboard tool over here by or we could press the hot key of a.', 'start': 408.285, 'duration': 5.481}], 'summary': 'The interface features contextual panels for different components, such as artboards, with options to draw new ones using a tool or hotkey.', 'duration': 26.045, 'max_score': 387.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg387721.jpg'}, {'end': 511.243, 'src': 'embed', 'start': 479.303, 'weight': 1, 'content': [{'end': 482.224, 'text': 'Really very similar, pretty much identical to the pen tool.', 'start': 479.303, 'duration': 2.921}, {'end': 489.207, 'text': "You'll find an illustrator or Photoshop creating Bezier curves with it coming around and then connecting.", 'start': 482.524, 'duration': 6.683}, {'end': 492.629, 'text': 'And then you do have some options inside there as well.', 'start': 490.248, 'duration': 2.381}, {'end': 495.01, 'text': 'You can click on any of these and mess with the handles.', 'start': 492.669, 'duration': 2.341}, {'end': 498.533, 'text': "and change the shape like so and then, once you've done that,", 'start': 495.59, 'duration': 2.943}, {'end': 503.377, 'text': 'obviously we can fill it with a color maybe we want like a really obnoxious purple color.', 'start': 498.533, 'duration': 4.844}, {'end': 511.243, 'text': 'we can take the border on or off and we can even start applying some of these effects, like an inner shadow or drop shadow.', 'start': 503.377, 'duration': 7.866}], 'summary': 'Using the bezier curves tool in illustrator or photoshop to create shapes, with options to modify and apply effects.', 'duration': 31.94, 'max_score': 479.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg479303.jpg'}, {'end': 543.065, 'src': 'embed', 'start': 518.349, 'weight': 0, 'content': [{'end': 524.913, 'text': "And then once we've done that, we might want a little bit more of a structured shape, not such a weird, crazy pink shape.", 'start': 518.349, 'duration': 6.564}, {'end': 528.215, 'text': "So what we'll do instead is I'm going to hit R for rectangle.", 'start': 524.953, 'duration': 3.262}, {'end': 533.659, 'text': 'You could have also gone up and hit your rectangle tool, but R for rectangle is pretty easy to remember.', 'start': 528.255, 'duration': 5.404}, {'end': 539.543, 'text': "I'm going to drag, holding down shift, a perfectly constrained square out.", 'start': 534.019, 'duration': 5.524}, {'end': 543.065, 'text': 'Or if I let go of shift, we can shape that any way we want it.', 'start': 539.723, 'duration': 3.342}], 'summary': 'Using the r key, create a structured square in the design tool.', 'duration': 24.716, 'max_score': 518.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg518349.jpg'}], 'start': 282.475, 'title': 'Adobe xd interface and tutorial', 'summary': 'Covers the interface overview of adobe xd, including contextual panel options, image manipulation tools, special features like repeat grids and components, along with a tutorial on using adobe xd covering the use of pen tool, creation of custom shapes, and application of effects and colors.', 'chapters': [{'end': 369.895, 'start': 282.475, 'title': 'Adobe xd interface overview', 'summary': 'Covers the interface overview of adobe xd, including contextual panel options, image manipulation tools, special features like repeat grids and components, and various design elements such as layout options and gradient fill capabilities.', 'duration': 87.42, 'highlights': ['The contextual panel provides various options that change depending on the selected item, including image manipulation tools, Boolean operations, special features like repeat grids and components, and helpful dialog boxes for additional information.', 'The interface includes transform controls, flip options, scroll groups, layout options, and appearance elements such as opacity, fill, border, and blending modes, similar to Photoshop or Illustrator.', 'Design elements like fill, border, and color options can be customized, including the ability to use linear gradients, radial gradients, angular gradients, and drop images within them.']}, {'end': 440.223, 'start': 370.215, 'title': 'Adobe xd contextual panel and artboard tool', 'summary': 'Introduces the adobe xd contextual panel that allows users to modify border sizes and types for elements, along with the artboard tool offering various device sizes for designing, and relevant options pop up as different components are clicked.', 'duration': 70.008, 'highlights': ['The contextual panel in Adobe XD allows users to modify border sizes and types for elements, as well as the thickness and type of border ends, providing a range of options for customization. Border thickness and type customization', 'The artboard tool in Adobe XD provides various device sizes including mobile, tablet, desktop, and social media, allowing users to easily select and draw artboards of their choice. Variety of device sizes available', 'Relevant options pop up in the contextual panel as different components are clicked, providing a dynamic and contextually relevant user experience for design customization. Dynamic contextual options']}, {'end': 555.251, 'start': 440.223, 'title': 'Adobe xd tutorial', 'summary': 'Provides a tutorial on using adobe xd, covering the use of pen tool, creation of custom shapes, and application of effects and colors, with hotkeys and specific tool functionalities highlighted.', 'duration': 115.028, 'highlights': ['The chapter covers the use of the pen tool for creating custom shapes and Bezier curves, with options to modify the shape and apply colors and effects.', "Hotkeys for accessing tools and functionalities, such as 'P' for pen tool and 'R' for rectangle, are demonstrated for efficient workflow.", 'Demonstrates the application of effects like inner shadow, drop shadow, background blur, and object blur to enhance the design.', "Detailed explanation of using specific hotkeys such as 'Command plus' for zooming in, and the functionality of holding down 'Z' for accessing the zoom tool.", "The tutorial emphasizes the creation of structured shapes using the rectangle tool, with the option to constrain the shape by holding down 'shift', and customize the shape and color."]}], 'duration': 272.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg282475.jpg', 'highlights': ["The tutorial emphasizes the creation of structured shapes using the rectangle tool, with the option to constrain the shape by holding down 'shift', and customize the shape and color.", 'The chapter covers the use of the pen tool for creating custom shapes and Bezier curves, with options to modify the shape and apply colors and effects.', 'The contextual panel provides various options that change depending on the selected item, including image manipulation tools, Boolean operations, special features like repeat grids and components, and helpful dialog boxes for additional information.', 'Relevant options pop up in the contextual panel as different components are clicked, providing a dynamic and contextually relevant user experience for design customization.', 'The interface includes transform controls, flip options, scroll groups, layout options, and appearance elements such as opacity, fill, border, and blending modes, similar to Photoshop or Illustrator.']}, {'end': 1071.896, 'segs': [{'end': 667.938, 'src': 'embed', 'start': 639.048, 'weight': 0, 'content': [{'end': 641.368, 'text': 'It holds on to each of the individual shapes.', 'start': 639.048, 'duration': 2.32}, {'end': 645.71, 'text': "So it's all still very editable, which is really, really cool inside of Adobe XD.", 'start': 641.729, 'duration': 3.981}, {'end': 647.81, 'text': 'Add some text to our design.', 'start': 645.97, 'duration': 1.84}, {'end': 653.212, 'text': 'To do that, we could hit the text tool in our tool panel over here or just press T.', 'start': 648.351, 'duration': 4.861}, {'end': 658.834, 'text': 'Now you can either just click and this will allow you to start writing text onto the screen.', 'start': 653.212, 'duration': 5.622}, {'end': 664.296, 'text': "And we'd probably want to make our text a little bit better of a color.", 'start': 659.674, 'duration': 4.622}, {'end': 667.938, 'text': "And to do that, we'll just use our selection tool and make it black like so.", 'start': 664.496, 'duration': 3.442}], 'summary': 'Adobe xd allows easy editing and text addition with the selection tool and text tool.', 'duration': 28.89, 'max_score': 639.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg639048.jpg'}, {'end': 780.746, 'src': 'embed', 'start': 752.849, 'weight': 1, 'content': [{'end': 760.253, 'text': 'double click that and expands to the perfect height of the text and transfers it to becoming a auto height text box.', 'start': 752.849, 'duration': 7.404}, {'end': 762.054, 'text': 'And so those are your three types of text box.', 'start': 760.293, 'duration': 1.761}, {'end': 765.877, 'text': 'You have your auto width, auto height and your fixed size.', 'start': 762.455, 'duration': 3.422}, {'end': 775.203, 'text': 'Once we have put text on the page, you can actually choose all the different typography you have installed, selecting it through there.', 'start': 766.757, 'duration': 8.446}, {'end': 780.746, 'text': "You don't have visible or visual previews quite yet in XD, but I'm sure those are coming at some point.", 'start': 775.243, 'duration': 5.503}], 'summary': 'Adobe xd offers three types of text boxes: auto width, auto height, and fixed size, with the ability to select different typography options.', 'duration': 27.897, 'max_score': 752.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg752849.jpg'}, {'end': 907.693, 'src': 'heatmap', 'start': 811.714, 'weight': 0.774, 'content': [{'end': 817.157, 'text': "Any of these little areas you'll see on pen tools like points that you make or text boxes.", 'start': 811.714, 'duration': 5.443}, {'end': 822.34, 'text': "These are called nodes and they're going to come into play a lot throughout the rest of this tutorial.", 'start': 817.437, 'duration': 4.903}, {'end': 826.67, 'text': "All right, let's move into some more advanced functions and features inside of Adobe XD.", 'start': 822.568, 'duration': 4.102}, {'end': 828.911, 'text': "And let's start with styles.", 'start': 826.77, 'duration': 2.141}, {'end': 831.573, 'text': 'We are currently in our layer view.', 'start': 829.452, 'duration': 2.121}, {'end': 833.654, 'text': "That's Command Y.", 'start': 831.893, 'duration': 1.761}, {'end': 837.836, 'text': 'But if we press Command Shift Y, we can actually jump over to our document assets.', 'start': 833.654, 'duration': 4.182}, {'end': 841.378, 'text': "I'm going to zoom into my document assets so we can kind of see them.", 'start': 837.876, 'duration': 3.502}, {'end': 843.14, 'text': "and i don't really have much.", 'start': 841.838, 'duration': 1.302}, {'end': 849.466, 'text': "i do have a component, which we'll talk about in a little bit, but i don't have any videos or character styles or colors.", 'start': 843.14, 'duration': 6.326}, {'end': 855.552, 'text': 'these are all things that we can actually create assets out of, store them here in our document assets.', 'start': 849.466, 'duration': 6.086}, {'end': 859.936, 'text': "that way we're reusing the same styles, the same colors over and over and over.", 'start': 855.552, 'duration': 4.384}, {'end': 864.12, 'text': "so, for instance, i could zoom out and uh, let's find like.", 'start': 859.936, 'duration': 4.184}, {'end': 866.141, 'text': "for instance, let's find this yellow.", 'start': 864.12, 'duration': 2.021}, {'end': 866.941, 'text': "that's a good yellow.", 'start': 866.141, 'duration': 0.8}, {'end': 874.922, 'text': 'we have that like in our fill right here and you can, if you want, uh, just add like a little swatch inside of your like color swatch picker thing.', 'start': 866.941, 'duration': 7.981}, {'end': 882.284, 'text': "but you know that's not really as productive or efficient as if you had that thing selected, that shape selected,", 'start': 874.922, 'duration': 7.362}, {'end': 886.185, 'text': 'that had that color fill and you just head up here and press the plus button.', 'start': 882.284, 'duration': 3.901}, {'end': 887.385, 'text': "it's going to add that fill.", 'start': 886.185, 'duration': 1.2}, {'end': 895.148, 'text': "so later on, if we hit r for rectangle and we're drawing maybe like a shape of some sort, we can come in here and right click and say, hey,", 'start': 887.745, 'duration': 7.403}, {'end': 896.588, 'text': 'apply this to the fill.', 'start': 895.148, 'duration': 1.44}, {'end': 897.689, 'text': 'and now we have.', 'start': 896.588, 'duration': 1.101}, {'end': 903.311, 'text': 'we have effectively created what css does inside of front-end code.', 'start': 897.689, 'duration': 5.622}, {'end': 907.693, 'text': 'we were able to cascade the styles throughout the rest of our design.', 'start': 903.311, 'duration': 4.382}], 'summary': 'Adobe xd tutorial covers creating and reusing document assets for efficient design, including styles and colors.', 'duration': 95.979, 'max_score': 811.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg811714.jpg'}, {'end': 874.922, 'src': 'embed', 'start': 849.466, 'weight': 3, 'content': [{'end': 855.552, 'text': 'these are all things that we can actually create assets out of, store them here in our document assets.', 'start': 849.466, 'duration': 6.086}, {'end': 859.936, 'text': "that way we're reusing the same styles, the same colors over and over and over.", 'start': 855.552, 'duration': 4.384}, {'end': 864.12, 'text': "so, for instance, i could zoom out and uh, let's find like.", 'start': 859.936, 'duration': 4.184}, {'end': 866.141, 'text': "for instance, let's find this yellow.", 'start': 864.12, 'duration': 2.021}, {'end': 866.941, 'text': "that's a good yellow.", 'start': 866.141, 'duration': 0.8}, {'end': 874.922, 'text': 'we have that like in our fill right here and you can, if you want, uh, just add like a little swatch inside of your like color swatch picker thing.', 'start': 866.941, 'duration': 7.981}], 'summary': 'Create reusable assets and colors for efficient design.', 'duration': 25.456, 'max_score': 849.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg849466.jpg'}, {'end': 963.526, 'src': 'embed', 'start': 934.223, 'weight': 5, 'content': [{'end': 936.824, 'text': "it's going to change it across my entire project.", 'start': 934.223, 'duration': 2.601}, {'end': 940.406, 'text': 'Now, this is really helpful when I start designing applications and websites.', 'start': 936.864, 'duration': 3.542}, {'end': 948.153, 'text': "and I have five, 10, 80, 150 screens inside of my project, I don't wanna go through and change the color one by one.", 'start': 940.746, 'duration': 7.407}, {'end': 955.379, 'text': 'I wanna be able to assign that color with this kind of global variable up here, change it once and see it changed everywhere.', 'start': 948.493, 'duration': 6.886}, {'end': 958.602, 'text': "Let's put our yellow back and you can see everything goes back to normal.", 'start': 955.399, 'duration': 3.203}, {'end': 959.202, 'text': 'Pretty cool.', 'start': 958.662, 'duration': 0.54}, {'end': 960.804, 'text': 'We like that quite a bit.', 'start': 959.523, 'duration': 1.281}, {'end': 963.526, 'text': "Let's do the same thing here with our black background.", 'start': 961.064, 'duration': 2.462}], 'summary': 'Global variable allows easy color changes across 5, 10, 80, 150 screens, enhancing efficiency and consistency.', 'duration': 29.303, 'max_score': 934.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg934223.jpg'}, {'end': 1081.14, 'src': 'embed', 'start': 1053.743, 'weight': 6, 'content': [{'end': 1060.168, 'text': "It's our headline, because our headline is it's pulling the color of white into that style, but we're just overwriting it like this", 'start': 1053.743, 'duration': 6.425}, {'end': 1062.55, 'text': "That doesn't actually change our headline style.", 'start': 1060.228, 'duration': 2.322}, {'end': 1065.192, 'text': "But if we select body, it's going to make it white.", 'start': 1062.991, 'duration': 2.201}, {'end': 1071.215, 'text': "Headline again, it's gonna revert back to the master style that's inside of our assets panel.", 'start': 1066.353, 'duration': 4.862}, {'end': 1071.896, 'text': "So that's pretty cool.", 'start': 1071.235, 'duration': 0.661}, {'end': 1081.14, 'text': "So we can actually hold onto styles and then kind of iterate on them on the fly without messing up our entire system that we're building over here.", 'start': 1072.276, 'duration': 8.864}], 'summary': 'Iterating on styles without disrupting system, maintaining design consistency.', 'duration': 27.397, 'max_score': 1053.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1053743.jpg'}], 'start': 555.251, 'title': 'Adobe xd features and tools', 'summary': 'Covers the use of polygon tool to create adjustable shapes, different text boxes, and typography options in adobe xd, as well as advanced features such as document assets for reusing styles and colors, and global variables for efficient color changes.', 'chapters': [{'end': 794.798, 'start': 555.251, 'title': 'Using polygon and text tools in adobe xd', 'summary': 'Demonstrates how to use the polygon tool to create shapes with adjustable parameters like sides and corners, and then explains the different types of text boxes and typography options available in adobe xd.', 'duration': 239.547, 'highlights': ['The polygon tool allows for creating shapes with adjustable parameters like sides and corners, providing the flexibility to customize the shape as desired. The polygon tool in Adobe XD allows users to change the amount of sides, soften the edges, and adjust the inside shapes, providing a high level of customization.', 'The tutorial explains the different types of text boxes available in Adobe XD, including auto width, auto height, and fixed size, and demonstrates how to handle text overflow and manipulate text box sizes. The tutorial explains the distinctions between auto width, auto height, and fixed size text boxes, and provides a solution for handling text overflow by double-clicking to expand the box to fit the text perfectly.', 'The tutorial also covers typography options, including the ability to choose different fonts, sizes, weights, and adjust character spacing, line height, and paragraph justification. The tutorial demonstrates the variety of typography options available in Adobe XD, including font selection, size adjustments, character spacing, line height, and paragraph justification.']}, {'end': 1071.896, 'start': 794.798, 'title': 'Adobe xd advanced features', 'summary': 'Covers advanced features of adobe xd, including the use of document assets for reusing styles and colors, and the application of global variables for efficient color changes across the entire project.', 'duration': 277.098, 'highlights': ['The use of document assets allows for reusing the same styles and colors across the entire project, increasing productivity and efficiency.', 'Applying styles to shapes using the document assets panel enables the cascading of styles throughout the design, similar to the functionality of CSS in front-end code.', 'The ability to assign colors as global variables in the assets panel allows for efficient changes across multiple screens in applications and websites, reducing the need to manually update colors individually.', 'The feature of overriding styles while maintaining the master style in the assets panel provides flexibility in design customization and management.']}], 'duration': 516.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg555251.jpg', 'highlights': ['The polygon tool in Adobe XD allows users to change the amount of sides, soften the edges, and adjust the inside shapes, providing a high level of customization.', 'The tutorial explains the distinctions between auto width, auto height, and fixed size text boxes, and provides a solution for handling text overflow by double-clicking to expand the box to fit the text perfectly.', 'The tutorial demonstrates the variety of typography options available in Adobe XD, including font selection, size adjustments, character spacing, line height, and paragraph justification.', 'The use of document assets allows for reusing the same styles and colors across the entire project, increasing productivity and efficiency.', 'Applying styles to shapes using the document assets panel enables the cascading of styles throughout the design, similar to the functionality of CSS in front-end code.', 'The ability to assign colors as global variables in the assets panel allows for efficient changes across multiple screens in applications and websites, reducing the need to manually update colors individually.', 'The feature of overriding styles while maintaining the master style in the assets panel provides flexibility in design customization and management.']}, {'end': 1716.658, 'segs': [{'end': 1170.224, 'src': 'heatmap', 'start': 1072.276, 'weight': 0.98, 'content': [{'end': 1081.14, 'text': "So we can actually hold onto styles and then kind of iterate on them on the fly without messing up our entire system that we're building over here.", 'start': 1072.276, 'duration': 8.864}, {'end': 1083.04, 'text': 'So those are our styles.', 'start': 1081.88, 'duration': 1.16}, {'end': 1089.223, 'text': "Now let's talk a little bit about components because you can see I do actually have a component built in here called Card.", 'start': 1083.14, 'duration': 6.083}, {'end': 1091.043, 'text': "But let's do something a little bit simpler.", 'start': 1089.503, 'duration': 1.54}, {'end': 1094.604, 'text': "Let's say I really like this button that I have inside here.", 'start': 1091.103, 'duration': 3.501}, {'end': 1096.925, 'text': "I'm going to press Command Y to go back to my layers.", 'start': 1094.624, 'duration': 2.301}, {'end': 1103.168, 'text': "And you can see I have a little folder here It has a little plus icon and the ellipse and it's wrapped inside.", 'start': 1097.325, 'duration': 5.843}, {'end': 1107.19, 'text': 'I just grouped it in a folder by pressing Command G to turn it into a button.', 'start': 1103.208, 'duration': 3.982}, {'end': 1115.674, 'text': 'I really, really want to turn this into a component so that I can reuse that component, that one single component over and over.', 'start': 1107.47, 'duration': 8.204}, {'end': 1123.979, 'text': "So if I make changes, just like in my colors or my text to that single master instance of that component, it's going to apply it everywhere.", 'start': 1115.794, 'duration': 8.185}, {'end': 1124.879, 'text': 'So how do I do that?', 'start': 1124.019, 'duration': 0.86}, {'end': 1134.405, 'text': 'Well, I can right click on it and if i want to, i can turn it into a component, or i can just hit the hotkey for that, which is command k.', 'start': 1125.199, 'duration': 9.206}, {'end': 1137.146, 'text': "so i've turned my button into a component.", 'start': 1134.405, 'duration': 2.741}, {'end': 1142.49, 'text': 'i can right click on it again and you can see i i want to now edit the main component.', 'start': 1137.146, 'duration': 5.344}, {'end': 1145.432, 'text': "it's, it's gone ahead and created a component and hidden it somewhere.", 'start': 1142.49, 'duration': 2.942}, {'end': 1150.434, 'text': 'now this is Very important to note that when you have a main component, a master component,', 'start': 1145.432, 'duration': 5.002}, {'end': 1153.856, 'text': "we're going to have a little filled green diamond as one of the nodes.", 'start': 1150.434, 'duration': 3.422}, {'end': 1157.078, 'text': 'That dictates that this is the master instance.', 'start': 1153.936, 'duration': 3.142}, {'end': 1163.261, 'text': 'Any changes made to this master component is going to change it everywhere.', 'start': 1157.238, 'duration': 6.023}, {'end': 1170.224, 'text': "So that means if I come in and I take my plus and I turn it into an X, look at that, it's going to change it everywhere.", 'start': 1163.301, 'duration': 6.923}], 'summary': 'Creating and utilizing components for efficient design iteration and reuse.', 'duration': 97.948, 'max_score': 1072.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1072276.jpg'}, {'end': 1134.405, 'src': 'embed', 'start': 1107.47, 'weight': 0, 'content': [{'end': 1115.674, 'text': 'I really, really want to turn this into a component so that I can reuse that component, that one single component over and over.', 'start': 1107.47, 'duration': 8.204}, {'end': 1123.979, 'text': "So if I make changes, just like in my colors or my text to that single master instance of that component, it's going to apply it everywhere.", 'start': 1115.794, 'duration': 8.185}, {'end': 1124.879, 'text': 'So how do I do that?', 'start': 1124.019, 'duration': 0.86}, {'end': 1134.405, 'text': 'Well, I can right click on it and if i want to, i can turn it into a component, or i can just hit the hotkey for that, which is command k.', 'start': 1125.199, 'duration': 9.206}], 'summary': 'Desire to create reusable component, streamline changes with hotkey.', 'duration': 26.935, 'max_score': 1107.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1107470.jpg'}, {'end': 1247.785, 'src': 'embed', 'start': 1224.494, 'weight': 2, 'content': [{'end': 1232.018, 'text': "OK, so you can see we're currently on our main component and it has a default state, right? We can add a new state.", 'start': 1224.494, 'duration': 7.524}, {'end': 1235.36, 'text': "And later on, we'll talk about when we create these component states.", 'start': 1232.658, 'duration': 2.702}, {'end': 1241.222, 'text': 'Some of these are built in prototype triggers, right? So to hover over it, to tap it and toggle it.', 'start': 1235.54, 'duration': 5.682}, {'end': 1242.123, 'text': "But let's just go.", 'start': 1241.502, 'duration': 0.621}, {'end': 1244.944, 'text': "Well, actually, let's go and experiment with it a little bit right now.", 'start': 1242.143, 'duration': 2.801}, {'end': 1247.785, 'text': "Instead of creating a new state, we'll create a toggle state.", 'start': 1244.984, 'duration': 2.801}], 'summary': 'Discussion on creating and experimenting with component states and prototype triggers.', 'duration': 23.291, 'max_score': 1224.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1224494.jpg'}, {'end': 1322.576, 'src': 'embed', 'start': 1286.926, 'weight': 1, 'content': [{'end': 1289.127, 'text': 'One component doing multiple things.', 'start': 1286.926, 'duration': 2.201}, {'end': 1290.989, 'text': 'Super mind blowing, super fun.', 'start': 1289.408, 'duration': 1.581}, {'end': 1293.611, 'text': "So that's components and component states.", 'start': 1291.009, 'duration': 2.602}, {'end': 1301.118, 'text': "All right, let's talk a little bit about responsive resizing, because we have our layout here and we want things to actually flex and move,", 'start': 1293.891, 'duration': 7.227}, {'end': 1304.32, 'text': 'potentially as our artboard kind of grows.', 'start': 1301.118, 'duration': 3.202}, {'end': 1311.967, 'text': "Right now, if I kind of pull my artboard and imagine, like this being a device with maybe a larger device or a browser that's kind of stretching,", 'start': 1304.4, 'duration': 7.567}, {'end': 1314.97, 'text': 'this is not really playing nicely or responsively.', 'start': 1311.967, 'duration': 3.003}, {'end': 1316.872, 'text': "So let's go ahead and press Command Z and go back.", 'start': 1315.07, 'duration': 1.802}, {'end': 1322.576, 'text': 'First thing we want to do is go to our artboard and actually turn on the toggle that says responsive resize.', 'start': 1317.392, 'duration': 5.184}], 'summary': 'Discussion on making components responsive for better flex and movement.', 'duration': 35.65, 'max_score': 1286.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1286926.jpg'}, {'end': 1431.603, 'src': 'heatmap', 'start': 1396.61, 'weight': 0.701, 'content': [{'end': 1399.832, 'text': 'OK, we want to stretch the left and the right as well like this.', 'start': 1396.61, 'duration': 3.222}, {'end': 1407.661, 'text': 'What happens now when I grab my artboard? and I start actually stretching it out is my text actually stretches.', 'start': 1400.233, 'duration': 7.428}, {'end': 1411.866, 'text': 'The boxes are now officially set to be auto height.', 'start': 1408.101, 'duration': 3.765}, {'end': 1417.954, 'text': "And so that means that they're going to ebb and flow along with my box and nothing's going to get too weird.", 'start': 1412.186, 'duration': 5.768}, {'end': 1420.556, 'text': 'It actually kind of perfectly kind of changes.', 'start': 1417.994, 'duration': 2.562}, {'end': 1424.599, 'text': "So maybe we have like a really small iPhone there and maybe we're moving out to a larger one.", 'start': 1420.596, 'duration': 4.003}, {'end': 1431.603, 'text': "Now you'll notice, as soon as I started, kind of like moving past the size that was initially set for this device size,", 'start': 1424.639, 'duration': 6.964}], 'summary': 'Text and boxes stretch along with artboard, adapting to different device sizes.', 'duration': 34.993, 'max_score': 1396.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1396610.jpg'}, {'end': 1531.009, 'src': 'embed', 'start': 1503.136, 'weight': 5, 'content': [{'end': 1507.879, 'text': 'I can grab an image that I want to bring in and I can do a few things.', 'start': 1503.136, 'duration': 4.743}, {'end': 1514.342, 'text': 'I could just drag one onto the artboard and now I have an image to play with, or I could drag an image and I can actually hover over the shape.', 'start': 1507.919, 'duration': 6.423}, {'end': 1518.784, 'text': 'Dropping it in will immediately crop that image into place.', 'start': 1514.822, 'duration': 3.962}, {'end': 1526.787, 'text': "So now when I actually stretch my image around, it's trying to fill that shape and constrain it nicely.", 'start': 1519.104, 'duration': 7.683}, {'end': 1531.009, 'text': 'So we might want to actually give our model a little bit more space here.', 'start': 1526.887, 'duration': 4.122}], 'summary': 'Dragging and dropping an image onto the artboard immediately crops and fills the shape, allowing for easy manipulation and resizing.', 'duration': 27.873, 'max_score': 1503.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1503136.jpg'}, {'end': 1703.325, 'src': 'embed', 'start': 1676.081, 'weight': 6, 'content': [{'end': 1679.504, 'text': 'And when I do that, I now have a manually created mask.', 'start': 1676.081, 'duration': 3.423}, {'end': 1684.988, 'text': 'That means I can click into it and I can move my image around a little bit and mask it.', 'start': 1679.864, 'duration': 5.124}, {'end': 1688.37, 'text': 'I could make it larger if I want and do a little bit of art direction.', 'start': 1685.048, 'duration': 3.322}, {'end': 1689.371, 'text': 'Maybe we like it like that.', 'start': 1688.41, 'duration': 0.961}, {'end': 1694.496, 'text': "But now we have a video that is cropped and masked, and I'm able to kind of work inside of that mask.", 'start': 1689.771, 'duration': 4.725}, {'end': 1699.862, 'text': 'If you want to get rid of the mask, you just right-click and say Ungroup Mask, and it will take care of that for you.', 'start': 1694.536, 'duration': 5.326}, {'end': 1703.325, 'text': "Let's remove our image and bring our video into play.", 'start': 1700.222, 'duration': 3.103}], 'summary': 'The process allows manual creation of a mask for image manipulation and video cropping.', 'duration': 27.244, 'max_score': 1676.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1676081.jpg'}], 'start': 1072.276, 'title': 'Adobe xd design features', 'summary': 'Covers component creation and states in adobe xd, highlighting the ability to create reusable components, multiple states, and prototype interactions. it also discusses responsive resizing, individual element settings, and photo/video integration in adobe xd.', 'chapters': [{'end': 1286.385, 'start': 1072.276, 'title': 'Component states in adobe xd', 'summary': 'Discusses the creation of components and their states in adobe xd, highlighting the ability to turn elements into reusable components, create multiple states within a component, and apply prototype interactions, allowing for efficient and versatile design.', 'duration': 214.109, 'highlights': ['The ability to turn elements into reusable components allows for efficient design, enabling changes made to the master component to be applied everywhere, increasing design consistency and productivity.', 'Creating multiple states within a component, such as toggling from a plus to an X, enhances the versatility and interactive potential of the design, providing a seamless user experience.', 'Applying prototype interactions, like toggling between different states, enables the incorporation of dynamic functionalities, enhancing the usability and engagement of the design.', 'The feature of adding multiple states to a single component streamlines the design process, reducing the need to create separate components for different states and promoting cohesive design workflows.']}, {'end': 1716.658, 'start': 1286.926, 'title': 'Responsive resizing & media integration', 'summary': 'Discusses responsive resizing in adobe xd, demonstrating how to enable it and adjust individual element settings for text boxes and images. it also covers photo and video integration, including the use of shapes to constrain images and manual masking for videos.', 'duration': 429.732, 'highlights': ['The demonstration of enabling and adjusting individual element settings for responsive resizing in Adobe XD. The speaker explains the process of enabling responsive resizing and adjusting individual element settings for text boxes, ensuring they stretch and flow along with the artboard.', 'The use of shapes to constrain images and the ability to manually adjust their dimensions and corners. The speaker demonstrates using shapes to constrain images, adjusting their dimensions and corners, and explains the impact of toggling the lock to constrain or warp the image.', 'The manual masking technique for videos, enabling the cropping and masking of videos within shapes. The speaker shows how to manually mask videos within shapes, allowing for cropping and masking, and explains the process of ungrouping the mask to remove it.']}], 'duration': 644.382, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1072276.jpg', 'highlights': ['The ability to turn elements into reusable components allows for efficient design, increasing design consistency and productivity.', 'Creating multiple states within a component enhances the versatility and interactive potential of the design, providing a seamless user experience.', 'Applying prototype interactions enables the incorporation of dynamic functionalities, enhancing the usability and engagement of the design.', 'The feature of adding multiple states to a single component streamlines the design process, reducing the need to create separate components for different states and promoting cohesive design workflows.', 'Enabling and adjusting individual element settings for responsive resizing ensures elements stretch and flow along with the artboard.', 'Using shapes to constrain images and manually adjusting their dimensions and corners provides control over image presentation.', 'The manual masking technique for videos enables the cropping and masking of videos within shapes, allowing for creative video integration.']}, {'end': 2199.681, 'segs': [{'end': 1839.113, 'src': 'heatmap', 'start': 1735.155, 'weight': 0, 'content': [{'end': 1739.539, 'text': "You can actually even trim this a little bit and say, hey, I don't like that first part or that end part.", 'start': 1735.155, 'duration': 4.384}, {'end': 1740.9, 'text': 'So I want to trim that.', 'start': 1739.859, 'duration': 1.041}, {'end': 1748.727, 'text': 'I want to loop the playback and then we can define, hey, do we want this video to play on tap? Do we want to play automatically? Yes, we do.', 'start': 1741.32, 'duration': 7.407}, {'end': 1753.63, 'text': "It's going to play automatically and it's going to loop and it looks exactly the way we want it to.", 'start': 1749.067, 'duration': 4.563}, {'end': 1755.071, 'text': "Let's zoom out now.", 'start': 1754.031, 'duration': 1.04}, {'end': 1758.674, 'text': "Let's press play on our prototype up here in the top right corner.", 'start': 1755.412, 'duration': 3.262}, {'end': 1759.534, 'text': 'And look at that.', 'start': 1759.054, 'duration': 0.48}, {'end': 1766.339, 'text': 'We have video playing inside of our Adobe XD design and it just keeps looping.', 'start': 1759.595, 'duration': 6.744}, {'end': 1767.74, 'text': "It's totally awesome.", 'start': 1766.68, 'duration': 1.06}, {'end': 1769.342, 'text': "It's totally amazing.", 'start': 1768.041, 'duration': 1.301}, {'end': 1772.464, 'text': 'And that is the power of video inside of XD.', 'start': 1769.682, 'duration': 2.782}, {'end': 1773.544, 'text': "All right, let's keep going.", 'start': 1772.844, 'duration': 0.7}, {'end': 1779.747, 'text': "We'll talk about a few other great advanced functions inside of XD, starting with the idea of a repeat grid.", 'start': 1773.584, 'duration': 6.163}, {'end': 1781.488, 'text': "I'm going to zoom into our design here.", 'start': 1779.768, 'duration': 1.72}, {'end': 1785.65, 'text': 'And I like this grouping of text here.', 'start': 1782.109, 'duration': 3.541}, {'end': 1790.353, 'text': 'So the first thing I want to do is I want to command G, put them in a group.', 'start': 1785.67, 'duration': 4.683}, {'end': 1792.414, 'text': "And I'm just going to rename this text.", 'start': 1790.413, 'duration': 2.001}, {'end': 1794.355, 'text': 'in my layers panel here.', 'start': 1793.034, 'duration': 1.321}, {'end': 1795.995, 'text': 'And then I really like it.', 'start': 1794.835, 'duration': 1.16}, {'end': 1798.016, 'text': 'I just kind of want to repeat this down the page.', 'start': 1796.055, 'duration': 1.961}, {'end': 1802.477, 'text': "So we're going to use this button that we've been kind of looking at, but ignoring the whole time.", 'start': 1798.036, 'duration': 4.441}, {'end': 1803.858, 'text': "And that's the repeat grid button.", 'start': 1802.497, 'duration': 1.361}, {'end': 1809.68, 'text': "We can either hit that or press command R, and it's going to allow us to create repeatable,", 'start': 1804.118, 'duration': 5.562}, {'end': 1813.161, 'text': 'a repeatable grid down the page instead of duplicating over and over.', 'start': 1809.68, 'duration': 3.481}, {'end': 1816.162, 'text': "I'm going to press command R and we get these fun little pull bars.", 'start': 1813.181, 'duration': 2.981}, {'end': 1817.963, 'text': "I'm going to pull them down like so.", 'start': 1816.502, 'duration': 1.461}, {'end': 1820.034, 'text': 'Great, just like that.', 'start': 1819.093, 'duration': 0.941}, {'end': 1823.197, 'text': 'And then we can dictate the spacing between all of them.', 'start': 1820.374, 'duration': 2.823}, {'end': 1825.459, 'text': 'Maybe we want it to be more like 26.', 'start': 1823.217, 'duration': 2.242}, {'end': 1826.18, 'text': "That's awesome.", 'start': 1825.459, 'duration': 0.721}, {'end': 1833.067, 'text': "And then any change I make in that very first element of my repeat grid, it's going to be reflected everywhere.", 'start': 1826.48, 'duration': 6.587}, {'end': 1839.113, 'text': 'So maybe we want this not to be pure black, but we want it to be maybe a little bit more of an off black, like so.', 'start': 1833.147, 'duration': 5.966}], 'summary': 'The video plays automatically and loops, demonstrating the power of video inside xd. they then utilize the repeat grid function to create a repeatable grid down the page.', 'duration': 44.592, 'max_score': 1735.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1735155.jpg'}, {'end': 1879.341, 'src': 'embed', 'start': 1852.982, 'weight': 1, 'content': [{'end': 1857.865, 'text': 'And then we can select our entire repeat grid again and change the spacing on it.', 'start': 1852.982, 'duration': 4.883}, {'end': 1858.405, 'text': 'I love it.', 'start': 1858.005, 'duration': 0.4}, {'end': 1860.807, 'text': 'So maybe we really love this.', 'start': 1859.186, 'duration': 1.621}, {'end': 1864.729, 'text': 'This is exactly how we want it to look and we can actually update.', 'start': 1860.847, 'duration': 3.882}, {'end': 1871.054, 'text': 'So this one could be the black tank here and this one could be the red tank.', 'start': 1864.809, 'duration': 6.245}, {'end': 1879.341, 'text': 'so we can update all the instances inside of our repeat grid and you can even update some of the text in the original.', 'start': 1871.054, 'duration': 8.287}], 'summary': 'Changing spacing and updating instances in repeat grid for black and red tank.', 'duration': 26.359, 'max_score': 1852.982, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1852982.jpg'}, {'end': 1985.126, 'src': 'heatmap', 'start': 1922.707, 'weight': 0.942, 'content': [{'end': 1928.39, 'text': "And it's really tedious to kind of grab this and move it down and then figure out where it needs to be.", 'start': 1922.707, 'duration': 5.683}, {'end': 1934.673, 'text': "Instead, once I've grouped things and I have the group selected over on the right hand contextual panel,", 'start': 1928.77, 'duration': 5.903}, {'end': 1937.976, 'text': 'I can actually turn on stacks and I can turn on padding.', 'start': 1934.973, 'duration': 3.003}, {'end': 1942.92, 'text': "What that's going to allow me to do is say I want to stack these things vertically or horizontally like that.", 'start': 1938.316, 'duration': 4.604}, {'end': 1948.564, 'text': "Let's stick with the vertical stack and then we can actually dictate the spacing inside of our stack.", 'start': 1943.32, 'duration': 5.244}, {'end': 1955.229, 'text': "Now, what's really great about this is at any point you can grab an element in your stack, you can move it around and it keeps the actual spacing.", 'start': 1948.604, 'duration': 6.625}, {'end': 1958.192, 'text': 'It keeps the distance, right? Just moving things around.', 'start': 1955.269, 'duration': 2.923}, {'end': 1967.137, 'text': 'If I want to add something to my stack, like maybe I want like a new paragraph, it too is controlled by the stacks master kind of padding and spacing.', 'start': 1958.232, 'duration': 8.905}, {'end': 1972.06, 'text': 'And so as we space eight there, that would be that really work out great for us, just like so.', 'start': 1967.417, 'duration': 4.643}, {'end': 1978.803, 'text': "So maybe we want this to be more of a link like by now we'll do something like that.", 'start': 1972.3, 'duration': 6.503}, {'end': 1985.126, 'text': "Why don't we change the color of it to be something that's a little bit more like a link? And that looks perfect.", 'start': 1979.123, 'duration': 6.003}], 'summary': 'Efficiently group and manipulate elements using stacks and padding, maintaining consistent spacing and alignment.', 'duration': 62.419, 'max_score': 1922.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1922707.jpg'}, {'end': 1967.137, 'src': 'embed', 'start': 1938.316, 'weight': 3, 'content': [{'end': 1942.92, 'text': "What that's going to allow me to do is say I want to stack these things vertically or horizontally like that.", 'start': 1938.316, 'duration': 4.604}, {'end': 1948.564, 'text': "Let's stick with the vertical stack and then we can actually dictate the spacing inside of our stack.", 'start': 1943.32, 'duration': 5.244}, {'end': 1955.229, 'text': "Now, what's really great about this is at any point you can grab an element in your stack, you can move it around and it keeps the actual spacing.", 'start': 1948.604, 'duration': 6.625}, {'end': 1958.192, 'text': 'It keeps the distance, right? Just moving things around.', 'start': 1955.269, 'duration': 2.923}, {'end': 1967.137, 'text': 'If I want to add something to my stack, like maybe I want like a new paragraph, it too is controlled by the stacks master kind of padding and spacing.', 'start': 1958.232, 'duration': 8.905}], 'summary': 'Demonstrates flexible stack layout with adjustable spacing and easy element repositioning.', 'duration': 28.821, 'max_score': 1938.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1938316.jpg'}, {'end': 2115.445, 'src': 'heatmap', 'start': 2040.057, 'weight': 5, 'content': [{'end': 2042.859, 'text': "Next up, I'm going to talk about a really powerful feature called scroll groups.", 'start': 2040.057, 'duration': 2.802}, {'end': 2044.199, 'text': 'You can do some really fun stuff with.', 'start': 2042.879, 'duration': 1.32}, {'end': 2046.781, 'text': "And to do that, I'm going to open up a different file.", 'start': 2044.52, 'duration': 2.261}, {'end': 2053.844, 'text': "I'm going to press my little home button here, and I'm going to grab this map kind of lake and river activities finder that I built out.", 'start': 2046.801, 'duration': 7.043}, {'end': 2061.449, 'text': 'Inside of this design, we have the background, which is basically one big and I want to be able to scroll around inside of that map.', 'start': 2054.245, 'duration': 7.204}, {'end': 2063.929, 'text': 'Think of like Uber or Google Maps.', 'start': 2061.549, 'duration': 2.38}, {'end': 2065.351, 'text': 'I want to be able to scroll around.', 'start': 2064.23, 'duration': 1.121}, {'end': 2071.774, 'text': "If I drill down, I'm holding down control and that allowed me to kind of like drill down specifically on things.", 'start': 2065.431, 'duration': 6.343}, {'end': 2078.637, 'text': 'So if I want to like drill down onto like the text inside of this button, I can actually hold down control and click right to it.', 'start': 2071.813, 'duration': 6.824}, {'end': 2080.978, 'text': "It goes right to the exact layer that I'm looking for.", 'start': 2078.657, 'duration': 2.321}, {'end': 2082.879, 'text': 'Well, I want to do that with my map.', 'start': 2081.297, 'duration': 1.582}, {'end': 2086.261, 'text': "You'll notice that my map is inside what's called a scroll group.", 'start': 2082.918, 'duration': 3.343}, {'end': 2094.684, 'text': "And that scroll group allows me to do something that's really cool, which is when I preview my prototype, I'm able to drag my map around.", 'start': 2086.601, 'duration': 8.083}, {'end': 2098.225, 'text': 'Now, the details there are not actually connected to it,', 'start': 2094.724, 'duration': 3.501}, {'end': 2104.488, 'text': 'but I can drag that map around because the map is bigger than the space defined for the scroll group.', 'start': 2098.225, 'duration': 6.263}, {'end': 2110.29, 'text': "How do we do this? Well, I'm gonna grab this map and we'll create it from scratch.", 'start': 2104.508, 'duration': 5.782}, {'end': 2115.445, 'text': "I'm going to come over here and press A for artboard and drop a new artboard onto my screen.", 'start': 2111.783, 'duration': 3.662}], 'summary': 'Scroll groups allow for interactive map scrolling and layer control in design.', 'duration': 75.388, 'max_score': 2040.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2040057.jpg'}], 'start': 1716.718, 'title': 'Adobe xd video and design tools', 'summary': 'Covers incorporating and customizing videos in adobe xd, including scrubbing, trimming, looping, and defining playback options. it also demonstrates using repeat grid, stacks, and scroll groups for interactive scrolling within a design.', 'chapters': [{'end': 1779.747, 'start': 1716.718, 'title': 'Using video in adobe xd', 'summary': 'Demonstrates how to incorporate and customize videos within adobe xd, including scrubbing through the video, trimming, looping, and defining playback options, ultimately showcasing the power of video within xd.', 'duration': 63.029, 'highlights': ['The chapter demonstrates how to incorporate and customize videos within Adobe XD, including scrubbing through the video, trimming, looping, and defining playback options.', 'The video can be set to play automatically and loop, providing a seamless playback experience within the design.', 'The power of video within XD is showcased by the video playing seamlessly and looping in the Adobe XD design, highlighting its potential for creating engaging prototypes.']}, {'end': 2199.681, 'start': 1779.768, 'title': 'Design tools and techniques', 'summary': 'Demonstrates the use of repeat grid for creating repeated elements, the functionality of stacks for organizing and spacing elements, and the implementation of scroll groups for interactive scrolling within a design.', 'duration': 419.913, 'highlights': ['The use of repeat grid for creating repeated elements Demonstrates the functionality of the repeat grid, allowing for the creation of repeatable elements with customizable spacing and content updates.', 'Functionality of stacks for organizing and spacing elements Explains the feature of stacks to organize and control vertical or horizontal spacing within grouped elements, with the ability to add and manipulate content while maintaining consistent spacing.', 'Implementation of scroll groups for interactive scrolling within a design Illustrates the use of scroll groups to enable interactive scrolling within a design, allowing for the movement of content within a defined scroll area.']}], 'duration': 482.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg1716718.jpg', 'highlights': ['The chapter demonstrates how to incorporate and customize videos within Adobe XD, including scrubbing through the video, trimming, looping, and defining playback options.', 'The use of repeat grid for creating repeated elements Demonstrates the functionality of the repeat grid, allowing for the creation of repeatable elements with customizable spacing and content updates.', 'The video can be set to play automatically and loop, providing a seamless playback experience within the design.', 'Functionality of stacks for organizing and spacing elements Explains the feature of stacks to organize and control vertical or horizontal spacing within grouped elements, with the ability to add and manipulate content while maintaining consistent spacing.', 'The power of video within XD is showcased by the video playing seamlessly and looping in the Adobe XD design, highlighting its potential for creating engaging prototypes.', 'Implementation of scroll groups for interactive scrolling within a design Illustrates the use of scroll groups to enable interactive scrolling within a design, allowing for the movement of content within a defined scroll area.']}, {'end': 2913.881, 'segs': [{'end': 2274.878, 'src': 'heatmap', 'start': 2210.126, 'weight': 0.939, 'content': [{'end': 2218.29, 'text': "we're back to our previous design that we were working on and we have a few screens here that we want to actually start creating some prototype action.", 'start': 2210.126, 'duration': 8.164}, {'end': 2223.672, 'text': 'So we have screen one that has our text and our buy button and our video.', 'start': 2218.35, 'duration': 5.322}, {'end': 2227.053, 'text': 'And really what we want to create is a second screen with some differences.', 'start': 2223.992, 'duration': 3.061}, {'end': 2237.598, 'text': "So why don't we move the text down and we'll actually double click into our mask and we'll stretch the size of the mask out and then we'll move the buy button down to follow?", 'start': 2227.093, 'duration': 10.505}, {'end': 2241.76, 'text': "The first thing we're going to do is create a really basic screen to screen prototype.", 'start': 2238.018, 'duration': 3.742}, {'end': 2246.522, 'text': "And we're going to do that by hitting over to the prototype view or workspace here.", 'start': 2242.16, 'duration': 4.362}, {'end': 2255.466, 'text': "Once we're there, I'm going to select my buy button and I'm actually going to grab this little blue node and just drag it over to my second artboard.", 'start': 2247.263, 'duration': 8.203}, {'end': 2260.369, 'text': "That means on when I interact with this button somehow, it's going to move me over.", 'start': 2255.727, 'duration': 4.642}, {'end': 2267.933, 'text': "And we know also that let's just say we'll tap the anywhere on the video to head back.", 'start': 2260.409, 'duration': 7.524}, {'end': 2269.714, 'text': "okay, so we're going to drag back.", 'start': 2267.933, 'duration': 1.781}, {'end': 2274.878, 'text': "now let's address what we call our triggers or our wires that we've created here.", 'start': 2269.714, 'duration': 5.164}], 'summary': 'Creating a screen-to-screen prototype with buy button interaction and video tap navigation.', 'duration': 64.752, 'max_score': 2210.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2210126.jpg'}, {'end': 2267.933, 'src': 'embed', 'start': 2238.018, 'weight': 1, 'content': [{'end': 2241.76, 'text': "The first thing we're going to do is create a really basic screen to screen prototype.", 'start': 2238.018, 'duration': 3.742}, {'end': 2246.522, 'text': "And we're going to do that by hitting over to the prototype view or workspace here.", 'start': 2242.16, 'duration': 4.362}, {'end': 2255.466, 'text': "Once we're there, I'm going to select my buy button and I'm actually going to grab this little blue node and just drag it over to my second artboard.", 'start': 2247.263, 'duration': 8.203}, {'end': 2260.369, 'text': "That means on when I interact with this button somehow, it's going to move me over.", 'start': 2255.727, 'duration': 4.642}, {'end': 2267.933, 'text': "And we know also that let's just say we'll tap the anywhere on the video to head back.", 'start': 2260.409, 'duration': 7.524}], 'summary': 'Create screen-to-screen prototype by dragging buy button to second artboard to enable interaction.', 'duration': 29.915, 'max_score': 2238.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2238018.jpg'}, {'end': 2336.513, 'src': 'embed', 'start': 2298.932, 'weight': 2, 'content': [{'end': 2300.893, 'text': "So first thing we're going to say is we really like this.", 'start': 2298.932, 'duration': 1.961}, {'end': 2301.754, 'text': "It's a tap trigger.", 'start': 2300.933, 'duration': 0.821}, {'end': 2305.835, 'text': "We're going to explore some of the other trigger types as well, but we can do drag gestures.", 'start': 2302.054, 'duration': 3.781}, {'end': 2313.34, 'text': 'We can do work on our Xbox controller or our keyboard, or we can actually even do voice controls, which is really, really fun.', 'start': 2306.175, 'duration': 7.165}, {'end': 2317.423, 'text': "But let's start with a simple tap and we won't do a basic transition.", 'start': 2313.36, 'duration': 4.063}, {'end': 2321.906, 'text': "We'll do something like auto animate, which is where like a lot of fun happens.", 'start': 2317.503, 'duration': 4.403}, {'end': 2326.769, 'text': "It's going to actually automatically kind of smartly animate anything that's here.", 'start': 2322.206, 'duration': 4.563}, {'end': 2327.81, 'text': "That's a matching layer.", 'start': 2326.789, 'duration': 1.021}, {'end': 2330.831, 'text': 'from one state or one place to another.', 'start': 2328.63, 'duration': 2.201}, {'end': 2333.412, 'text': "you're going to see some animation kind of take place.", 'start': 2330.831, 'duration': 2.581}, {'end': 2336.513, 'text': 'when we choose auto animate, we get to choose what type of easing.', 'start': 2333.412, 'duration': 3.101}], 'summary': 'Exploring different trigger types including tap, drag gestures, xbox controller, keyboard, and voice controls, with a focus on auto animate for seamless transitions.', 'duration': 37.581, 'max_score': 2298.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2298932.jpg'}, {'end': 2395.01, 'src': 'heatmap', 'start': 2359.224, 'weight': 0.779, 'content': [{'end': 2363.668, 'text': "we'll redo it again and you can see on tap it's going to save those settings.", 'start': 2359.224, 'duration': 4.444}, {'end': 2368.773, 'text': 'we just had for the previous one tap auto animate with ease out in half a second.', 'start': 2363.668, 'duration': 5.105}, {'end': 2376.559, 'text': "let's go right back here and we're going to just press the little home button that creates the start of what we call our flows right and it gives us a little tag.", 'start': 2368.773, 'duration': 7.786}, {'end': 2378.18, 'text': 'we can name this flow.', 'start': 2376.559, 'duration': 1.621}, {'end': 2382.923, 'text': "let's call it animation, something like that, and we'll press play on it.", 'start': 2378.18, 'duration': 4.743}, {'end': 2390.247, 'text': "you can see, we get our video playing looping, look really really great and we can hover over our button and you can see that's an interactable point.", 'start': 2382.923, 'duration': 7.324}, {'end': 2395.01, 'text': 'we get our little hover button, we click, it auto animates And it looks really really smooth.', 'start': 2390.247, 'duration': 4.763}], 'summary': 'Redoing settings led to smooth auto animation in half a second, creating an interactive and smooth user experience.', 'duration': 35.786, 'max_score': 2359.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2359224.jpg'}, {'end': 2471.035, 'src': 'embed', 'start': 2442.189, 'weight': 3, 'content': [{'end': 2447.25, 'text': "But now you can see when I move from one to the other, that component's going to move,", 'start': 2442.189, 'duration': 5.061}, {'end': 2456.292, 'text': "but it's always interactable because It is in and of itself a component that has animation from state to state.", 'start': 2447.25, 'duration': 9.042}, {'end': 2460.393, 'text': 'Now we did that by creating that toggle state in between,', 'start': 2456.592, 'duration': 3.801}, {'end': 2466.794, 'text': 'but you can do all sorts of cool things by creating components and then actually creating animations inside of them.', 'start': 2460.393, 'duration': 6.401}, {'end': 2471.035, 'text': "We're talking about meters that move and progress bars, all sorts of fun stuff.", 'start': 2466.814, 'duration': 4.221}], 'summary': 'Create interactive components with animations for meters, progress bars, and more.', 'duration': 28.846, 'max_score': 2442.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2442189.jpg'}, {'end': 2531.885, 'src': 'heatmap', 'start': 2475.416, 'weight': 0, 'content': [{'end': 2480.898, 'text': 'just like you would the artboards between the components themselves or the states of the components.', 'start': 2475.416, 'duration': 5.482}, {'end': 2481.898, 'text': 'Pretty cool stuff.', 'start': 2481.238, 'duration': 0.66}, {'end': 2485.8, 'text': "Let's go back to our prototype because previously it actually built in some drag gestures.", 'start': 2482.098, 'duration': 3.702}, {'end': 2491.942, 'text': "You can see the trigger that's being used for this one is drag auto animate and it's moving from screen to screen.", 'start': 2485.82, 'duration': 6.122}, {'end': 2494.723, 'text': 'And so we press play to make a little room so we could see it.', 'start': 2492.242, 'duration': 2.481}, {'end': 2504.507, 'text': 'We just kind of drag over and we get fun drag gestures, changing the image inside the size, the masking and all the details below to slide in and out.', 'start': 2494.763, 'duration': 9.744}, {'end': 2505.428, 'text': 'Really, really cool.', 'start': 2504.708, 'duration': 0.72}, {'end': 2508.45, 'text': "There's a lot of other really cool action types that you can use.", 'start': 2505.788, 'duration': 2.662}, {'end': 2510.911, 'text': "We won't go into all of them, but I'll show you where to find them.", 'start': 2508.51, 'duration': 2.401}, {'end': 2519.377, 'text': 'Instead of doing a simple tap with an auto animate, you could have done a really quick, simple, fast transition like that.', 'start': 2511.252, 'duration': 8.125}, {'end': 2521.698, 'text': 'You could have also created it into a hyperlink.', 'start': 2519.677, 'duration': 2.021}, {'end': 2525.221, 'text': "It'll actually open up a browser on your device or on your computer.", 'start': 2521.718, 'duration': 3.503}, {'end': 2531.885, 'text': 'You can create overlays, which will allow you to create slide out menus or modal dialog boxes that pop up.', 'start': 2525.901, 'duration': 5.984}], 'summary': 'Adobe xd allows for creating various interactive actions, including drag gestures, transitions, hyperlinks, and overlays for slide-out menus or modal dialog boxes.', 'duration': 56.469, 'max_score': 2475.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2475416.jpg'}, {'end': 2673.466, 'src': 'embed', 'start': 2640.693, 'weight': 6, 'content': [{'end': 2643.554, 'text': 'And now with my hands up in the air, you should be able to see it go there.', 'start': 2640.693, 'duration': 2.861}, {'end': 2645.155, 'text': 'And then after 1001, 1002, it should go back.', 'start': 2643.995, 'duration': 1.16}, {'end': 2650.017, 'text': 'And these are your timed triggers.', 'start': 2648.036, 'duration': 1.981}, {'end': 2652.378, 'text': 'You can do a lot of really cool things with time triggers.', 'start': 2650.297, 'duration': 2.081}, {'end': 2657.84, 'text': 'You can do loading animations and you can do like user generated, like input,', 'start': 2652.398, 'duration': 5.442}, {'end': 2661.281, 'text': 'all sorts of really cool things using your timed animations and triggers.', 'start': 2657.84, 'duration': 3.441}, {'end': 2667.164, 'text': 'The last few things I want to talk about are plugins and sharing super powerful inside of Adobe XD.', 'start': 2661.741, 'duration': 5.423}, {'end': 2673.466, 'text': "Here we are back inside of our project and we've really been working a lot in our layers panel command Y.", 'start': 2667.484, 'duration': 5.982}], 'summary': 'Adobe xd allows for timed triggers, plugins, and sharing, enabling various animations and user input, providing powerful features for design.', 'duration': 32.773, 'max_score': 2640.693, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2640693.jpg'}, {'end': 2710.485, 'src': 'embed', 'start': 2685.783, 'weight': 7, 'content': [{'end': 2694.472, 'text': 'and adobe xd has tons of great plugins you can install for free and just start using things like building charts or color scales and ranges,', 'start': 2685.783, 'duration': 8.689}, {'end': 2704.58, 'text': 'adding confetti or color like plugins, adding maps and lorem ipsum Lottie files, photos and renaming things for contrast and UI faces.', 'start': 2694.472, 'duration': 10.108}, {'end': 2710.485, 'text': "There's all sorts of great ones and I won't go into, you know, all the ones that I have here or the ones that I use.", 'start': 2704.86, 'duration': 5.625}], 'summary': 'Adobe xd offers numerous free plugins for tasks like building charts, adding confetti, and incorporating maps and lottie files.', 'duration': 24.702, 'max_score': 2685.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2685783.jpg'}], 'start': 2199.701, 'title': 'Adobe xd prototyping and animation', 'summary': 'Covers basic functions of adobe xd, including creating prototype actions, tap triggers, and basic transitions. it also delves into using auto animate, creating components with animation, employing timed triggers, exploring plugins, and sharing designs for collaboration in adobe xd.', 'chapters': [{'end': 2317.423, 'start': 2199.701, 'title': 'Adobe xd prototyping basics', 'summary': 'Covers basic functions of adobe xd, including creating prototype actions by linking screens and using triggers, with a focus on tap triggers and basic transitions.', 'duration': 117.722, 'highlights': ['The chapter emphasizes creating prototype actions by linking screens using triggers, with a focus on tap triggers and basic transitions.', 'The instructor demonstrates how to link screens by dragging the interactive element to the target artboard, providing a visual demonstration of the prototyping process.', 'The instructor explains the various trigger types available in Adobe XD, such as tap triggers, drag gestures, Xbox controller or keyboard interactions, and voice controls, offering a comprehensive overview of the prototyping capabilities.', 'The chapter also mentions the potential for utilizing drag gestures, Xbox controller or keyboard interactions, and voice controls as alternative trigger types, presenting a range of prototyping options for the audience to explore.', "The instructor showcases the contextual panel's role in providing information about trigger types, transition details, and animation options, highlighting the practical utilization of these features in the prototyping process."]}, {'end': 2913.881, 'start': 2317.503, 'title': 'Adobe xd: prototyping and animation', 'summary': 'Covers using auto animate for smart animation, creating components with baked-in animation, utilizing different action types for interaction, employing timed triggers for animations, exploring the power of plugins, and sharing designs for collaboration and feedback in adobe xd.', 'duration': 596.378, 'highlights': ['Creating components with baked-in animation The chapter explains how to create components with baked-in animation, allowing for interactable components that move from state to state, providing a smooth user experience.', 'Utilizing different action types for interaction It demonstrates various action types such as tap with auto animate, hyperlink, overlays, scroll to, and anchor links, offering a wide range of interactive possibilities for design prototyping.', 'Using auto animate for smart animation The tutorial showcases the use of auto animate with ease out and duration settings, enabling smart animation and smooth transitions, enhancing the overall user experience.', 'Employing timed triggers for animations It delves into using timed triggers to create animations, allowing for timed animations and triggers, including loading animations and user-generated input.', 'Exploring the power of plugins The chapter discusses the extensive capabilities of plugins, from installing and running plugins to leveraging them for tasks like building charts, adding maps, and finding images, enhancing the design process.']}], 'duration': 714.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/C-_pr1Hzlvg/pics/C-_pr1Hzlvg2199701.jpg', 'highlights': ['The chapter emphasizes creating prototype actions by linking screens using triggers, with a focus on tap triggers and basic transitions.', 'The instructor demonstrates how to link screens by dragging the interactive element to the target artboard, providing a visual demonstration of the prototyping process.', 'The instructor explains the various trigger types available in Adobe XD, such as tap triggers, drag gestures, Xbox controller or keyboard interactions, and voice controls, offering a comprehensive overview of the prototyping capabilities.', 'Creating components with baked-in animation The chapter explains how to create components with baked-in animation, allowing for interactable components that move from state to state, providing a smooth user experience.', 'Utilizing different action types for interaction It demonstrates various action types such as tap with auto animate, hyperlink, overlays, scroll to, and anchor links, offering a wide range of interactive possibilities for design prototyping.', 'Using auto animate for smart animation The tutorial showcases the use of auto animate with ease out and duration settings, enabling smart animation and smooth transitions, enhancing the overall user experience.', 'Employing timed triggers for animations It delves into using timed triggers to create animations, allowing for timed animations and triggers, including loading animations and user-generated input.', 'Exploring the power of plugins The chapter discusses the extensive capabilities of plugins, from installing and running plugins to leveraging them for tasks like building charts, adding maps, and finding images, enhancing the design process.']}], 'highlights': ["The tutorial emphasizes the creation of structured shapes using the rectangle tool, with the option to constrain the shape by holding down 'shift', and customize the shape and color.", 'The chapter provides a complete crash course on Adobe XD, covering all its latest features and basics.', 'The chapter emphasizes creating prototype actions by linking screens using triggers, with a focus on tap triggers and basic transitions.', 'The ability to turn elements into reusable components allows for efficient design, increasing design consistency and productivity.', 'The tutorial explains the distinctions between auto width, auto height, and fixed size text boxes, and provides a solution for handling text overflow by double-clicking to expand the box to fit the text perfectly.', 'The chapter demonstrates how to incorporate and customize videos within Adobe XD, including scrubbing through the video, trimming, looping, and defining playback options.', 'The polygon tool in Adobe XD allows users to change the amount of sides, soften the edges, and adjust the inside shapes, providing a high level of customization.', 'The tutorial showcases the use of auto animate with ease out and duration settings, enabling smart animation and smooth transitions, enhancing the overall user experience.', 'The feature of adding multiple states to a single component streamlines the design process, reducing the need to create separate components for different states and promoting cohesive design workflows.', 'The chapter covers the use of the pen tool for creating custom shapes and Bezier curves, with options to modify the shape and apply colors and effects.']}