title
The Figma 2021 Crash Course by Example
description
https://bit.ly/3rUfpUy - Take my UI Bootcamp now!
-- https://bit.ly/3q25PAp 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off!
-- Today, we're going to step into the world of UI/UX design and cover Figma here in 2021. Figma is a UI/UX design and prototyping tool. In this crash course, I'm going to show you how to use Figma to design a website with multiple pages, interactions and animations.
https://figma.com
https://www.figma.com/community/plugin/738454987945972471/Unsplash
https://www.figma.com/community/plugin/735098390272716381/Iconify
https://www.figma.com/community/plugin/736000994034548392/Lorem-ipsum
0:00 - Introduction
2:58 - An awesome offer from Scrimba
3:36 - Getting Started
10:46 - Navbar
23:45 - Hero Section
42:03 - Finishing the Home Page
55:52 - "Our work" Page
1:02:46 - Prototyping
1:05:41 - Hover Interaction
1:07:48 - Smart Animate
1:11:15 - Closing Thoughts!
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: 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 Designcourse.com.
Come to my discord server or add me on social media and say Hi!
detail
{'title': 'The Figma 2021 Crash Course by Example', 'heatmap': [{'end': 1038.56, 'start': 949.049, 'weight': 0.806}, {'end': 1254.817, 'start': 1208.876, 'weight': 1}, {'end': 1862.331, 'start': 1814.965, 'weight': 0.709}], 'summary': "'the figma 2021 crash course by example' covers website prototyping, ui design fundamentals, plugins, ui/ux principles, homepage design, and techniques, emphasizing affordability, functionality, and practical demonstrations.", 'chapters': [{'end': 88.038, 'segs': [{'end': 88.038, 'src': 'embed', 'start': 29.155, 'weight': 0, 'content': [{'end': 30.637, 'text': 'And so what is Figma??', 'start': 29.155, 'duration': 1.482}, {'end': 34.961, 'text': 'So, first of all, before we get there, Who is this crash course for??', 'start': 30.757, 'duration': 4.204}, {'end': 39.584, 'text': "Well, it's somebody who's an absolute beginner and also, maybe, somebody who is more seasoned,", 'start': 35.261, 'duration': 4.323}, {'end': 42.946, 'text': "and maybe you're gonna learn a thing or two in terms of the workflow and the approaches.", 'start': 39.584, 'duration': 3.362}, {'end': 47.029, 'text': 'All right, so Figma is a UI UX design and prototyping tool.', 'start': 43.346, 'duration': 3.683}, {'end': 54.333, 'text': 'What that basically means is before a website or an app app can go live and work in the browser on different devices,', 'start': 47.389, 'duration': 6.944}, {'end': 58.735, 'text': "you really need to come up with an idea of how it's going to look and also function.", 'start': 54.333, 'duration': 4.402}, {'end': 61.356, 'text': "And that's the purpose of Figma and other tools like it.", 'start': 58.775, 'duration': 2.581}, {'end': 68.02, 'text': "So if you go to Figma.com, we'll see that there is a pricing option, but it's free to start.", 'start': 61.777, 'duration': 6.243}, {'end': 72.682, 'text': 'You can have up to three projects, 30 day version history, yada, yada, yada.', 'start': 68.28, 'duration': 4.402}, {'end': 77.765, 'text': "And then if you want to get more professional about it, which you don't have to, it's $12.", 'start': 73.203, 'duration': 4.562}, {'end': 79.888, 'text': 'dollars per editor per month.', 'start': 77.765, 'duration': 2.123}, {'end': 85.455, 'text': 'so the very low cheaping, low cheaping did i say, low cheaping, very low pricing.', 'start': 79.888, 'duration': 5.567}, {'end': 87.537, 'text': "i, and i'm going to show you real quickly.", 'start': 85.455, 'duration': 2.082}, {'end': 88.038, 'text': 'just again.', 'start': 87.537, 'duration': 0.501}], 'summary': 'Figma is a ui ux design and prototyping tool, with free and affordable pricing options for beginners and professionals.', 'duration': 58.883, 'max_score': 29.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA29155.jpg'}], 'start': 0.129, 'title': 'Creating website prototype with figma', 'summary': 'Introduces creating a website prototype using figma, suitable for beginners and seasoned designers, exploring the purpose and pricing options, emphasizing affordability and functionality.', 'chapters': [{'end': 88.038, 'start': 0.129, 'title': 'Creating website prototype with figma', 'summary': 'Introduces creating a website prototype using figma with micro interactions and animations, suitable for beginners and seasoned designers, and explores the purpose and pricing options of figma, emphasizing its affordability and functionality.', 'duration': 87.909, 'highlights': ['Figma is a UI UX design and prototyping tool. Figma is a tool for UI UX design and prototyping, suitable for creating website and app prototypes with a focus on design and functionality.', 'Figma offers a free version with up to three projects and 30-day version history. Figma provides a free version with limited projects and version history, making it accessible for beginners and small-scale projects.', 'Professional version of Figma is priced at $12 per editor per month. The professional version of Figma is priced at $12 per editor per month, offering additional features for a relatively low cost, making it an affordable option for designers and teams.']}], 'duration': 87.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA129.jpg', 'highlights': ['Figma is a UI UX design and prototyping tool suitable for creating website and app prototypes with a focus on design and functionality.', 'Professional version of Figma is priced at $12 per editor per month, offering additional features for a relatively low cost, making it an affordable option for designers and teams.', 'Figma offers a free version with up to three projects and 30-day version history, making it accessible for beginners and small-scale projects.']}, {'end': 489.417, 'segs': [{'end': 144.912, 'src': 'embed', 'start': 114.293, 'weight': 2, 'content': [{'end': 116.653, 'text': "And so I'm going to be talking about two things primarily.", 'start': 114.293, 'duration': 2.36}, {'end': 124.157, 'text': "I'm going to be talking about number one, is how to use the app, how to use the tools that are in the app of Figma.", 'start': 117.013, 'duration': 7.144}, {'end': 128.259, 'text': 'And then number two, UI design principles and fundamentals.', 'start': 124.437, 'duration': 3.822}, {'end': 133.083, 'text': "Of those two, it's a 10%, 90% battle.", 'start': 128.979, 'duration': 4.104}, {'end': 138.326, 'text': 'What I mean by that is understanding how to use the app and the features is only 10% of the battle.', 'start': 133.723, 'duration': 4.603}, {'end': 144.912, 'text': 'Knowing how to apply them and developing an eye for UI design is 90% of the battle.', 'start': 139.287, 'duration': 5.625}], 'summary': 'Using figma: 10% app use, 90% ui design principles', 'duration': 30.619, 'max_score': 114.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA114293.jpg'}, {'end': 200.217, 'src': 'embed', 'start': 161.066, 'weight': 0, 'content': [{'end': 162.447, 'text': "It's going to be awesome.", 'start': 161.066, 'duration': 1.381}, {'end': 170.151, 'text': "It's basically going to be a monthly subscription service where you learn UI UX design through UI tests, live workshops, challenges,", 'start': 162.907, 'duration': 7.244}, {'end': 171.572, 'text': 'full courses and more.', 'start': 170.151, 'duration': 1.421}, {'end': 175.474, 'text': "So that's going to be releasing here sometime soon in 2021.", 'start': 171.652, 'duration': 3.822}, {'end': 175.714, 'text': 'All right.', 'start': 175.474, 'duration': 0.24}, {'end': 178.136, 'text': "So with that said, let's go ahead and get started.", 'start': 175.754, 'duration': 2.382}, {'end': 183.181, 'text': "Now, before we begin, you should definitely check out this video's sponsor, which is scrimba.com.", 'start': 178.416, 'duration': 4.765}, {'end': 191.15, 'text': "Now, while you're about to watch my Figma crash course, you can learn UI design by taking my UI design bootcamp at scrimba,", 'start': 183.522, 'duration': 7.628}, {'end': 193.232, 'text': 'which is an interactive code-based platform.', 'start': 191.15, 'duration': 2.082}, {'end': 195.395, 'text': "At scrimba, you don't just watch videos.", 'start': 193.573, 'duration': 1.822}, {'end': 200.217, 'text': "no, no, you're actually able to modify code in the browser while you learn.", 'start': 195.735, 'duration': 4.482}], 'summary': 'Launching ui ux monthly subscription in 2021 with tests, workshops, and full courses.', 'duration': 39.151, 'max_score': 161.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA161066.jpg'}, {'end': 261.17, 'src': 'embed', 'start': 237.787, 'weight': 1, 'content': [{'end': 244.854, 'text': "We're gonna click on this frame and you're gonna see under design on this right section,", 'start': 237.787, 'duration': 7.067}, {'end': 249.943, 'text': "and let me see if I can get things a little bit bigger so you can see what I'm doing.", 'start': 244.854, 'duration': 5.089}, {'end': 253.805, 'text': "Depending on what you're trying to design,", 'start': 252.064, 'duration': 1.741}, {'end': 261.17, 'text': 'for you can create and start off with these artboards that are predefined in terms of width and height and dimensions essentially.', 'start': 253.805, 'duration': 7.365}], 'summary': 'Demonstrating how to use predefined artboards for design in the software.', 'duration': 23.383, 'max_score': 237.787, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA237787.jpg'}, {'end': 387.716, 'src': 'embed', 'start': 359.573, 'weight': 3, 'content': [{'end': 361.855, 'text': "so that's up to you entirely.", 'start': 359.573, 'duration': 2.282}, {'end': 372.803, 'text': "so now at this point I I will just very briefly go over the UI here of Figma, but I'm not going to spend a lot of time going over bells and whistles.", 'start': 361.855, 'duration': 10.948}, {'end': 375.484, 'text': 'I want to give things context by covering the actual project.', 'start': 372.843, 'duration': 2.641}, {'end': 387.716, 'text': 'But nonetheless, when you select an object, for instance, if I take this rectangle tool, You can see that in the right panel, right here,', 'start': 375.805, 'duration': 11.911}], 'summary': 'Brief overview of figma ui, focusing on object selection and right panel.', 'duration': 28.143, 'max_score': 359.573, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA359573.jpg'}], 'start': 88.038, 'title': 'Figma crash course', 'summary': 'Covers creating a fictional website using figma, focusing on ui design principles and fundamentals and promoting a ui/ux design learning service.', 'chapters': [{'end': 489.417, 'start': 88.038, 'title': 'Figma crash course', 'summary': 'Covers creating a fictional website using figma, focusing on ui design principles and fundamentals and promoting a ui/ux design learning service.', 'duration': 401.379, 'highlights': ['The chapter focuses on two main aspects: using the Figma app and understanding UI design principles, emphasizing that UI design is 90% of the battle.', 'The speaker promotes an upcoming UI/UX design learning service, offering UI tests, live workshops, challenges, full courses, and more through a monthly subscription service in 2021.', 'The speaker mentions a UI design bootcamp available on scrimba.com, which features over 100 lessons tailored to help become an awesome UI designer, along with interactive challenges, available for a low monthly fee.', 'The tutorial guides users on creating a new document in Figma, choosing predefined artboards for website design, and adjusting dimensions for different devices such as desktop, tablet, and phone.', 'The speaker briefly goes over the UI of Figma, including the properties panel for specific element adjustments, the layers and assets panel, and the available drawing tools like basic shapes and the type tool.']}], 'duration': 401.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA88038.jpg', 'highlights': ['The speaker promotes an upcoming UI/UX design learning service, offering UI tests, live workshops, challenges, full courses, and more through a monthly subscription service in 2021.', 'The tutorial guides users on creating a new document in Figma, choosing predefined artboards for website design, and adjusting dimensions for different devices such as desktop, tablet, and phone.', 'The chapter focuses on two main aspects: using the Figma app and understanding UI design principles, emphasizing that UI design is 90% of the battle.', 'The speaker briefly goes over the UI of Figma, including the properties panel for specific element adjustments, the layers and assets panel, and the available drawing tools like basic shapes and the type tool.', 'The speaker mentions a UI design bootcamp available on scrimba.com, which features over 100 lessons tailored to help become an awesome UI designer, along with interactive challenges, available for a low monthly fee.']}, {'end': 2037.936, 'segs': [{'end': 891.787, 'src': 'embed', 'start': 863.239, 'weight': 3, 'content': [{'end': 869.143, 'text': 'Sometimes you can have navigation right next to the logo, but you still need to have good white space between it.', 'start': 863.239, 'duration': 5.904}, {'end': 874.926, 'text': 'And we also have to reinforce another UI design fundamental called visual hierarchy.', 'start': 869.583, 'duration': 5.343}, {'end': 878.028, 'text': 'Right now these are styled exactly the same right?', 'start': 875.867, 'duration': 2.161}, {'end': 891.787, 'text': "So if I were to duplicate this and create, like our work or something, another link, By the way, you don't have to follow along.", 'start': 878.809, 'duration': 12.978}], 'summary': 'Emphasize visual hierarchy and white space for better ui design.', 'duration': 28.548, 'max_score': 863.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA863239.jpg'}, {'end': 1038.56, 'src': 'heatmap', 'start': 949.049, 'weight': 0.806, 'content': [{'end': 957.598, 'text': "All right, so I'm gonna delete those two and we'll say like around 20 will be good for the size there.", 'start': 949.049, 'duration': 8.549}, {'end': 966.041, 'text': 'And what we want to do now is we want to use a feature called auto layout.', 'start': 958.739, 'duration': 7.302}, {'end': 969.742, 'text': "So what I'm going to do is click on this frame right here.", 'start': 966.181, 'duration': 3.561}, {'end': 974.283, 'text': "I'm just going to kind of left click and drag an area out right around here.", 'start': 969.802, 'duration': 4.481}, {'end': 975.044, 'text': "It doesn't really matter.", 'start': 974.343, 'duration': 0.701}, {'end': 977.004, 'text': 'We can always adjust things further.', 'start': 975.084, 'duration': 1.92}, {'end': 981.325, 'text': "And I'm going to take also our home.", 'start': 977.824, 'duration': 3.501}, {'end': 983.646, 'text': 'So the home is inside of our frame.', 'start': 981.825, 'duration': 1.821}, {'end': 988.81, 'text': "And then what I'm going to do is hit Shift A.", 'start': 984.628, 'duration': 4.182}, {'end': 989.11, 'text': 'All right.', 'start': 988.81, 'duration': 0.3}, {'end': 995.813, 'text': 'So for auto layout, we can see we have this auto layout section that has been added right here.', 'start': 989.33, 'duration': 6.483}, {'end': 1002.556, 'text': 'So the first option here are these two arrows, vertical direction or horizontal direction.', 'start': 996.954, 'duration': 5.602}, {'end': 1006.618, 'text': "You'll see what that means here in a second once we create a secondary item.", 'start': 1002.596, 'duration': 4.022}, {'end': 1013.605, 'text': 'Next up we have right here in this is the spacing between items.', 'start': 1008.539, 'duration': 5.066}, {'end': 1022.655, 'text': "Again, we have to give this more context because there's only one item, but that creates white space between the child elements inside of the frame.", 'start': 1013.665, 'duration': 8.99}, {'end': 1025.157, 'text': 'So as you can see, we have a frame and then inside of here we have home.', 'start': 1022.675, 'duration': 2.482}, {'end': 1029.137, 'text': "And let's just go ahead and duplicate one right here.", 'start': 1027.057, 'duration': 2.08}, {'end': 1032.819, 'text': 'So now we have to link our menu items.', 'start': 1029.758, 'duration': 3.061}, {'end': 1034.579, 'text': "I'm planning on having three.", 'start': 1033.479, 'duration': 1.1}, {'end': 1038.56, 'text': "So let's just like hit control D to replicate those.", 'start': 1034.618, 'duration': 3.942}], 'summary': 'Demonstration of using auto layout feature, creating spacing and duplicating items.', 'duration': 89.511, 'max_score': 949.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA949049.jpg'}, {'end': 1188.776, 'src': 'embed', 'start': 1165.704, 'weight': 0, 'content': [{'end': 1173.748, 'text': 'So over here, we could put a small call to action, like get a quote, all right, for design services or something like that.', 'start': 1165.704, 'duration': 8.044}, {'end': 1178.571, 'text': "So to do that, let's go ahead and create an actual button, not just a link like these.", 'start': 1174.369, 'duration': 4.202}, {'end': 1184.414, 'text': "I wouldn't really call these buttons because they're not encased in anything like a pill-shaped container or whatever.", 'start': 1179.251, 'duration': 5.163}, {'end': 1186.475, 'text': "So let's do that.", 'start': 1185.455, 'duration': 1.02}, {'end': 1188.776, 'text': "What I'm going to do is take this tool right here.", 'start': 1186.495, 'duration': 2.281}], 'summary': 'Creating a call to action button for design services.', 'duration': 23.072, 'max_score': 1165.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA1165704.jpg'}, {'end': 1254.817, 'src': 'heatmap', 'start': 1208.876, 'weight': 1, 'content': [{'end': 1211.057, 'text': 'Control and your mouse scroll wheel, by the way.', 'start': 1208.876, 'duration': 2.181}, {'end': 1215.94, 'text': 'If you want to pan, use the space bar and left click.', 'start': 1211.617, 'duration': 4.323}, {'end': 1216.621, 'text': 'All right.', 'start': 1216.44, 'duration': 0.181}, {'end': 1224.726, 'text': "So inside of here, we're going to go ahead and just going to put some type, get a quote.", 'start': 1216.801, 'duration': 7.925}, {'end': 1226.467, 'text': 'All right.', 'start': 1226.207, 'duration': 0.26}, {'end': 1233.518, 'text': "so now i, if i zoom up, we'll see these little radius buttons.", 'start': 1228.112, 'duration': 5.406}, {'end': 1241.245, 'text': "we're going to take those and drag them all the way in to create that pill shape container and we're going to take this and this.", 'start': 1233.518, 'duration': 7.727}, {'end': 1248.534, 'text': "so i'm going to hold shift, select both of them, and then we're going to hit shift a to do auto layout, All right.", 'start': 1241.245, 'duration': 7.289}, {'end': 1254.817, 'text': "So now if I left click this, it's not behaving like I want it to, because we want this to say in the center of this element.", 'start': 1248.774, 'duration': 6.043}], 'summary': 'Demonstration of design tool functions and alignment adjustments.', 'duration': 45.941, 'max_score': 1208.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA1208876.jpg'}, {'end': 1391.065, 'src': 'embed', 'start': 1359.736, 'weight': 1, 'content': [{'end': 1364.259, 'text': 'And the one thing I would change about this call to action is make it stick out a little bit more.', 'start': 1359.736, 'duration': 4.523}, {'end': 1366.48, 'text': 'You could do a couple things in order to achieve that.', 'start': 1364.299, 'duration': 2.181}, {'end': 1374.105, 'text': 'You could take the background, for instance, and we can make it our primary color.', 'start': 1367.481, 'duration': 6.624}, {'end': 1378.628, 'text': 'And then we can make the text white and bold.', 'start': 1375.026, 'duration': 3.602}, {'end': 1384.082, 'text': 'So now this button really stands out like a proper call to action.', 'start': 1380.421, 'duration': 3.661}, {'end': 1391.065, 'text': 'Or you can make it less subtle, less subtle, or more subtle.', 'start': 1385.143, 'duration': 5.922}], 'summary': 'Enhance the call to action by making it more prominent with a different background color and bold white text.', 'duration': 31.329, 'max_score': 1359.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA1359736.jpg'}, {'end': 1457.656, 'src': 'embed', 'start': 1431.893, 'weight': 2, 'content': [{'end': 1439.696, 'text': 'So being that this is a design for a homepage of a SaaS, like a software as a service or whatever,', 'start': 1431.893, 'duration': 7.803}, {'end': 1445.778, 'text': "I really want to stress that you should have a really good ad copy, and that's achieved through a strong headline.", 'start': 1439.696, 'duration': 6.082}, {'end': 1446.018, 'text': 'all right?', 'start': 1445.778, 'duration': 0.24}, {'end': 1449.714, 'text': "um, let's create the headline right now.", 'start': 1446.759, 'duration': 2.955}, {'end': 1457.656, 'text': 'um so I talk about this a lot in my live streams when it comes to choosing good ad copy.', 'start': 1449.714, 'duration': 7.942}], 'summary': 'Designing a saas homepage requires strong ad copy with a compelling headline.', 'duration': 25.763, 'max_score': 1431.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA1431893.jpg'}, {'end': 1862.331, 'src': 'heatmap', 'start': 1814.965, 'weight': 0.709, 'content': [{'end': 1816.566, 'text': 'So now we have an anchor point here.', 'start': 1814.965, 'duration': 1.601}, {'end': 1820.268, 'text': "and then let's say we want it to end right here.", 'start': 1817.366, 'duration': 2.902}, {'end': 1822.009, 'text': 'we could just end it right there.', 'start': 1820.268, 'duration': 1.741}, {'end': 1826.551, 'text': 'hit escape i and then make it bold and blue.', 'start': 1822.009, 'duration': 4.542}, {'end': 1829.152, 'text': "but let's give it a little bit of what's called a bezier curve.", 'start': 1826.551, 'duration': 2.601}, {'end': 1839.918, 'text': 'so if i back up a couple times with ctrl z we can left, click and drag this time now we can escape that and then we can make it our primary color.', 'start': 1829.152, 'duration': 10.766}, {'end': 1841.959, 'text': 'and then of course we want to make it a lot thicker.', 'start': 1839.918, 'duration': 2.041}, {'end': 1844.648, 'text': 'Oh, that looks good.', 'start': 1843.926, 'duration': 0.722}, {'end': 1845.108, 'text': 'All right.', 'start': 1844.668, 'duration': 0.44}, {'end': 1847.132, 'text': 'So notice what are called the end caps.', 'start': 1845.168, 'duration': 1.964}, {'end': 1857.309, 'text': "So if I X out of there, we could see that the end caps, there's no, it has like a flat end caps right here.", 'start': 1847.833, 'duration': 9.476}, {'end': 1862.331, 'text': 'If we want to make those rounded, we can go ahead and click on this.', 'start': 1858.888, 'duration': 3.443}], 'summary': 'Demonstration of graphic editing, adjusting shapes, and customizing styles in a software application.', 'duration': 47.366, 'max_score': 1814.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA1814965.jpg'}], 'start': 489.417, 'title': 'Ui design fundamentals', 'summary': 'Covers ui design fundamentals, including navigation, color selection, visual hierarchy, and the use of auto layout, emphasizing the importance of white space and symmetry, and the creation of a call to action button for a design service project.', 'chapters': [{'end': 636.772, 'start': 489.417, 'title': 'Designing website background with subtle patterns', 'summary': 'Discusses the process of selecting and implementing a subtle pattern background for a website, using the example of uigoodies.com, showcasing the use of subtle patterns for website backgrounds and demonstrating the process of implementing them in a design tool.', 'duration': 147.355, 'highlights': ['The chapter demonstrates the process of selecting and implementing a subtle pattern background for a website, using the example of uigoodies.com, and showcases the use of subtle patterns for website backgrounds.', "The speaker emphasizes the use of subtle patterns from uigoodies.com, showcasing the various options available and the process of selecting a specific pattern, such as the 'Greek vase' pattern.", 'The speaker explains the process of implementing the selected subtle pattern as a repeating background, adjusting the size and other visual properties using a design tool.']}, {'end': 1357.6, 'start': 637.541, 'title': 'Ui design fundamentals', 'summary': 'Covers ui design fundamentals and considerations for a design service project, including navigation, color selection, visual hierarchy, and the use of auto layout, emphasizing the importance of white space and symmetry, and the creation of a call to action button.', 'duration': 720.059, 'highlights': ['The importance of white space and symmetry in UI design is emphasized, demonstrating the process of creating a navigation bar, reinforcing visual hierarchy, and using auto layout to maintain appropriate spacing between elements.', 'The process of selecting a primary color for UI design is detailed, including the recommendation of minimal secondary colors and the significance of choosing a color that complements the predominant background.', 'The concept of visual hierarchy in UI design is explained, showcasing the differentiation of navigation links through adjustments in color, font weight, size, and alignment to reinforce visual hierarchy.', 'The utilization of auto layout in UI design is demonstrated, illustrating its role in creating and maintaining consistent spacing between elements, and its efficiency in component-based aspects.', 'The creation of a call to action button is outlined, covering the process of designing a pill-shaped container, applying auto layout, and adding subtle drop shadow effects to enhance its appearance.']}, {'end': 1627.32, 'start': 1359.736, 'title': 'Designing homepage call to action and headline', 'summary': 'Discusses optimizing the call to action button for a saas homepage through design changes and emphasizes the importance of creating impactful ad copy for the headline, focusing on benefits over features.', 'duration': 267.584, 'highlights': ['The importance of making the call to action button stand out on the homepage of a SaaS is emphasized through design changes like using the primary color as the background, making the text white and bold, and ensuring it stands out more than other elements.', 'The significance of creating a strong headline for a SaaS homepage is highlighted, emphasizing the need to focus on benefits over features in the ad copy and using visual hierarchy to make the headline more impactful.', 'The process of optimizing the headline is detailed, including increasing its size for greater emphasis, adjusting the type and line height, and refining the ad copy to emphasize benefits, ultimately creating a compelling and impactful headline for the SaaS homepage.']}, {'end': 2037.936, 'start': 1627.76, 'title': 'Design layout and visual hierarchy', 'summary': 'Discusses the importance of design layout, visual hierarchy, and call to action in creating a consistent and accurate user interface, emphasizing the use of alignment, color, contrast, and scale to draw attention to the primary elements, while also highlighting the significance of a prominent call to action for user engagement.', 'duration': 410.176, 'highlights': ['The significance of maintaining alignment, color, contrast, and scale for a consistent and accurate layout is emphasized, with examples illustrating how minor adjustments affect the flow of the design.', 'The process of creating a sub-headline to reinforce the visual hierarchy through font size, style, and color is demonstrated, showcasing the impact of these adjustments on the overall design.', 'The importance of a prominent call to action and the use of UI design fundamentals such as color, contrast, and scale to draw attention to the primary elements are highlighted, emphasizing the need to make the call to action stand out through visual hierarchy.']}], 'duration': 1548.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA489417.jpg', 'highlights': ['The process of creating a call to action button is outlined, covering the process of designing a pill-shaped container, applying auto layout, and adding subtle drop shadow effects to enhance its appearance.', 'The importance of making the call to action button stand out on the homepage of a SaaS is emphasized through design changes like using the primary color as the background, making the text white and bold, and ensuring it stands out more than other elements.', 'The process of optimizing the headline is detailed, including increasing its size for greater emphasis, adjusting the type and line height, and refining the ad copy to emphasize benefits, ultimately creating a compelling and impactful headline for the SaaS homepage.', 'The concept of visual hierarchy in UI design is explained, showcasing the differentiation of navigation links through adjustments in color, font weight, size, and alignment to reinforce visual hierarchy.']}, {'end': 2442.855, 'segs': [{'end': 2086.063, 'src': 'embed', 'start': 2063.313, 'weight': 0, 'content': [{'end': 2071.536, 'text': "integral aspect of Figma and also similar design software like Adobe XD is are the plugins that they've introduced in the past couple of years.", 'start': 2063.313, 'duration': 8.223}, {'end': 2076.98, 'text': "So there's a plugin ecosystem where third-party developers can create awesome plugins that do a ton of things.", 'start': 2071.597, 'duration': 5.383}, {'end': 2079.681, 'text': "I'm a huge fan of plugins.", 'start': 2077.48, 'duration': 2.201}, {'end': 2086.063, 'text': "mods if we're even talking about gaming like the gaming community on PCs, by the way used to be so much better than what it is today,", 'start': 2079.681, 'duration': 6.382}], 'summary': 'Figma and adobe xd have an integral plugin ecosystem for third-party developers, offering a wide range of functions.', 'duration': 22.75, 'max_score': 2063.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2063313.jpg'}, {'end': 2155.575, 'src': 'embed', 'start': 2127.941, 'weight': 1, 'content': [{'end': 2135.206, 'text': "If you want to install it as well to follow along, you can search like, I think it's called Iconify.", 'start': 2127.941, 'duration': 7.265}, {'end': 2136.547, 'text': 'There we go.', 'start': 2136.147, 'duration': 0.4}, {'end': 2137.668, 'text': "So I haven't installed already.", 'start': 2136.667, 'duration': 1.001}, {'end': 2145.03, 'text': 'Just click install and then go back to your document and we will click on plugins and iconify.', 'start': 2137.688, 'duration': 7.342}, {'end': 2150.532, 'text': "It'll take a little bit of a second to load and just type in like magnify right here.", 'start': 2145.05, 'duration': 5.482}, {'end': 2155.575, 'text': "and then find icons and they'll show up down here just as they have it remembered my last search.", 'start': 2151.252, 'duration': 4.323}], 'summary': "Install iconify plugin, search for 'magnify' to find icons for document.", 'duration': 27.634, 'max_score': 2127.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2127941.jpg'}, {'end': 2234.403, 'src': 'embed', 'start': 2209.255, 'weight': 3, 'content': [{'end': 2216.357, 'text': "in this button We're gonna take all three and we're gonna hit shift a and as you see, auto layout has been added.", 'start': 2209.255, 'duration': 7.102}, {'end': 2225.04, 'text': "let's also double click into here and We want to change right here the court, the corner radius, as it's called.", 'start': 2216.357, 'duration': 8.683}, {'end': 2226.78, 'text': "We're gonna make this a pill.", 'start': 2225.04, 'duration': 1.74}, {'end': 2234.403, 'text': "so I'm just typing 50 and now it changes all these sides, although if you wanted to control the top, left, right and bottom.", 'start': 2226.78, 'duration': 7.623}], 'summary': 'Added auto layout and changed corner radius to 50.', 'duration': 25.148, 'max_score': 2209.255, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2209255.jpg'}, {'end': 2414.863, 'src': 'embed', 'start': 2341.96, 'weight': 5, 'content': [{'end': 2350.764, 'text': 'you should engage in usability testing, split testing, in order to find out how your actual real users want to interact with it.', 'start': 2341.96, 'duration': 8.804}, {'end': 2354.727, 'text': "Because we can make all the assumptions in a row as designers and many times we're wrong.", 'start': 2350.805, 'duration': 3.922}, {'end': 2355.607, 'text': 'All right.', 'start': 2355.367, 'duration': 0.24}, {'end': 2359.868, 'text': "So I would say that's pretty good right here so far.", 'start': 2356.067, 'duration': 3.801}, {'end': 2362.669, 'text': 'So now we have this big empty space right here.', 'start': 2359.928, 'duration': 2.741}, {'end': 2367.451, 'text': "What are we going to put in this empty space? There's a lot of different things.", 'start': 2363.049, 'duration': 4.402}, {'end': 2375.973, 'text': "What's common? A common design pattern, for this is, by the way, this whole section right here is sometimes referred to as the hero section,", 'start': 2367.571, 'duration': 8.402}, {'end': 2377.414, 'text': 'is an illustration of some sort.', 'start': 2375.973, 'duration': 1.441}, {'end': 2378.774, 'text': 'It could be animated.', 'start': 2377.694, 'duration': 1.08}, {'end': 2380.775, 'text': "There's a lot of things that you can do.", 'start': 2378.794, 'duration': 1.981}, {'end': 2384.339, 'text': 'When it comes to design in general.', 'start': 2382.036, 'duration': 2.303}, {'end': 2395.513, 'text': "there's so many subjective things that we could do that aren't considered necessarily right or wrong, and very few objective things that you can do.", 'start': 2384.339, 'duration': 11.174}, {'end': 2399.517, 'text': "So with that said, let's go back to that UI goodies, and we can come to.", 'start': 2395.613, 'duration': 3.904}, {'end': 2404.4, 'text': 'illustrations and we can choose.', 'start': 2400.879, 'duration': 3.521}, {'end': 2405.2, 'text': 'I to go.', 'start': 2404.4, 'duration': 0.8}, {'end': 2407.541, 'text': 'you know any of these illustration sites.', 'start': 2405.2, 'duration': 2.341}, {'end': 2411.262, 'text': 'some of them are paid resources arm for me.', 'start': 2407.541, 'duration': 3.721}, {'end': 2413.283, 'text': "I'm gonna choose.", 'start': 2411.262, 'duration': 2.021}, {'end': 2414.863, 'text': "let's see here.", 'start': 2413.283, 'duration': 1.58}], 'summary': 'Engage in usability and split testing to understand user interaction and design patterns for better user experience.', 'duration': 72.903, 'max_score': 2341.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2341960.jpg'}], 'start': 2038.925, 'title': 'Design plugins and ui adjustments', 'summary': 'Discusses the benefits of third-party design plugins for figma and xd, including a demonstration of the installation and usage of the iconify plugin. it also covers ui adjustments using auto layout, resizing elements, padding adjustments, and color preferences for a button, emphasizing usability testing and design patterns for the hero section.', 'chapters': [{'end': 2209.255, 'start': 2038.925, 'title': 'Using plugins for design in figma and xd', 'summary': 'Discusses using plugins in figma and xd, highlighting the benefits of third-party plugins for design software as well as demonstrating the installation and usage of a specific plugin called iconify.', 'duration': 170.33, 'highlights': ['The chapter discusses the benefits of third-party plugins in Figma and XD. The speaker emphasizes the integral aspect of Figma and XD plugins, highlighting their ability to enhance design software functionality.', 'Demonstrating the installation and usage of the Iconify plugin. The speaker demonstrates the installation of the Iconify plugin and explains how it can be used to easily access and incorporate pre-designed icons into the design, showcasing its time-saving benefits.', 'Emphasizing the convenience and consistency achieved by using pre-designed icons from plugins. The speaker highlights the efficiency of using pre-designed icons from plugins, mentioning the ability to change colors and ensure consistency in the design, thus saving time and maintaining a consistent visual aesthetic.']}, {'end': 2442.855, 'start': 2209.255, 'title': 'Ui design adjustments and color preferences', 'summary': 'Covers making ui adjustments using auto layout, resizing elements, adjusting padding, and considering color preferences for a button while emphasizing the importance of usability testing and exploring design patterns for the hero section.', 'duration': 233.6, 'highlights': ['Auto layout is added by selecting all elements and pressing shift A, allowing for quick adjustments and maintaining alignment.', 'Adjusting the corner radius to 50 creates a pill shape for the button and enables control over individual sides if needed.', 'Considering color preferences for the button and highlighting the importance of usability testing and split testing to determine real user interaction.', 'Exploring design patterns for the hero section and considering the use of illustrations or animations to fill empty space.', 'Exploring various resources for illustrations and making a choice based on personal preference and requirements.']}], 'duration': 403.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2038925.jpg', 'highlights': ['The chapter discusses the benefits of third-party plugins in Figma and XD, emphasizing their ability to enhance design software functionality.', 'Demonstrating the installation and usage of the Iconify plugin, showcasing its time-saving benefits for incorporating pre-designed icons into the design.', 'Emphasizing the convenience and consistency achieved by using pre-designed icons from plugins, saving time and maintaining a consistent visual aesthetic.', 'Auto layout is added by selecting all elements and pressing shift A, allowing for quick adjustments and maintaining alignment.', 'Adjusting the corner radius to 50 creates a pill shape for the button and enables control over individual sides if needed.', 'Considering color preferences for the button and highlighting the importance of usability testing and split testing to determine real user interaction.', 'Exploring design patterns for the hero section and considering the use of illustrations or animations to fill empty space.', 'Exploring various resources for illustrations and making a choice based on personal preference and requirements.']}, {'end': 3061.941, 'segs': [{'end': 2555.48, 'src': 'embed', 'start': 2530.881, 'weight': 1, 'content': [{'end': 2537.404, 'text': "Although in a real world scenario, you would want to create probably a lot more content, but I don't want to get redundant here.", 'start': 2530.881, 'duration': 6.523}, {'end': 2549.614, 'text': "So I'm gonna break up the flow between this whole top section, like right here, and the next section down here,", 'start': 2537.424, 'duration': 12.19}, {'end': 2551.996, 'text': 'and you can do that by changing up the background.', 'start': 2549.614, 'duration': 2.382}, {'end': 2555.48, 'text': "that's one such way, you don't have to, but I'm gonna choose to do that.", 'start': 2551.996, 'duration': 3.484}], 'summary': 'Suggests breaking up content with background changes for better flow.', 'duration': 24.599, 'max_score': 2530.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2530881.jpg'}, {'end': 2643.53, 'src': 'embed', 'start': 2614.761, 'weight': 0, 'content': [{'end': 2618.683, 'text': "So we'll take those two whole shifts, select both of them and just scale them down.", 'start': 2614.761, 'duration': 3.922}, {'end': 2624.105, 'text': 'Cause you want to have a lot of white space and you want your, your design to be able to breathe.', 'start': 2619.523, 'duration': 4.582}, {'end': 2627.786, 'text': 'So I may even pull this down more and then pull this.', 'start': 2624.145, 'duration': 3.641}, {'end': 2634.243, 'text': "All right, so now we're looking a little bit less cluttered and things have more room to breathe here.", 'start': 2629.639, 'duration': 4.604}, {'end': 2643.53, 'text': "And so over here, I think I'm gonna have, you could have like the hour work section, like where you have your portfolio.", 'start': 2634.983, 'duration': 8.547}], 'summary': 'Scaling shifts to create more white space for a less cluttered and breathable design.', 'duration': 28.769, 'max_score': 2614.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2614761.jpg'}, {'end': 2696.148, 'src': 'embed', 'start': 2659.741, 'weight': 2, 'content': [{'end': 2663.002, 'text': 'And then maybe just some lorem ipsum text on this side.', 'start': 2659.741, 'duration': 3.261}, {'end': 2665.023, 'text': "You'll see what I mean in a second.", 'start': 2663.743, 'duration': 1.28}, {'end': 2666.484, 'text': "So let's create these cards over here.", 'start': 2665.043, 'duration': 1.441}, {'end': 2671.026, 'text': "So to do that, I'm going to create the background form first.", 'start': 2667.324, 'duration': 3.702}, {'end': 2680.871, 'text': 'And again, to zoom up, control your mouse scroll wheel to pan, space bar and left click.', 'start': 2674.208, 'duration': 6.663}, {'end': 2682.232, 'text': "We're going to make this white.", 'start': 2681.371, 'duration': 0.861}, {'end': 2696.148, 'text': "to pull the edges in all right and we'll also give it a drop shadow and we'll adjust it again.", 'start': 2684.122, 'duration': 12.026}], 'summary': 'Creating cards with white background and drop shadow.', 'duration': 36.407, 'max_score': 2659.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2659741.jpg'}, {'end': 2843.979, 'src': 'embed', 'start': 2807.3, 'weight': 3, 'content': [{'end': 2808.501, 'text': 'That looks pretty good there.', 'start': 2807.3, 'duration': 1.201}, {'end': 2813.182, 'text': "Now let's take all three of these shift a to auto layout it.", 'start': 2808.521, 'duration': 4.661}, {'end': 2821.145, 'text': "And let's also go ahead and just change everything to zero here.", 'start': 2814.443, 'duration': 6.702}, {'end': 2827.967, 'text': "Now, the reason there's like more on the bottom is because of the width or the height of that text container.", 'start': 2822.145, 'duration': 5.822}, {'end': 2830.928, 'text': "So now it's just like this.", 'start': 2829.568, 'duration': 1.36}, {'end': 2835.09, 'text': 'So now what we can do is just increase the padding all around.', 'start': 2832.089, 'duration': 3.001}, {'end': 2843.979, 'text': "And here's a good example where I maybe I don't want equal padding all the way around.", 'start': 2838.035, 'duration': 5.944}], 'summary': 'Adjusting layout and padding for better design and alignment.', 'duration': 36.679, 'max_score': 2807.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2807300.jpg'}, {'end': 2894.323, 'src': 'embed', 'start': 2867.611, 'weight': 4, 'content': [{'end': 2871.113, 'text': "All right, so now it's all centered up as we want it.", 'start': 2867.611, 'duration': 3.502}, {'end': 2883.237, 'text': "Now I'm gonna show you kind of a little bit more of an advanced trick that I learned for using auto layout and trying to get items that don't necessarily fit inside of the container.", 'start': 2871.293, 'duration': 11.944}, {'end': 2884.617, 'text': "So let me just show you what I'm talking about.", 'start': 2883.257, 'duration': 1.36}, {'end': 2886.738, 'text': "Probably hard to understand what I'm talking about.", 'start': 2884.858, 'duration': 1.88}, {'end': 2893.743, 'text': "So let's take an ellipse and we're gonna put, a circle based avatar or like a picture of myself.", 'start': 2886.778, 'duration': 6.965}, {'end': 2894.323, 'text': 'All right.', 'start': 2894.023, 'duration': 0.3}], 'summary': "Demonstrating an advanced trick for using auto layout with elements that don't fit inside the container.", 'duration': 26.712, 'max_score': 2867.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2867611.jpg'}], 'start': 2444.137, 'title': 'Website and ui/ux design principles', 'summary': 'Covers website design layout and elements, emphasizing positioning, white space, and visual hierarchy, along with ui/ux design tips such as adjusting text styles, utilizing auto layout, and advanced positioning techniques.', 'chapters': [{'end': 2772.516, 'start': 2444.137, 'title': 'Website design: layout and elements', 'summary': 'Demonstrates the process of designing the layout and elements for a website, emphasizing the importance of positioning, white space, and visual hierarchy, using practical examples and design principles.', 'duration': 328.379, 'highlights': ['The chapter emphasizes the importance of positioning, white space, and visual hierarchy in website design. The speaker discusses the significance of positioning elements and ensuring adequate white space to maintain visual balance and hierarchy.', 'Practical examples and design principles are used to illustrate the process of designing layout and elements for a website. The speaker provides practical examples of adjusting positioning, scaling elements, creating a 50-50 column layout, and using drop shadows to demonstrate design principles.', 'The speaker demonstrates the process of designing cards, including adjusting background, adding text, and creating visual hierarchy. The speaker guides through creating cards, adjusting background color, adding text, and emphasizing the importance of visual hierarchy and letter spacing.']}, {'end': 3061.941, 'start': 2772.516, 'title': 'Ui/ux design tips & tricks', 'summary': 'Discusses ui/ux design principles, including adjusting text styles, utilizing auto layout for equal padding, and advanced techniques for positioning elements, offering practical insights for better design.', 'duration': 289.425, 'highlights': ['The chapter discusses adjusting text styles and utilizing auto layout for equal padding, offering practical insights for better design. The speaker demonstrates adjusting text styles and using auto layout to achieve equal padding, providing practical insights into UI/UX design.', 'The chapter also covers advanced techniques for positioning elements within containers, emphasizing the importance of proper spacing and alignment. The speaker shares advanced techniques for positioning elements within containers, highlighting the significance of proper spacing and alignment for effective design.']}], 'duration': 617.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA2444137.jpg', 'highlights': ['The chapter emphasizes the importance of positioning, white space, and visual hierarchy in website design.', 'Practical examples and design principles are used to illustrate the process of designing layout and elements for a website.', 'The speaker demonstrates the process of designing cards, including adjusting background, adding text, and creating visual hierarchy.', 'The chapter discusses adjusting text styles and utilizing auto layout for equal padding, offering practical insights for better design.', 'The chapter also covers advanced techniques for positioning elements within containers, emphasizing the importance of proper spacing and alignment.']}, {'end': 3745.777, 'segs': [{'end': 3174.534, 'src': 'embed', 'start': 3139.936, 'weight': 0, 'content': [{'end': 3140.696, 'text': 'All right, Jane Doe.', 'start': 3139.936, 'duration': 0.76}, {'end': 3142.997, 'text': 'All right.', 'start': 3142.617, 'duration': 0.38}, {'end': 3147.419, 'text': 'So I think that works pretty well right there.', 'start': 3144.398, 'duration': 3.021}, {'end': 3152.022, 'text': "Of course, you probably want to change up the type here, but I'm not going to worry about that for now.", 'start': 3147.439, 'duration': 4.583}, {'end': 3156.844, 'text': "So now, let's go ahead.", 'start': 3154.963, 'duration': 1.881}, {'end': 3159.245, 'text': 'I want to show you another aspect here of Figma.', 'start': 3156.864, 'duration': 2.381}, {'end': 3164.608, 'text': 'If we go to Plugins, Manage Plugins, we can go to Community.', 'start': 3159.285, 'duration': 5.323}, {'end': 3166.912, 'text': 'and files under files.', 'start': 3165.712, 'duration': 1.2}, {'end': 3168.613, 'text': "So there's some cool things happening here.", 'start': 3166.932, 'duration': 1.681}, {'end': 3174.534, 'text': 'These are things that are resources people have created that you can use and download and all that good stuff.', 'start': 3169.673, 'duration': 4.861}], 'summary': "Introduction to figma's community resources and plugins.", 'duration': 34.598, 'max_score': 3139.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA3139936.jpg'}, {'end': 3401.471, 'src': 'embed', 'start': 3372.217, 'weight': 1, 'content': [{'end': 3377.14, 'text': 'Components So components are reusable elements.', 'start': 3372.217, 'duration': 4.923}, {'end': 3379.961, 'text': 'So like for instance, buttons.', 'start': 3377.36, 'duration': 2.601}, {'end': 3384.704, 'text': 'Buttons are elements that are used throughout design multiple times right?', 'start': 3380.502, 'duration': 4.202}, {'end': 3391.348, 'text': 'And if you simply duplicate a button without making it a component first and you want to make changes,', 'start': 3385.905, 'duration': 5.443}, {'end': 3395.489, 'text': "then you'll make have to make those changes to every single one.", 'start': 3392.228, 'duration': 3.261}, {'end': 3401.471, 'text': "So if you decide oh, I don't want my buttons anymore to be white, then we just take this,", 'start': 3395.509, 'duration': 5.962}], 'summary': 'Components like buttons are reusable elements in design, preventing repetitive changes.', 'duration': 29.254, 'max_score': 3372.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA3372217.jpg'}, {'end': 3515.25, 'src': 'embed', 'start': 3489.882, 'weight': 2, 'content': [{'end': 3494.823, 'text': "and you'd be able to do so and make changes and it will affect all of your artboards.", 'start': 3489.882, 'duration': 4.941}, {'end': 3500.184, 'text': "Because when you're working on a real project, you might have 10, 20, 30 different artboards.", 'start': 3494.843, 'duration': 5.341}, {'end': 3507.646, 'text': 'So you want to make use of your components, just like you want to make use of auto layout as much as possible.', 'start': 3500.605, 'duration': 7.041}, {'end': 3512.768, 'text': "So let's assume that this is going to be the our work page where we showcase work.", 'start': 3508.247, 'duration': 4.521}, {'end': 3515.25, 'text': "so i'm going to get rid of all this stuff down here.", 'start': 3513.448, 'duration': 1.802}], 'summary': 'Utilize components and auto layout to manage multiple artboards efficiently.', 'duration': 25.368, 'max_score': 3489.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA3489882.jpg'}, {'end': 3682.849, 'src': 'embed', 'start': 3652.379, 'weight': 3, 'content': [{'end': 3653.759, 'text': "There's many different ways to do this.", 'start': 3652.379, 'duration': 1.38}, {'end': 3654.739, 'text': 'Many different layouts.', 'start': 3653.819, 'duration': 0.92}, {'end': 3656.379, 'text': "There's masonry layouts.", 'start': 3654.759, 'duration': 1.62}, {'end': 3664.181, 'text': 'You can, um, you can have card layouts where it has like a thumbnail along with like a project title or case study title, whatever you want.', 'start': 3656.539, 'duration': 7.642}, {'end': 3668.842, 'text': "Um, I'm going to keep it pretty simple and we're just going to use a rectangle.", 'start': 3664.801, 'duration': 4.041}, {'end': 3672.083, 'text': 'like right here perhaps.', 'start': 3670.802, 'duration': 1.281}, {'end': 3674.664, 'text': "And then maybe we'll do another one.", 'start': 3672.943, 'duration': 1.721}, {'end': 3677.466, 'text': "Maybe we'll make it smaller.", 'start': 3674.684, 'duration': 2.782}, {'end': 3682.849, 'text': "And we'll push this like right here.", 'start': 3677.486, 'duration': 5.363}], 'summary': 'Discussion on various layout options for design, emphasizing the use of rectangles and thumbnails.', 'duration': 30.47, 'max_score': 3652.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA3652379.jpg'}], 'start': 3062.681, 'title': 'Using figma for homepage design', 'summary': 'Explores using figma plugins like unsplash and 3d shapes to add avatars and design elements, while detailing the process of creating a homepage layout in design software, emphasizing the efficiency gains from using components and their importance for real projects.', 'chapters': [{'end': 3240.951, 'start': 3062.681, 'title': 'Figma design tips and plugins', 'summary': 'Discusses using figma plugins like unsplash and 3d shapes to add avatars and design elements, demonstrating the process and possible applications.', 'duration': 178.27, 'highlights': ['The chapter demonstrates how to use Figma plugins like Unsplash to add avatars and 3D shapes for design elements, showcasing the process of selecting and incorporating these resources.', "The speaker duplicates avatars using the 'control D' command, indicating a practical approach to creating multiple design elements efficiently.", 'The chapter mentions the availability of community-created resources in Figma plugins, such as 3D shapes, offering users the ability to enhance their designs with readily available assets.']}, {'end': 3745.777, 'start': 3241.311, 'title': 'Creating a homepage layout in design software', 'summary': 'Details the process of creating a homepage layout in design software, demonstrating the use of plugins, artboards, components, and layout tools, and emphasizes the efficiency gains from using components and the importance of using them for real projects.', 'duration': 504.466, 'highlights': ['The importance of using components for real projects, as it saves time and effort by enabling changes to be applied universally rather than manually to individual elements.', 'The demonstration of the process of creating a homepage layout in design software, including the use of plugins, artboards, and layout tools, and the emphasis on extending the layout for a real business.', 'The explanation of components as reusable elements that enable universal changes and the demonstration of creating components such as buttons and headers for efficient design workflow.', 'The process of creating a second page with the demonstration of duplicating artboards and creating a sub-page container for showcasing work with layout and design elements.', 'The emphasis on using components and auto layout for efficient design workflow in real projects, and the importance of utilizing components when working on multiple artboards.', 'The demonstration of creating a container, positioning it, adding text, and using tools like the line and pen tool to create layout elements for a sub-page showcasing work.', 'The explanation and demonstration of creating a thumbnail gallery of projects with layout elements, and the demonstration of using images from Unsplash to populate the gallery quickly and effectively.']}], 'duration': 683.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA3062681.jpg', 'highlights': ['The chapter demonstrates how to use Figma plugins like Unsplash to add avatars and 3D shapes for design elements, showcasing the process of selecting and incorporating these resources.', 'The importance of using components for real projects, as it saves time and effort by enabling changes to be applied universally rather than manually to individual elements.', 'The demonstration of creating a homepage layout in design software, including the use of plugins, artboards, and layout tools, and the emphasis on extending the layout for a real business.', 'The explanation and demonstration of creating a thumbnail gallery of projects with layout elements, and the demonstration of using images from Unsplash to populate the gallery quickly and effectively.', 'The emphasis on using components and auto layout for efficient design workflow in real projects, and the importance of utilizing components when working on multiple artboards.']}, {'end': 4308.611, 'segs': [{'end': 3798.584, 'src': 'embed', 'start': 3771.447, 'weight': 2, 'content': [{'end': 3777.311, 'text': 'Like, if somebody clicks on our work or our work right here, how would we make it go to this page right?', 'start': 3771.447, 'duration': 5.864}, {'end': 3781.213, 'text': "So that's what the prototype tabs over here for.", 'start': 3777.791, 'duration': 3.422}, {'end': 3789.517, 'text': "So when we switch to the prototype tab, when we click on an element, we don't have all the normal visual properties we can change over here anymore.", 'start': 3781.493, 'duration': 8.024}, {'end': 3792.319, 'text': 'We have the prototyping properties that show up.', 'start': 3790.018, 'duration': 2.301}, {'end': 3798.584, 'text': "So whenever you click an element, you'll see you have a little arrow right there or not an arrow,", 'start': 3792.919, 'duration': 5.665}], 'summary': 'The prototype tab allows setting prototyping properties for elements, enabling easy navigation to specific pages.', 'duration': 27.137, 'max_score': 3771.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA3771447.jpg'}, {'end': 3864.38, 'src': 'embed', 'start': 3838.023, 'weight': 3, 'content': [{'end': 3847.99, 'text': 'And you can then control the easings of this, which is how the animation is applied and how it flows during the defined duration.', 'start': 3838.023, 'duration': 9.967}, {'end': 3849.811, 'text': "And right here is by default, it's 300 milliseconds.", 'start': 3848.17, 'duration': 1.641}, {'end': 3860.498, 'text': "So now, if we go ahead and hit play, we're gonna get a new window that's opened up and let it load because sometimes it takes time.", 'start': 3851.912, 'duration': 8.586}, {'end': 3864.38, 'text': 'And now if we click on our work, there we go.', 'start': 3861.058, 'duration': 3.322}], 'summary': 'Control easings for animation, default duration 300ms.', 'duration': 26.357, 'max_score': 3838.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA3838023.jpg'}, {'end': 4304.906, 'src': 'embed', 'start': 4255.229, 'weight': 0, 'content': [{'end': 4260.051, 'text': "And let's go back to home our work, hover, hover works, click on this.", 'start': 4255.229, 'duration': 4.822}, {'end': 4261.192, 'text': 'And there we go.', 'start': 4260.332, 'duration': 0.86}, {'end': 4265.774, 'text': "Now it's working exactly as we want it to.", 'start': 4261.812, 'duration': 3.962}, {'end': 4271.657, 'text': 'So our work, look at that.', 'start': 4266.514, 'duration': 5.143}, {'end': 4275.585, 'text': 'awesome, awesome stuff.', 'start': 4274.224, 'duration': 1.361}, {'end': 4275.925, 'text': 'all right.', 'start': 4275.585, 'duration': 0.34}, {'end': 4282.97, 'text': "so hopefully i've ignited a fire and motivation in you and inspired you to keep on learning ui ux design.", 'start': 4275.925, 'duration': 7.045}, {'end': 4292.377, 'text': 'now, if you really want to take this seriously, definitely go to designcourse.com i and enter your email to be notified when i release this service.', 'start': 4282.97, 'duration': 9.407}, {'end': 4298.801, 'text': "all right, it's going to help you learn ui ux design from scratch through ui tests, live workshops,", 'start': 4292.377, 'duration': 6.424}, {'end': 4302.484, 'text': 'challenges and full courses all in this single service.', 'start': 4298.801, 'duration': 3.683}, {'end': 4304.906, 'text': 'All right, so hopefully you enjoyed that.', 'start': 4302.944, 'duration': 1.962}], 'summary': 'Motivation to learn ui/ux design: visit designcourse.com for comprehensive learning resources.', 'duration': 49.677, 'max_score': 4255.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA4255229.jpg'}], 'start': 3746.237, 'title': 'Ui/ux design techniques', 'summary': 'Covers ui/ux design techniques such as image tinting, component creation, smart animation, and page design, with a focus on practical demonstrations and motivation, promoting a ui/ux design learning service.', 'chapters': [{'end': 3917.802, 'start': 3746.237, 'title': 'Ui design fundamentals and prototyping', 'summary': 'Discusses the importance of ui design fundamentals and demonstrates the process of prototyping using prototyping properties, interaction details, animation options, and easings, with a focus on creating smooth transitions and user interactions.', 'duration': 171.565, 'highlights': ['The importance of UI design fundamentals and the need to visit designcourse.com for further information Lack of UI design fundamentals can result in difficulty making designs look good. The website designcourse.com is being worked on for addressing these fundamentals.', 'Demonstration of using prototype tabs for transitioning between elements and artboards The demonstration showcases how to use the prototype tab to create smooth transitions between elements and artboards by specifying interaction details and animation options.', 'Explanation of animation options and easings for controlling the flow and duration of animations The tutorial explains various animation options such as dissolve, smart animate, move in, move out, and push, along with the control of easings to apply and define the animation duration.']}, {'end': 4308.611, 'start': 3917.802, 'title': 'Ui/ux design techniques', 'summary': 'Demonstrates the process of creating interactive ui/ux design elements, including image tinting, component creation, smart animation, and page design, aiming to inspire and motivate learners with practical demonstrations and a promotion for a ui/ux design learning service.', 'duration': 390.809, 'highlights': ['The chapter demonstrates the process of creating interactive UI/UX design elements, including image tinting, component creation, smart animation, and page design, aiming to inspire and motivate learners with practical demonstrations and a promotion for a UI/UX design learning service.', 'The speaker showcases the creation of interactive UI/UX design elements through practical demonstrations, such as image tinting, component creation, smart animation, and page design, to inspire and motivate learners.', 'The speaker promotes a UI/UX design learning service available at designcourse.com, offering UI tests, live workshops, challenges, and full courses, aiming to inspire and motivate learners to further their UI/UX design skills.']}], 'duration': 562.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Gu1so3pz4bA/pics/Gu1so3pz4bA3746237.jpg', 'highlights': ['The speaker promotes a UI/UX design learning service available at designcourse.com, offering UI tests, live workshops, challenges, and full courses, aiming to inspire and motivate learners to further their UI/UX design skills.', 'The chapter demonstrates the process of creating interactive UI/UX design elements, including image tinting, component creation, smart animation, and page design, aiming to inspire and motivate learners with practical demonstrations and a promotion for a UI/UX design learning service.', 'Demonstration of using prototype tabs for transitioning between elements and artboards The demonstration showcases how to use the prototype tab to create smooth transitions between elements and artboards by specifying interaction details and animation options.', 'Explanation of animation options and easings for controlling the flow and duration of animations The tutorial explains various animation options such as dissolve, smart animate, move in, move out, and push, along with the control of easings to apply and define the animation duration.']}], 'highlights': ['Figma offers a free version with up to three projects and 30-day version history, making it accessible for beginners and small-scale projects.', 'Professional version of Figma is priced at $12 per editor per month, offering additional features for a relatively low cost, making it an affordable option for designers and teams.', 'Figma is a UI UX design and prototyping tool suitable for creating website and app prototypes with a focus on design and functionality.', 'The speaker promotes an upcoming UI/UX design learning service, offering UI tests, live workshops, challenges, full courses, and more through a monthly subscription service in 2021.', 'The tutorial guides users on creating a new document in Figma, choosing predefined artboards for website design, and adjusting dimensions for different devices such as desktop, tablet, and phone.', 'The chapter focuses on two main aspects: using the Figma app and understanding UI design principles, emphasizing that UI design is 90% of the battle.', 'The process of creating a call to action button is outlined, covering the process of designing a pill-shaped container, applying auto layout, and adding subtle drop shadow effects to enhance its appearance.', 'The importance of making the call to action button stand out on the homepage of a SaaS is emphasized through design changes like using the primary color as the background, making the text white and bold, and ensuring it stands out more than other elements.', 'The process of optimizing the headline is detailed, including increasing its size for greater emphasis, adjusting the type and line height, and refining the ad copy to emphasize benefits, ultimately creating a compelling and impactful headline for the SaaS homepage.', 'The concept of visual hierarchy in UI design is explained, showcasing the differentiation of navigation links through adjustments in color, font weight, size, and alignment to reinforce visual hierarchy.', 'The chapter discusses the benefits of third-party plugins in Figma and XD, emphasizing their ability to enhance design software functionality.', 'Demonstrating the installation and usage of the Iconify plugin, showcasing its time-saving benefits for incorporating pre-designed icons into the design.', 'The chapter emphasizes the importance of positioning, white space, and visual hierarchy in website design.', 'The speaker demonstrates the process of designing cards, including adjusting background, adding text, and creating visual hierarchy.', 'The chapter demonstrates how to use Figma plugins like Unsplash to add avatars and 3D shapes for design elements, showcasing the process of selecting and incorporating these resources.', 'The importance of using components for real projects, as it saves time and effort by enabling changes to be applied universally rather than manually to individual elements.', 'The demonstration of creating a homepage layout in design software, including the use of plugins, artboards, and layout tools, and the emphasis on extending the layout for a real business.', 'The explanation and demonstration of creating a thumbnail gallery of projects with layout elements, and the demonstration of using images from Unsplash to populate the gallery quickly and effectively.', 'The speaker promotes a UI/UX design learning service available at designcourse.com, offering UI tests, live workshops, challenges, and full courses, aiming to inspire and motivate learners to further their UI/UX design skills.', 'The chapter demonstrates the process of creating interactive UI/UX design elements, including image tinting, component creation, smart animation, and page design, aiming to inspire and motivate learners with practical demonstrations and a promotion for a UI/UX design learning service.', 'Demonstration of using prototype tabs for transitioning between elements and artboards The demonstration showcases how to use the prototype tab to create smooth transitions between elements and artboards by specifying interaction details and animation options.', 'Explanation of animation options and easings for controlling the flow and duration of animations The tutorial explains various animation options such as dissolve, smart animate, move in, move out, and push, along with the control of easings to apply and define the animation duration.']}