title
Figma Tutorial - A Free UI Design/Prototyping Tool. It's awesome.

description
Figma is a web-based (with a companion desktop app enabled by Electron) UI design and prototyping tool. In this tutorial, I create a mobile layout while discovering many of its features. I have to say, this is perhaps the strongest contender against Adobe XD. What do you think? https://www.figma.com - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': "Figma Tutorial - A Free UI Design/Prototyping Tool. It's awesome.", 'heatmap': [{'end': 487.332, 'start': 415.91, 'weight': 0.79}, {'end': 747.597, 'start': 700.396, 'weight': 0.75}, {'end': 1888.469, 'start': 1864.349, 'weight': 0.758}], 'summary': 'Explores figma, a versatile ui design tool with prototyping features, available on multiple operating systems and offers a user-friendly sign-up process. it covers design tool overview, graphic design software, app design features, ui design, figma interface creation, figma components, and prototyping with adobe xd, emphasizing the robust options available for free.', 'chapters': [{'end': 207.189, 'segs': [{'end': 46.238, 'src': 'embed', 'start': 3.151, 'weight': 0, 'content': [{'end': 5.193, 'text': 'Hey everyone, Gary Simon of Corsetro.', 'start': 3.151, 'duration': 2.042}, {'end': 11.698, 'text': "So today we're going to continue on with the theme that I've been keeping up in the channel the last week or so,", 'start': 5.253, 'duration': 6.445}, {'end': 14.74, 'text': 'with UI design and prototyping tools overviews.', 'start': 11.698, 'duration': 3.042}, {'end': 15.361, 'text': 'All right.', 'start': 15.1, 'duration': 0.261}, {'end': 19.064, 'text': 'So just last week we did Gravit Designer and also Lunacy.', 'start': 15.421, 'duration': 3.643}, {'end': 22.166, 'text': "And today we're going to take a look at Figma.", 'start': 19.744, 'duration': 2.422}, {'end': 28.411, 'text': 'And I have to say, Figma is the one tool that I think most of you have requested more than any other tool.', 'start': 22.346, 'duration': 6.065}, {'end': 30.433, 'text': "So that's for good reason.", 'start': 28.971, 'duration': 1.462}, {'end': 36.875, 'text': "It's 100% free for an individual and also it's 100% web-based.", 'start': 31.273, 'duration': 5.602}, {'end': 44.837, 'text': 'It also has prototyping in it, and it also has a desktop version that you can use on multiple operating system,', 'start': 37.375, 'duration': 7.462}, {'end': 46.238, 'text': 'which is made possible through Electron.', 'start': 44.837, 'duration': 1.401}], 'summary': 'Gary simon reviews figma, a 100% free web-based ui design and prototyping tool with a desktop version available for multiple operating systems.', 'duration': 43.087, 'max_score': 3.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs3151.jpg'}, {'end': 160.341, 'src': 'embed', 'start': 133.13, 'weight': 1, 'content': [{'end': 141.392, 'text': "And then if you're working with a team of some sort, you know, you can, if you have up to three projects, you're fine, it's free.", 'start': 133.13, 'duration': 8.262}, {'end': 144.973, 'text': "It's only 12 bucks a month if you want a bunch of stuff.", 'start': 142.372, 'duration': 2.601}, {'end': 154.137, 'text': 'So basically, you wanna sign in, or sign up rather, And I already did that to make it easy with a Google sign in.', 'start': 145.393, 'duration': 8.744}, {'end': 160.341, 'text': "And once you're there, then and you probably have to confirm your account unless of course you're using Google.", 'start': 154.638, 'duration': 5.703}], 'summary': 'Collaborate with up to 3 projects for free, or pay $12/month for more features.', 'duration': 27.211, 'max_score': 133.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs133130.jpg'}], 'start': 3.151, 'title': 'Figma: a versatile ui design tool', 'summary': 'Delves into figma, a free web-based ui design tool with prototyping features, available on multiple operating systems, and offers a user-friendly sign-up process. it also discusses the pricing structure, including the free option for individuals and the $12 per month plan for teams with up to three projects.', 'chapters': [{'end': 94.402, 'start': 3.151, 'title': 'Figma: free web-based ui design tool', 'summary': 'Explores figma, a free web-based ui design tool with prototyping features, available on multiple operating systems, similar to adobe xd but free, and is highly requested by the audience.', 'duration': 91.251, 'highlights': ['Figma is 100% free for an individual and also 100% web-based, with prototyping features, and a desktop version available for multiple operating systems.', 'It is highly requested by the audience, similar to Adobe XD but free, and is suitable for a quick mobile UI design demonstration within a 30-minute video.', 'The chapter continues the theme of UI design and prototyping tools overviews, following previous reviews of Gravit Designer and Lunacy.', 'Figma offers a well-rounded understanding of its features, making it similar to Adobe XD but with the added advantage of being free and web-based.', 'The tool is compared to Adobe XD, highlighting its similarity but with the key distinction of being free and web-based, making it an appealing choice for designers.']}, {'end': 207.189, 'start': 95.042, 'title': 'Figma pricing overview', 'summary': 'Discusses the impressive pricing structure of figma, highlighting the free option for individuals and the $12 per month plan for teams with up to three projects, emphasizing its user-friendly sign-up process and the availability of a web-based and desktop interface.', 'duration': 112.147, 'highlights': ['The free plan is available for individuals, while the $12 per month plan is suitable for teams with up to three projects, making it an affordable option for both freelancers and small teams.', 'The user-friendly sign-up process, including the option to sign in with Google, provides a seamless onboarding experience for new users.', 'Figma offers a completely web-based interface, and an additional desktop version is available through electron, allowing users to work on native desktop apps for multiple operating systems.']}], 'duration': 204.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs3151.jpg', 'highlights': ['Figma is 100% free for an individual and also 100% web-based, with prototyping features, and a desktop version available for multiple operating systems.', 'The free plan is available for individuals, while the $12 per month plan is suitable for teams with up to three projects, making it an affordable option for both freelancers and small teams.', 'The user-friendly sign-up process, including the option to sign in with Google, provides a seamless onboarding experience for new users.', 'Figma offers a completely web-based interface, and an additional desktop version is available through electron, allowing users to work on native desktop apps for multiple operating systems.', 'The chapter continues the theme of UI design and prototyping tools overviews, following previous reviews of Gravit Designer and Lunacy.']}, {'end': 584.484, 'segs': [{'end': 283.371, 'src': 'embed', 'start': 233.891, 'weight': 2, 'content': [{'end': 240.013, 'text': 'We have some tools up here and then we have a layer section down here.', 'start': 233.891, 'duration': 6.122}, {'end': 246.036, 'text': "and also a couple other things that we'll take a look at in a little bit.", 'start': 241.614, 'duration': 4.422}, {'end': 253.479, 'text': 'but first, how do we actually start with a project or a canvas of some sort or an artboard?', 'start': 246.036, 'duration': 7.443}, {'end': 256.5, 'text': 'well, we do that right here.', 'start': 253.479, 'duration': 3.021}, {'end': 259.781, 'text': 'we click on this tool and then it shows us this stuff on the right.', 'start': 256.5, 'duration': 3.281}, {'end': 270.186, 'text': "now I would change that because I was kinda confused when I first used this and, mind you, I've only used this once, so it made it confusing.", 'start': 259.781, 'duration': 10.405}, {'end': 270.546, 'text': 'you know.', 'start': 270.186, 'duration': 0.36}, {'end': 273.207, 'text': 'okay, I had to click there to figure out where to start.', 'start': 270.546, 'duration': 2.661}, {'end': 278.189, 'text': 'This should be selected by default, that way you have your templates here to get started.', 'start': 274.547, 'duration': 3.642}, {'end': 283.371, 'text': "So I'm just gonna choose iPhone X and notice we have our three tabs right here.", 'start': 278.269, 'duration': 5.102}], 'summary': 'Demonstration of starting a project using design tools, emphasizing the need for default selection of templates for clarity and ease of use.', 'duration': 49.48, 'max_score': 233.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs233891.jpg'}, {'end': 357.842, 'src': 'embed', 'start': 330.77, 'weight': 0, 'content': [{'end': 334.152, 'text': 'Like if you want to change the background color, here we go in the background.', 'start': 330.77, 'duration': 3.382}, {'end': 340.718, 'text': "So section, I'm going to leave it white, but just to look at this, which is pretty much a universal color picker for any element.", 'start': 334.473, 'duration': 6.245}, {'end': 346.899, 'text': 'We have our ability to select any type or shade of colors and the lightness and darkness down here.', 'start': 341.098, 'duration': 5.801}, {'end': 349.34, 'text': 'We can have it output hex.', 'start': 347.739, 'duration': 1.601}, {'end': 352.48, 'text': "It's hex by default or RGB, CSS, HSB.", 'start': 349.54, 'duration': 2.94}, {'end': 357.842, 'text': "We can change the opacity, and there's also a slider right here for that.", 'start': 353.561, 'duration': 4.281}], 'summary': 'Demonstration of color customization with universal color picker and various output formats.', 'duration': 27.072, 'max_score': 330.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs330770.jpg'}, {'end': 496.896, 'src': 'heatmap', 'start': 415.91, 'weight': 1, 'content': [{'end': 418.491, 'text': 'What is personal colors? Document colors.', 'start': 415.91, 'duration': 2.581}, {'end': 419.412, 'text': "Okay, that's better.", 'start': 418.752, 'duration': 0.66}, {'end': 419.892, 'text': 'There we go.', 'start': 419.432, 'duration': 0.46}, {'end': 420.733, 'text': 'Switch to document.', 'start': 420.032, 'duration': 0.701}, {'end': 421.916, 'text': 'All right.', 'start': 421.616, 'duration': 0.3}, {'end': 433.146, 'text': "so let's say, for instance, we wanted to change the actual physical shape of this rectangle, beyond just scaling it up and down and left and right.", 'start': 421.916, 'duration': 11.23}, {'end': 440.012, 'text': 'So double-clicking it will get us into a mode from which we can now access the anchor points.', 'start': 433.246, 'duration': 6.766}, {'end': 443.135, 'text': 'So if I just take this one, hold Shift, go down.', 'start': 440.132, 'duration': 3.003}, {'end': 445.347, 'text': 'Look at that.', 'start': 444.727, 'duration': 0.62}, {'end': 451.85, 'text': "Cool What if we wanted to add an anchor point? Can it do that? So let's see here.", 'start': 445.487, 'duration': 6.363}, {'end': 457.151, 'text': "Sweet And notice it's snapping right here in the middle, just as we would want it to.", 'start': 452.45, 'duration': 4.701}, {'end': 463.732, 'text': "So if I left click, did it add it? Well, let's see.", 'start': 457.672, 'duration': 6.06}, {'end': 474.401, 'text': 'So if I hit Escape and hit V, which is kind of the universal shortcut for a move tool in most applications, there we go.', 'start': 463.832, 'duration': 10.569}, {'end': 476.763, 'text': 'It is a part of our shape now.', 'start': 474.461, 'duration': 2.302}, {'end': 482.628, 'text': 'Awesome So what about the bend tool? There we go.', 'start': 477.323, 'duration': 5.305}, {'end': 487.332, 'text': 'So now we can create a nice sort of Bezier curve.', 'start': 482.768, 'duration': 4.564}, {'end': 494.575, 'text': "All right, so let's see if we can take multiple anchor points and move them down.", 'start': 488.891, 'duration': 5.684}, {'end': 496.896, 'text': 'Select V to go back to the move tool.', 'start': 495.155, 'duration': 1.741}], 'summary': 'Demonstration of manipulating shapes and anchor points in a design tool.', 'duration': 33.064, 'max_score': 415.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs415910.jpg'}, {'end': 588.927, 'src': 'embed', 'start': 558.813, 'weight': 3, 'content': [{'end': 561.395, 'text': 'alright great I.', 'start': 558.813, 'duration': 2.582}, {'end': 563.276, 'text': 'so how about duplicating?', 'start': 561.395, 'duration': 1.881}, {'end': 565.057, 'text': "let's see what would it take to do that.", 'start': 563.276, 'duration': 1.781}, {'end': 568.759, 'text': 'selected control D, duplicate selection.', 'start': 565.057, 'duration': 3.702}, {'end': 578.264, 'text': 'very easy, as you would expect, but you know you have to do it because sometimes with these apps certain no brainer things are left out.', 'start': 568.759, 'duration': 9.505}, {'end': 584.484, 'text': "so I've just duplicated, moved up with my keyboard arrow key arm just Now.", 'start': 578.264, 'duration': 6.22}, {'end': 588.927, 'text': "I didn't see a comment that somebody said there's no skewing tools up here.", 'start': 584.484, 'duration': 4.443}], 'summary': 'Demonstrates duplicating using control d and mentions possible missing features in the app.', 'duration': 30.114, 'max_score': 558.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs558813.jpg'}], 'start': 207.49, 'title': 'Design tool overview and design prototype tool', 'summary': 'Covers the use of a design tool with canvas, properties, tools, and layers, along with the process of project initiation and template selection. it also introduces a design prototype tool with features like artboard navigation, color picker, and shape manipulation, aiming to create a mobile app version and learn the application.', 'chapters': [{'end': 283.371, 'start': 207.49, 'title': 'Design tool overview', 'summary': 'Demonstrates the use of a design tool with a canvas, properties, tools, and layer section, while highlighting the process of starting a project and selecting a template, such as iphone x.', 'duration': 75.881, 'highlights': ['The chapter demonstrates the use of a design tool with a canvas, properties, and layer section.', 'It highlights the process of starting a project and selecting a template, such as iPhone X.', 'The design tool has a similar interface to prototyping tools, featuring a canvas in the middle, properties on the right, tools on top, and a layer section at the bottom.']}, {'end': 584.484, 'start': 283.371, 'title': 'Design prototype tool and css code', 'summary': 'Introduces a design prototype tool with features such as artboard navigation, color picker, shape manipulation, and duplication, aiming to create a mobile app version and learn the application.', 'duration': 301.113, 'highlights': ['The tool provides artboard navigation, color picker with options for hex, RGB, CSS, HSB, opacity adjustment, and swatch section for custom colors. The artboard navigation and color picker features are highlighted as they provide essential functionality for designing and customizing elements in the prototype.', 'The chapter demonstrates shape manipulation techniques such as resizing, adding anchor points, creating Bezier curves, and duplicating shapes with shortcuts. The shape manipulation techniques are highlighted as they showcase the versatility and intuitive nature of the design prototype tool.', "The process of duplicating selections is shown using the shortcut 'control D', allowing easy duplication and positioning of elements. The demonstration of duplicating selections with a shortcut emphasizes the user-friendly nature of the tool."]}], 'duration': 376.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs207490.jpg', 'highlights': ['The tool provides artboard navigation, color picker with options for hex, RGB, CSS, HSB, opacity adjustment, and swatch section for custom colors.', 'The chapter demonstrates shape manipulation techniques such as resizing, adding anchor points, creating Bezier curves, and duplicating shapes with shortcuts.', 'The chapter demonstrates the use of a design tool with a canvas, properties, and layer section.', "The process of duplicating selections is shown using the shortcut 'control D', allowing easy duplication and positioning of elements.", 'It highlights the process of starting a project and selecting a template, such as iPhone X.']}, {'end': 812.603, 'segs': [{'end': 617.468, 'src': 'embed', 'start': 584.484, 'weight': 5, 'content': [{'end': 588.927, 'text': "I didn't see a comment that somebody said there's no skewing tools up here.", 'start': 584.484, 'duration': 4.443}, {'end': 593.891, 'text': 'So edit object, of course, gets us into that object mode.', 'start': 589.007, 'duration': 4.884}, {'end': 598.675, 'text': "The bend tool I don't think will probably help us here.", 'start': 594.832, 'duration': 3.843}, {'end': 601.917, 'text': 'The pen tool has just a pencil tool.', 'start': 599.175, 'duration': 2.742}, {'end': 609.143, 'text': "Yeah, so I don't believe right now there is any type of skewing, but that's okay.", 'start': 603.018, 'duration': 6.125}, {'end': 610.204, 'text': "Let's take these down.", 'start': 609.383, 'duration': 0.821}, {'end': 617.468, 'text': "I don't know, I'm just experimenting here.", 'start': 615.407, 'duration': 2.061}], 'summary': 'No skewing tools available, experimenting with pen and pencil tools.', 'duration': 32.984, 'max_score': 584.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs584484.jpg'}, {'end': 747.597, 'src': 'heatmap', 'start': 653.596, 'weight': 0, 'content': [{'end': 656.398, 'text': 'If we drag this in here.', 'start': 653.596, 'duration': 2.802}, {'end': 663.304, 'text': 'Alright, so I know one way we can tackle this, or we can fix this.', 'start': 656.398, 'duration': 6.906}, {'end': 674.043, 'text': 'We can just take the Rectangle tool, make it match the very top of the canvas, select both, and this is where we can use this section,', 'start': 663.344, 'duration': 10.699}, {'end': 680.044, 'text': "which is equivalent to like Adobe Illustrator's Pathfinder, where we can do different things with multiple selections here,", 'start': 674.043, 'duration': 6.001}, {'end': 682.345, 'text': 'so we can subtract the selection.', 'start': 680.044, 'duration': 2.301}, {'end': 685.826, 'text': 'Well, now we have that part up top.', 'start': 683.945, 'duration': 1.881}, {'end': 690.947, 'text': 'Awesome So, of course, we you know, we have opacity down here.', 'start': 686.946, 'duration': 4.001}, {'end': 697.988, 'text': 'You can use your once you have any of these select these text fields with these numeric values, you can use your keyboard up and down arrow keys.', 'start': 691.247, 'duration': 6.741}, {'end': 703.739, 'text': "I don't like this though, but again, I wanted to demonstrate this tool right here.", 'start': 700.396, 'duration': 3.343}, {'end': 708.183, 'text': "This is really important if you're working with shapes and you're creating vectors here.", 'start': 703.759, 'duration': 4.424}, {'end': 720.255, 'text': "So let's see about, you know, can this import SVG files that you're using? So let's say for instance, we want to use some material IO icons.", 'start': 708.304, 'duration': 11.951}, {'end': 723.538, 'text': 'So material IO icons.', 'start': 720.295, 'duration': 3.243}, {'end': 726.661, 'text': "let's type in traffic light.", 'start': 723.538, 'duration': 3.123}, {'end': 728.662, 'text': 'okay, so arm we click.', 'start': 726.661, 'duration': 2.001}, {'end': 737.79, 'text': "this will choose, you know, I will just make it a now, believe a black, and then we'll choose SVG to download it.", 'start': 728.662, 'duration': 9.128}, {'end': 742.553, 'text': "alright. so we're gonna show this in the folder the showed up off my screen.", 'start': 737.79, 'duration': 4.763}, {'end': 747.597, 'text': "but what I'm going to do is just I drag it onto my desktop.", 'start': 742.553, 'duration': 5.044}], 'summary': 'Demonstrating using the rectangle tool and working with svg files in design software.', 'duration': 75.066, 'max_score': 653.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs653596.jpg'}, {'end': 816.457, 'src': 'embed', 'start': 787.352, 'weight': 4, 'content': [{'end': 789.794, 'text': 'They give you a background like a container in each one.', 'start': 787.352, 'duration': 2.442}, {'end': 794.077, 'text': "So let's say, for instance, you wanted to change this color to the blue that we've been using.", 'start': 790.474, 'duration': 3.603}, {'end': 800.019, 'text': "When you select it, it's just going to select a group and it has the background as white.", 'start': 795.838, 'duration': 4.181}, {'end': 801.52, 'text': "That's not what you want to do.", 'start': 800.059, 'duration': 1.461}, {'end': 808.202, 'text': 'You can actually get to the inner layers here by double clicking onto it.', 'start': 801.56, 'duration': 6.642}, {'end': 812.603, 'text': 'And now we can choose our primary color.', 'start': 808.782, 'duration': 3.821}, {'end': 816.457, 'text': "Awesome All right, so let's get that centered up.", 'start': 813.844, 'duration': 2.613}], 'summary': 'Tutorial on selecting and changing colors in layers for design.', 'duration': 29.105, 'max_score': 787.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs787352.jpg'}], 'start': 584.484, 'title': 'Graphic design software and svg file usage', 'summary': 'Covers graphic design software demonstration including edit object, bend tool, pen tool, and svg file usage involving importing material io icons, modifying colors, and accessing inner layers by double-clicking.', 'chapters': [{'end': 703.739, 'start': 584.484, 'title': 'Graphic design software demonstration', 'summary': 'Demonstrates using graphic design software, experimenting with tools like edit object, bend tool, pen tool, duplicate, rotate, and rectangle tool, and explains how to fix design elements and adjust opacity. the user also expresses uncertainty and dissatisfaction with some tools.', 'duration': 119.255, 'highlights': ['The chapter demonstrates using graphic design software, experimenting with tools like edit object, bend tool, pen tool, duplicate, rotate, and rectangle tool The user explores various tools and functionalities of graphic design software, including edit object, bend tool, pen tool, duplicate, rotate, and rectangle tool.', 'Explains how to fix design elements and adjust opacity The user discusses fixing design elements using the Rectangle tool and adjusting opacity using the keyboard arrow keys.', 'Expresses uncertainty and dissatisfaction with some tools The user expresses uncertainty and dissatisfaction with certain tools, indicating a need for further exploration or improvement in the software.']}, {'end': 812.603, 'start': 703.759, 'title': 'Importing and using svg files for vectors', 'summary': 'Demonstrates the process of importing and using svg files for vectors, showcasing the ability to import material io icons, modify their colors, and access inner layers by double-clicking.', 'duration': 108.844, 'highlights': ['The process of importing and using SVG files for vectors is demonstrated, including the ability to modify colors and access inner layers by double-clicking.', 'The demonstration includes the process of importing Material IO icons and modifying their colors.', 'The ability to access inner layers by double-clicking is highlighted as a key feature for modifying the vectors.']}], 'duration': 228.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs584484.jpg', 'highlights': ['The chapter demonstrates using graphic design software, experimenting with tools like edit object, bend tool, pen tool, duplicate, rotate, and rectangle tool.', 'The process of importing and using SVG files for vectors is demonstrated, including the ability to modify colors and access inner layers by double-clicking.', 'Explains how to fix design elements and adjust opacity using the Rectangle tool and adjusting opacity using the keyboard arrow keys.', 'The demonstration includes the process of importing Material IO icons and modifying their colors.', 'The ability to access inner layers by double-clicking is highlighted as a key feature for modifying the vectors.', 'The user expresses uncertainty and dissatisfaction with certain tools, indicating a need for further exploration or improvement in the software.']}, {'end': 1030.045, 'segs': [{'end': 862.689, 'src': 'embed', 'start': 813.844, 'weight': 0, 'content': [{'end': 816.457, 'text': "Awesome All right, so let's get that centered up.", 'start': 813.844, 'duration': 2.613}, {'end': 818.658, 'text': 'Maybe make it a little bit bigger.', 'start': 817.538, 'duration': 1.12}, {'end': 821.079, 'text': 'Shift and Alt will allow you to scale up.', 'start': 818.798, 'duration': 2.281}, {'end': 826.38, 'text': 'So far, my impressions are very positive of this app.', 'start': 821.199, 'duration': 5.181}, {'end': 829.981, 'text': "I mean, it's behaving exactly as I would hope it would behave.", 'start': 826.4, 'duration': 3.581}, {'end': 832.522, 'text': "So let's just type in My App.", 'start': 830.081, 'duration': 2.441}, {'end': 837.663, 'text': "now this is using the Montserrat font that I've always been using.", 'start': 833.442, 'duration': 4.221}, {'end': 839.243, 'text': 'this is they allows you to use.', 'start': 837.663, 'duration': 1.58}, {'end': 841.104, 'text': 'I think this is part of Google web font.', 'start': 839.243, 'duration': 1.861}, {'end': 844.145, 'text': 'so you have a ton of awesome fonts that you can use already.', 'start': 841.104, 'duration': 3.041}, {'end': 846.385, 'text': "they're already ready to go.", 'start': 844.145, 'duration': 2.24}, {'end': 850.546, 'text': 'so the type tool of course you have all your justifications here.', 'start': 846.385, 'duration': 4.161}, {'end': 851.867, 'text': 'you have your line height.', 'start': 850.546, 'duration': 1.321}, {'end': 856.628, 'text': 'you have your letter spacing, paragraph spacing and indentation.', 'start': 851.867, 'duration': 4.761}, {'end': 858.988, 'text': "Let's see here.", 'start': 858.328, 'duration': 0.66}, {'end': 862.689, 'text': "For our fill, let's go ahead and just use.", 'start': 859.668, 'duration': 3.021}], 'summary': 'Positive impression of app: easy to use, variety of google web fonts available, customizable text options.', 'duration': 48.845, 'max_score': 813.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs813844.jpg'}, {'end': 977.837, 'src': 'embed', 'start': 891.15, 'weight': 3, 'content': [{'end': 898.338, 'text': "And the reason I'm doing that is because it will allow me to very easily hold the Alt key while left clicking and dragging in.", 'start': 891.15, 'duration': 7.188}, {'end': 900.821, 'text': "And that way it's completely centered up for me.", 'start': 898.358, 'duration': 2.463}, {'end': 911.575, 'text': "All right, so does this have the little corner border radiuses? All right, well, let's zoom up.", 'start': 903.288, 'duration': 8.287}, {'end': 914.037, 'text': 'So control mouse wheel, and there we go.', 'start': 911.875, 'duration': 2.162}, {'end': 916.119, 'text': 'We could see it right there when you get a little bit closer.', 'start': 914.097, 'duration': 2.022}, {'end': 920.443, 'text': 'So it gives us our ability to change the radiuses very easily.', 'start': 917.12, 'duration': 3.323}, {'end': 926.405, 'text': "Alright, so let's change this ugly gray color to, we'll make this white.", 'start': 922.182, 'duration': 4.223}, {'end': 929.007, 'text': 'Something that really contrasts well.', 'start': 927.266, 'duration': 1.741}, {'end': 933.29, 'text': "Let's get our button call to action text out here.", 'start': 929.908, 'duration': 3.382}, {'end': 937.093, 'text': "So I'm just left clicking and dragging to create a text area.", 'start': 933.31, 'duration': 3.783}, {'end': 945.259, 'text': "So let's see, we'll just call this let's get going.", 'start': 937.193, 'duration': 8.066}, {'end': 948.341, 'text': 'Some type of unique call to action text.', 'start': 946.319, 'duration': 2.022}, {'end': 951.123, 'text': "Let's get this now.", 'start': 950.302, 'duration': 0.821}, {'end': 957.741, 'text': "And again, we're going to use our swatches here.", 'start': 954.478, 'duration': 3.263}, {'end': 961.844, 'text': "Let's get this centered up.", 'start': 960.263, 'duration': 1.581}, {'end': 962.725, 'text': 'There we go.', 'start': 962.265, 'duration': 0.46}, {'end': 966.148, 'text': 'Nice What about drop shadows? All right.', 'start': 963.926, 'duration': 2.222}, {'end': 968.009, 'text': "So let's have a drop shadow on here.", 'start': 966.188, 'duration': 1.821}, {'end': 972.934, 'text': 'And again, drop shadows are one of those things that you could really screw up.', 'start': 968.029, 'duration': 4.905}, {'end': 974.675, 'text': "So only use them if you know what you're doing.", 'start': 972.994, 'duration': 1.681}, {'end': 977.837, 'text': 'you might, uh, kill kittens.', 'start': 976.056, 'duration': 1.781}], 'summary': 'Demonstration of using shortcuts and design elements to create a centered, contrasted, and visually appealing button with unique call-to-action text and drop shadows.', 'duration': 86.687, 'max_score': 891.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs891150.jpg'}], 'start': 813.844, 'title': 'App design features', 'summary': 'Discusses using the type tool in an app, demonstrating features like scaling, font usage, and text properties, and also covers creating a button with a drop shadow in an app design, including steps such as resizing, centering, changing colors, adding call-to-action text, and applying a drop shadow with specific parameters and opacity.', 'chapters': [{'end': 862.689, 'start': 813.844, 'title': 'Using type tool in an app', 'summary': 'Discusses using the type tool in an app, demonstrating the features and functionality like scaling, font usage, and text properties.', 'duration': 48.845, 'highlights': ['The app allows for the use of a variety of fonts, including the Montserrat font, and provides options for scaling, justification, line height, letter spacing, paragraph spacing, and indentation.', 'Impressions of the app are positive, as it behaves as expected and offers a wide range of already available fonts for use.', 'Demonstrates using the type tool for an app, including scaling features, font usage, and text properties such as justification, line height, letter spacing, paragraph spacing, and indentation.']}, {'end': 1030.045, 'start': 862.689, 'title': 'App design: creating a button with drop shadow', 'summary': 'Discusses the process of creating a button with a drop shadow in an app design, including steps such as resizing, centering, changing colors, adding call-to-action text, and applying a drop shadow with specific parameters and opacity.', 'duration': 167.356, 'highlights': ['The process of creating a button with a drop shadow in app design, including resizing, centering, changing colors, adding call-to-action text, and applying a drop shadow with specific parameters and opacity', 'Demonstrating the use of the Alt key while left clicking and dragging to easily center up the button', 'Explaining the use of drop shadows in app design, cautioning about potential misuse, and providing specific parameters and opacity for a desirable effect', 'Utilizing swatches to ensure the call-to-action text is centered and contrasting well with the button color']}], 'duration': 216.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs813844.jpg', 'highlights': ['Demonstrates using the type tool for an app, including scaling features, font usage, and text properties such as justification, line height, letter spacing, paragraph spacing, and indentation.', 'The app allows for the use of a variety of fonts, including the Montserrat font, and provides options for scaling, justification, line height, letter spacing, paragraph spacing, and indentation.', 'Impressions of the app are positive, as it behaves as expected and offers a wide range of already available fonts for use.', 'The process of creating a button with a drop shadow in app design, including resizing, centering, changing colors, adding call-to-action text, and applying a drop shadow with specific parameters and opacity', 'Explaining the use of drop shadows in app design, cautioning about potential misuse, and providing specific parameters and opacity for a desirable effect', 'Utilizing swatches to ensure the call-to-action text is centered and contrasting well with the button color', 'Demonstrating the use of the Alt key while left clicking and dragging to easily center up the button']}, {'end': 1449.123, 'segs': [{'end': 1086.302, 'src': 'embed', 'start': 1030.045, 'weight': 0, 'content': [{'end': 1035.428, 'text': 'it would make sense to make this a group right, because we have two different layers, but if you move the button, you want the text to move to.', 'start': 1030.045, 'duration': 5.383}, {'end': 1038.249, 'text': 'so control G, get you into group.', 'start': 1035.428, 'duration': 2.821}, {'end': 1044.032, 'text': 'you can double click, rename it, my button.', 'start': 1038.249, 'duration': 5.783}, {'end': 1047.939, 'text': "so again, Everything's working as you would expect it to.", 'start': 1044.032, 'duration': 3.907}, {'end': 1051.119, 'text': 'So Control-D has duplicated it.', 'start': 1048.079, 'duration': 3.04}, {'end': 1052.7, 'text': 'Just drop it down.', 'start': 1051.24, 'duration': 1.46}, {'end': 1057.001, 'text': "Maybe this button down here isn't as important.", 'start': 1054.56, 'duration': 2.441}, {'end': 1064.243, 'text': 'So using visual hierarchy through design here, we can double-click on this to select this.', 'start': 1057.401, 'duration': 6.842}, {'end': 1066.624, 'text': "Let's get rid of the fill.", 'start': 1064.883, 'duration': 1.741}, {'end': 1070.205, 'text': "So hide that, and then we'll add a stroke.", 'start': 1067.964, 'duration': 2.241}, {'end': 1082.321, 'text': "Now, one thing that's kind of frustrating is because it's selected, the actual selection indicator box is kind of hiding this one pixel stroke.", 'start': 1071.658, 'duration': 10.663}, {'end': 1082.981, 'text': "that's over here.", 'start': 1082.321, 'duration': 0.66}, {'end': 1085.162, 'text': 'So not a big deal.', 'start': 1083.121, 'duration': 2.041}, {'end': 1086.302, 'text': 'Just make this white.', 'start': 1085.462, 'duration': 0.84}], 'summary': 'Grouping items, duplicating, and adjusting visual hierarchy in a design interface.', 'duration': 56.257, 'max_score': 1030.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1030045.jpg'}, {'end': 1189.408, 'src': 'embed', 'start': 1126.595, 'weight': 3, 'content': [{'end': 1129.958, 'text': "What we'll do now is let's create another artboard.", 'start': 1126.595, 'duration': 3.363}, {'end': 1140.307, 'text': "Because prototyping is a thing here, we want to make a page that will show up when somebody clicks on Let's Get Going to enter the actual app.", 'start': 1131.199, 'duration': 9.108}, {'end': 1143.73, 'text': "So we'll take and select this artboard, hit Control-D.", 'start': 1140.327, 'duration': 3.403}, {'end': 1146.753, 'text': 'Voila, perfect as you would expect.', 'start': 1143.75, 'duration': 3.003}, {'end': 1151.156, 'text': "and so now let's create just a real quick app interface.", 'start': 1147.814, 'duration': 3.342}, {'end': 1153.898, 'text': "i'm not going to do much, trust me.", 'start': 1151.156, 'duration': 2.742}, {'end': 1160.663, 'text': "so let's take this, scale this down quite a bit.", 'start': 1153.898, 'duration': 6.765}, {'end': 1167.307, 'text': "that's about 43 by 43, my app.", 'start': 1160.663, 'duration': 6.644}, {'end': 1169.669, 'text': "we'll take this and scale down the size quite a bit.", 'start': 1167.307, 'duration': 2.362}, {'end': 1176.961, 'text': "Like Graphic Designer, it doesn't allow you to like, left click and drag.", 'start': 1173.379, 'duration': 3.582}, {'end': 1178.402, 'text': 'That would be cool if they allowed that.', 'start': 1177.021, 'duration': 1.381}, {'end': 1182.644, 'text': "Technically, I'm not sure how difficult that would be to integrate though.", 'start': 1180.003, 'duration': 2.641}, {'end': 1185.345, 'text': 'All right.', 'start': 1184.065, 'duration': 1.28}, {'end': 1189.408, 'text': "So now let's add a hamburger icon menu thing over here.", 'start': 1185.425, 'duration': 3.983}], 'summary': 'Creating an artboard for app interface with a 43x43 size icon and adding a hamburger icon menu.', 'duration': 62.813, 'max_score': 1126.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1126595.jpg'}, {'end': 1369.052, 'src': 'embed', 'start': 1333.656, 'weight': 5, 'content': [{'end': 1337.897, 'text': "Now let's just drag this sucker right on to our artboard.", 'start': 1333.656, 'duration': 4.241}, {'end': 1343.178, 'text': 'Okay, so made it quite large.', 'start': 1338.577, 'duration': 4.601}, {'end': 1346.039, 'text': "Let's zoom out, holding control.", 'start': 1343.778, 'duration': 2.261}, {'end': 1351.84, 'text': 'All right, so scale it down, zoom back up.', 'start': 1346.059, 'duration': 5.781}, {'end': 1359.729, 'text': "Now notice, once it knows it's inside of this artboard, it's not going to display whatever's outside of it, which is handy, of course.", 'start': 1353.567, 'duration': 6.162}, {'end': 1365.531, 'text': "So let's see about.", 'start': 1360.169, 'duration': 5.362}, {'end': 1367.072, 'text': "Let's play with the layer blend modes.", 'start': 1365.531, 'duration': 1.541}, {'end': 1369.052, 'text': 'So this is really handy as well.', 'start': 1367.692, 'duration': 1.36}], 'summary': 'Demonstrates scaling and layer blend modes in artboard, ensuring content display within artboard.', 'duration': 35.396, 'max_score': 1333.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1333656.jpg'}], 'start': 1030.045, 'title': 'Ui design and figma interface creation', 'summary': 'Covers techniques for grouping ui elements, modifying visual hierarchy, and applying design changes. it also demonstrates creating an app interface in figma, including adding icons, containers, images, and manipulating blend modes for prototyping.', 'chapters': [{'end': 1124.933, 'start': 1030.045, 'title': 'Grouping and design hierarchy in ui', 'summary': 'Discusses grouping elements, adjusting visual hierarchy, and applying design changes in a ui, utilizing techniques such as grouping, duplicating, modifying fill and stroke, and adjusting text properties.', 'duration': 94.888, 'highlights': ['By grouping elements and adjusting visual hierarchy, the UI design enhances user experience and guides their attention, thereby improving usability and engagement.', 'Using techniques like grouping and duplicating elements, the chapter demonstrates practical UI design methods that improve efficiency and workflow.', 'Applying design changes like modifying fill and stroke, and adjusting text properties, allows for customization and enhancement of visual elements in the UI.']}, {'end': 1449.123, 'start': 1126.595, 'title': 'Creating app interface in figma', 'summary': 'Discusses creating an app interface in figma, including adding icons, containers, and images, and manipulating blend modes, to demonstrate the prototyping ability.', 'duration': 322.528, 'highlights': ['The chapter discusses creating an app interface in Figma, including adding icons, containers, and images, and manipulating blend modes, to demonstrate the prototyping ability.', 'The speaker manipulates the size of elements, such as a button and an icon, with specific dimensions like 43 by 43 and 32, to ensure precise design.', 'The process of adding and manipulating images in Figma, including scaling down and adjusting blend modes, is demonstrated to enhance the app interface.', 'The speaker briefly mentions the limitation of Figma in allowing left-click and drag functionality, indicating a potential area for improvement in the software.']}], 'duration': 419.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1030045.jpg', 'highlights': ['By grouping elements and adjusting visual hierarchy, the UI design enhances user experience and guides their attention, thereby improving usability and engagement.', 'Using techniques like grouping and duplicating elements, the chapter demonstrates practical UI design methods that improve efficiency and workflow.', 'Applying design changes like modifying fill and stroke, and adjusting text properties, allows for customization and enhancement of visual elements in the UI.', 'The chapter discusses creating an app interface in Figma, including adding icons, containers, and images, and manipulating blend modes, to demonstrate the prototyping ability.', 'The speaker manipulates the size of elements, such as a button and an icon, with specific dimensions like 43 by 43 and 32, to ensure precise design.', 'The process of adding and manipulating images in Figma, including scaling down and adjusting blend modes, is demonstrated to enhance the app interface.']}, {'end': 1832.68, 'segs': [{'end': 1509.938, 'src': 'embed', 'start': 1449.303, 'weight': 3, 'content': [{'end': 1451.245, 'text': 'All right, so Control-D will duplicate it.', 'start': 1449.303, 'duration': 1.942}, {'end': 1460.141, 'text': 'The experience of using this app so far has been pretty fantastic, I have to say.', 'start': 1454.716, 'duration': 5.425}, {'end': 1464.104, 'text': "Okay, so let's take everything right here.", 'start': 1461.582, 'duration': 2.522}, {'end': 1465.866, 'text': "We're going to control G to group it.", 'start': 1464.365, 'duration': 1.501}, {'end': 1466.787, 'text': 'All right.', 'start': 1465.886, 'duration': 0.901}, {'end': 1479.619, 'text': "so now we have a group and we also have let's go down to our effects and let's add an effect of layer blur.", 'start': 1466.787, 'duration': 12.832}, {'end': 1483.502, 'text': 'this will allow us to kind of simulate a blur, um,', 'start': 1479.619, 'duration': 3.883}, {'end': 1489.947, 'text': "and that way it kind of shifts focus or emphasis onto the menu that's going to show up on the right hand side.", 'start': 1483.502, 'duration': 6.445}, {'end': 1497.192, 'text': 'so it allows you to simply change the blur amount, which is pretty cool.', 'start': 1489.947, 'duration': 7.245}, {'end': 1500.814, 'text': 'one thing that i would happen, naturally, is we could see the edges.', 'start': 1497.192, 'duration': 3.622}, {'end': 1505.918, 'text': "so i'm just going to cheat a little bit and hold alt and scale that out just a tad bit.", 'start': 1500.814, 'duration': 5.104}, {'end': 1507.757, 'text': 'All right.', 'start': 1507.517, 'duration': 0.24}, {'end': 1509.938, 'text': "so now let's create a container on top.", 'start': 1507.757, 'duration': 2.181}], 'summary': 'Demonstrating app features including duplicating, grouping, and adding effects to shift focus.', 'duration': 60.635, 'max_score': 1449.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1449303.jpg'}, {'end': 1603.506, 'src': 'embed', 'start': 1580.176, 'weight': 0, 'content': [{'end': 1587.559, 'text': "So this is where I'm going to introduce you in a second to components, which is a real important topic here for Figma.", 'start': 1580.176, 'duration': 7.383}, {'end': 1594.642, 'text': 'So one thing, I could just create a selection like this.', 'start': 1587.999, 'duration': 6.643}, {'end': 1597.663, 'text': "Sometimes you'll find yourself, it might be easier.", 'start': 1595.723, 'duration': 1.94}, {'end': 1603.506, 'text': "In this case it probably wasn't easier, but you can just duplicate this layer.", 'start': 1598.924, 'duration': 4.582}], 'summary': 'Introduction to components for figma, including selection and duplication.', 'duration': 23.33, 'max_score': 1580.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1580176.jpg'}, {'end': 1780.923, 'src': 'embed', 'start': 1752.541, 'weight': 1, 'content': [{'end': 1761.507, 'text': 'so now, what happens if I, for instance, you say okay, well, I want this to be this come over a little bit more to the right arm.', 'start': 1752.541, 'duration': 8.966}, {'end': 1767.719, 'text': 'so now, if I do that, Make sure I click on this.', 'start': 1761.507, 'duration': 6.212}, {'end': 1768.319, 'text': 'There we go.', 'start': 1767.799, 'duration': 0.52}, {'end': 1771.76, 'text': "If I make it a change to this, it's going to affect all the rest.", 'start': 1769.119, 'duration': 2.641}, {'end': 1774.021, 'text': 'And that is what components are.', 'start': 1771.86, 'duration': 2.161}, {'end': 1775.121, 'text': "That's what they allow you to do.", 'start': 1774.081, 'duration': 1.04}, {'end': 1780.923, 'text': 'They cut out a lot of work if you have elements that are repeated.', 'start': 1776.042, 'duration': 4.881}], 'summary': 'Components allow for efficient repetition of elements, reducing workload.', 'duration': 28.382, 'max_score': 1752.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1752541.jpg'}], 'start': 1449.303, 'title': 'Ui app design and figma components', 'summary': 'Demonstrates using control-d and control-g for ui design in figma. it also introduces and discusses the efficient management of design elements through components, including creating repeating menus and managing repeated elements.', 'chapters': [{'end': 1547.397, 'start': 1449.303, 'title': 'Ui app design: blur effect and grouping', 'summary': 'Demonstrates using control-d to duplicate, control-g to group, and adding a layer blur effect to simulate a blur, allowing to change the blur amount, and creating a container with specific dimensions for ui design.', 'duration': 98.094, 'highlights': ['Adding a layer blur effect to simulate a blur Demonstrates the feature to simulate a blur, allowing to change the blur amount, and shift focus onto the menu.', 'Using Control-D to duplicate elements Illustrates the functionality of duplicating elements using Control-D.', 'Using Control-G to group elements Highlights the process of grouping elements using Control-G.', 'Creating a container with specific dimensions Shows the action of creating a container with specific dimensions for UI design.']}, {'end': 1678.86, 'start': 1547.637, 'title': 'Introduction to components in figma', 'summary': 'Introduces the concept of components in figma, highlighting the process of creating and using components to efficiently manage design elements within a project, including creating repeating menus and linking multiple elements as components.', 'duration': 131.223, 'highlights': ['The chapter introduces the concept of components in Figma, emphasizing their importance for efficient design management.', 'Demonstrates the process of creating repeating menus within Figma to streamline design workflow.', 'Explains the benefits of linking multiple design elements as components to enable easy adjustments and maintenance.']}, {'end': 1832.68, 'start': 1679.08, 'title': 'Component creation and management', 'summary': 'Discusses the process of creating and managing components, highlighting the ability to control repeated elements, the impact of changes on all instances, and the need to detach unique elements from the component.', 'duration': 153.6, 'highlights': ['Components allow for easy management of repeated elements, reducing redundant work in design and development.', 'Changes made to a component affect all instances of that component, ensuring consistency but requiring caution for unique elements.', 'Detaching unique elements from a component prevents global changes and allows for customization of specific instances.']}], 'duration': 383.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1449303.jpg', 'highlights': ['Demonstrates the process of creating repeating menus within Figma to streamline design workflow.', 'Components allow for easy management of repeated elements, reducing redundant work in design and development.', 'Explains the benefits of linking multiple design elements as components to enable easy adjustments and maintenance.', 'Using Control-D to duplicate elements Illustrates the functionality of duplicating elements using Control-D.', 'Using Control-G to group elements Highlights the process of grouping elements using Control-G.', 'Adding a layer blur effect to simulate a blur Demonstrates the feature to simulate a blur, allowing to change the blur amount, and shift focus onto the menu.']}, {'end': 2194.737, 'segs': [{'end': 1892.232, 'src': 'heatmap', 'start': 1864.349, 'weight': 0.758, 'content': [{'end': 1867.272, 'text': "normally i'm on 4k and this wouldn't be so cluttered.", 'start': 1864.349, 'duration': 2.923}, {'end': 1876.881, 'text': 'but anyhow, i what we can do now is select, like this button, and we can see this time it has a little circular icon, this little dragger.', 'start': 1867.272, 'duration': 9.609}, {'end': 1881.104, 'text': 'Well, over here we have our destination.', 'start': 1877.381, 'duration': 3.723}, {'end': 1888.469, 'text': 'Well, we can specify the destination very similar just as in XD or experience design by just dragging it over.', 'start': 1881.384, 'duration': 7.085}, {'end': 1892.232, 'text': 'And it allows you to change the transition.', 'start': 1888.489, 'duration': 3.743}], 'summary': 'Demo of selecting button with circular icon for transition in 4k.', 'duration': 27.883, 'max_score': 1864.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1864349.jpg'}, {'end': 1997.853, 'src': 'embed', 'start': 1918.316, 'weight': 3, 'content': [{'end': 1921.72, 'text': 'Pretty much everything that you would want for page transition animations.', 'start': 1918.316, 'duration': 3.404}, {'end': 1926.125, 'text': "So now, once they're here, let's make this go back.", 'start': 1922.641, 'duration': 3.484}, {'end': 1930.269, 'text': "Oops Okay, so now it's going back.", 'start': 1927.026, 'duration': 3.243}, {'end': 1932.852, 'text': "We'll make this push as well, except go this way.", 'start': 1930.369, 'duration': 2.483}, {'end': 1941.433, 'text': "Alright, and then the hamburger menu, we'll make it go to this nav page.", 'start': 1934.949, 'duration': 6.484}, {'end': 1945.056, 'text': 'We should probably double click these and change the titles appropriately.', 'start': 1942.214, 'duration': 2.842}, {'end': 1949.299, 'text': 'You would want to do that if you were working on a serious project.', 'start': 1945.416, 'duration': 3.883}, {'end': 1952.801, 'text': "And then we'll make the X go back to this page.", 'start': 1949.659, 'duration': 3.142}, {'end': 1964.377, 'text': "All right, so now we have all of our connections that are visible, and they're visible by default, unlike in Adobe XD, which is, you know, okay.", 'start': 1954.349, 'duration': 10.028}, {'end': 1967.54, 'text': "I think that's pretty much all that I would want to do.", 'start': 1964.397, 'duration': 3.143}, {'end': 1972.764, 'text': "You know, I would probably want to make, I wonder if you can make, let's see here.", 'start': 1969.141, 'duration': 3.623}, {'end': 1976.567, 'text': 'Just take this whole thing.', 'start': 1975.587, 'duration': 0.98}, {'end': 1978.969, 'text': 'If they click outside of here, they can also get back.', 'start': 1976.627, 'duration': 2.342}, {'end': 1979.63, 'text': 'There we go.', 'start': 1979.25, 'duration': 0.38}, {'end': 1982.625, 'text': 'All right.', 'start': 1982.205, 'duration': 0.42}, {'end': 1985.507, 'text': "That's looking pretty good to me.", 'start': 1983.506, 'duration': 2.001}, {'end': 1987.047, 'text': "So let's give it a go.", 'start': 1985.587, 'duration': 1.46}, {'end': 1987.688, 'text': 'All right.', 'start': 1987.067, 'duration': 0.621}, {'end': 1989.569, 'text': "So we'll click the present button.", 'start': 1987.708, 'duration': 1.861}, {'end': 1993.811, 'text': 'It automatically launches a new browser tab, by the way.', 'start': 1990.949, 'duration': 2.862}, {'end': 1996.972, 'text': "And let's choose.", 'start': 1995.332, 'duration': 1.64}, {'end': 1997.853, 'text': "Let's get going.", 'start': 1997.032, 'duration': 0.821}], 'summary': 'The speaker discusses various page transition animations and interactions, and makes final adjustments before testing in a new browser tab.', 'duration': 79.537, 'max_score': 1918.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1918316.jpg'}, {'end': 2055.081, 'src': 'embed', 'start': 2027.83, 'weight': 0, 'content': [{'end': 2033.133, 'text': "so basically this means, if I click here, it's going to show us where we can actually click, which is very handy.", 'start': 2027.83, 'duration': 5.303}, {'end': 2035.694, 'text': "that's a common feature arm.", 'start': 2033.133, 'duration': 2.561}, {'end': 2043.538, 'text': 'we can also choose how to fill this, this presentation, here, and we can also this by you, school full screen.', 'start': 2035.694, 'duration': 7.844}, {'end': 2049.9, 'text': "of course, my screen extends way beyond this viewable area, And that's that's pretty much it for the presentation section.", 'start': 2043.538, 'duration': 6.362}, {'end': 2055.081, 'text': "Now, mind you, there's a lot of other stuff here that I didn't really touch on.", 'start': 2050.4, 'duration': 4.681}], 'summary': 'Demonstration of click functionality and presentation options. additional features not covered.', 'duration': 27.251, 'max_score': 2027.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs2027830.jpg'}, {'end': 2129.12, 'src': 'embed', 'start': 2078.715, 'weight': 1, 'content': [{'end': 2079.074, 'text': "I don't know.", 'start': 2078.715, 'duration': 0.359}, {'end': 2080.937, 'text': "I don't know about this.", 'start': 2079.074, 'duration': 1.863}, {'end': 2081.637, 'text': 'what do you say?', 'start': 2080.937, 'duration': 0.7}, {'end': 2085.3, 'text': 'all right post, all right.', 'start': 2081.637, 'duration': 3.663}, {'end': 2087.822, 'text': 'so now you, it has a little resolve button.', 'start': 2085.3, 'duration': 2.522}, {'end': 2088.803, 'text': 'like this is an issue.', 'start': 2087.822, 'duration': 0.981}, {'end': 2096.268, 'text': 'I want feedback and then the person can give feedback when you share the prototype in the same location.', 'start': 2088.803, 'duration': 7.465}, {'end': 2100.513, 'text': "so now, if I go back to here, you don't see a comment.", 'start': 2096.268, 'duration': 4.245}, {'end': 2110.647, 'text': "but if we go back to this, show comments, it'll show you wherever you're at and you can place multiple comments.", 'start': 2100.513, 'duration': 10.134}, {'end': 2112.507, 'text': 'very, very good stuff.', 'start': 2110.647, 'duration': 1.86}, {'end': 2118.508, 'text': 'so this is quite, a really robust option, especially for it being free.', 'start': 2112.507, 'duration': 6.001}, {'end': 2123.069, 'text': 'we also have a settings over here pixel preview.', 'start': 2118.508, 'duration': 4.561}, {'end': 2124.17, 'text': 'this is enabled.', 'start': 2123.069, 'duration': 1.101}, {'end': 2127.138, 'text': "I would imagine, if you're There, we go.", 'start': 2124.17, 'duration': 2.968}, {'end': 2129.12, 'text': "It's going to show the actual pixels.", 'start': 2127.539, 'duration': 1.581}], 'summary': 'Tool allows for resolving issues and adding multiple comments, enabling pixel preview for actual pixels. robust and free option for feedback.', 'duration': 50.405, 'max_score': 2078.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs2078715.jpg'}, {'end': 2194.737, 'src': 'embed', 'start': 2160.832, 'weight': 6, 'content': [{'end': 2162.013, 'text': 'And that is quite handy.', 'start': 2160.832, 'duration': 1.181}, {'end': 2163.294, 'text': "And you don't have to use everything.", 'start': 2162.053, 'duration': 1.241}, {'end': 2168.059, 'text': "Maybe you'd have some other way of creating this container here.", 'start': 2163.475, 'duration': 4.584}, {'end': 2171.422, 'text': 'But you want the aesthetics like the color and stuff.', 'start': 2168.579, 'duration': 2.843}, {'end': 2172.483, 'text': 'Just copy that.', 'start': 2171.722, 'duration': 0.761}, {'end': 2173.343, 'text': 'There you go.', 'start': 2172.823, 'duration': 0.52}, {'end': 2175.125, 'text': 'And you paste it into your code editor.', 'start': 2173.363, 'duration': 1.762}, {'end': 2182.445, 'text': "make sure you check out my site, coursesetra.com, where you're going to find a bunch of courses on modern design and development.", 'start': 2175.678, 'duration': 6.767}, {'end': 2187.85, 'text': 'a lot are free and the others you can access for the cost of buying me like a six pack each month.', 'start': 2182.445, 'duration': 5.405}, {'end': 2188.931, 'text': "that's it now.", 'start': 2187.85, 'duration': 1.081}, {'end': 2194.737, 'text': "also, it probably wouldn't hurt to subscribe here on youtube and be sure to make sure the notifications are turned on.", 'start': 2188.931, 'duration': 5.806}], 'summary': 'Learn modern design and development at coursesetra.com, offering free courses and paid options, with the added benefit of subscribing on youtube for notifications.', 'duration': 33.905, 'max_score': 2160.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs2160832.jpg'}], 'start': 1832.68, 'title': 'Prototyping and interactive presentation in design tools', 'summary': 'Covers prototyping in design software, with a focus on adobe xd, emphasizing page transition animations, specifying destinations, and resolution impact. it also discusses the process of presenting an interactive prototype, including launching a new browser tab and sharing the prototype. additionally, it highlights features such as clickable areas, comments placement, prototype sharing, pixel preview, and code export, emphasizing the robust options available for free.', 'chapters': [{'end': 1967.54, 'start': 1832.68, 'title': 'Prototyping in design software', 'summary': 'Discusses prototyping in design software, demonstrating page transition animations and specifying destinations, with a focus on adobe xd and resolution impact, and also emphasizes the visibility of connections in comparison to adobe xd.', 'duration': 134.86, 'highlights': ['The chapter discusses prototyping in design software, demonstrating page transition animations and specifying destinations. The transcript explains the process of prototyping and highlights the demonstration of page transition animations and specifying destinations within the design software.', 'The impact of resolution is mentioned, with a focus on Adobe XD and resolution impact. The speaker mentions the impact of resolution, particularly highlighting the cluttering effect at a resolution of 1920 by 1080 and the contrast with a 4k resolution.', 'Emphasis on the visibility of connections in comparison to Adobe XD. The chapter emphasizes the default visibility of connections in the discussed design software, contrasting it with Adobe XD.']}, {'end': 2027.83, 'start': 1969.141, 'title': 'Interactive prototype presentation', 'summary': 'Documents the process of presenting an interactive prototype, including launching a new browser tab, navigating the menu, and sharing the prototype.', 'duration': 58.689, 'highlights': ['The presenter discusses launching a new browser tab when clicking the present button.', 'Demonstrates navigating the menu to go back and choose options.', 'Mentions the ability to share the prototype and use hot spots for demonstration.']}, {'end': 2194.737, 'start': 2027.83, 'title': 'Design tool presentation and features', 'summary': 'Covers the presentation section of the design tool, highlighting features such as clickable areas, comments placement, prototype sharing, pixel preview, and code export, emphasizing the robust options available for free.', 'duration': 166.907, 'highlights': ['The design tool allows users to highlight clickable areas and customize presentation settings, providing a robust free option for basic app creation.', 'The feature of placing comments in specific areas and sharing prototypes for feedback enhances collaboration and design refinement.', 'The option to preview pixel details and export CSS code from the design tool adds value for developers and designers.', 'The presenter promotes their website for accessing design and development courses, offering both free and paid options for users.']}], 'duration': 362.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3q3FV65ZrUs/pics/3q3FV65ZrUs1832680.jpg', 'highlights': ['The design tool allows users to highlight clickable areas and customize presentation settings, providing a robust free option for basic app creation.', 'The feature of placing comments in specific areas and sharing prototypes for feedback enhances collaboration and design refinement.', 'The option to preview pixel details and export CSS code from the design tool adds value for developers and designers.', 'The chapter discusses prototyping in design software, demonstrating page transition animations and specifying destinations.', 'The presenter discusses launching a new browser tab when clicking the present button.', 'The impact of resolution is mentioned, with a focus on Adobe XD and resolution impact.', 'The presenter promotes their website for accessing design and development courses, offering both free and paid options for users.', 'Emphasis on the visibility of connections in comparison to Adobe XD.']}], 'highlights': ['Figma is 100% free for an individual and also 100% web-based, with prototyping features, and a desktop version available for multiple operating systems.', 'The free plan is available for individuals, while the $12 per month plan is suitable for teams with up to three projects, making it an affordable option for both freelancers and small teams.', 'The user-friendly sign-up process, including the option to sign in with Google, provides a seamless onboarding experience for new users.', 'Figma offers a completely web-based interface, and an additional desktop version is available through electron, allowing users to work on native desktop apps for multiple operating systems.', 'The tool provides artboard navigation, color picker with options for hex, RGB, CSS, HSB, opacity adjustment, and swatch section for custom colors.', 'By grouping elements and adjusting visual hierarchy, the UI design enhances user experience and guides their attention, thereby improving usability and engagement.', 'Components allow for easy management of repeated elements, reducing redundant work in design and development.', 'The design tool allows users to highlight clickable areas and customize presentation settings, providing a robust free option for basic app creation.', 'The feature of placing comments in specific areas and sharing prototypes for feedback enhances collaboration and design refinement.', 'The option to preview pixel details and export CSS code from the design tool adds value for developers and designers.']}