title
Figma Masterclass for Beginners (2023 Updated)

description
Want to learn Figma but don’t know where to start? This 2022 updated, step-by-step tutorial will give you everything you need to start using Figma in your Web and UI design projects....Remember to Subscribe https://goo.gl/6vCw64 I have been using Figma for 4 years in my design work and just love the tool so much. In this video, I cover all the basics you would need to know you start using Figma today in your professional design work. By the time you're done watching the video, you should be able to download the program, install, start making amazing things, and wonder why you ever waited to make the switch. ------------------------------------------------------------------------------------ 🤝 //////////// Get my new Intro to UI/UX design course: https://www.jesseshowalter.com/c/intro-to-ui-ux-design/? 🏆 //////////// Join my members community to get access to perks: https://designchamps.io/ 📫 ////////// Sign up for my Monthly Newsletter www.jesseshowalter.com/newsletter ------------------------------------------------------------------------------------ 🎨 ////////// I design in Figma https://psxid.figma.com/xcm8rxa8f162-cb44ct 🖥️ ////////// I build websites with Webflow https://webflow.grsm.io/4495884 📅 ////////// I run my life with Notion https://affiliate.notion.so/tokendsfahjf 🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: https://fm.pxf.io/c/1372011/1347628/16252 0:00 Intro 0:30 Getting Figma 1:40 Projects 2:43 Community 4:00 UI Tour 4:51 Assets and Libraries 8:20 Frames 10:00 Making Buttons 11:40 Auto Layout 14:30 Components 17:00 Responsive Resizing 17:58 Layout Grids 20:00 Basic Commands & Styling 21:59 Exporting 22:56 Sharing & Collaborating 24:30 Prototyping 28:00 Interactive Components

detail
{'title': 'Figma Masterclass for Beginners (2023 Updated)', 'heatmap': [{'end': 709.892, 'start': 663.095, 'weight': 1}], 'summary': 'This figma masterclass for beginners (2023 updated) includes chapters on designing with figma, utilizing figma for mobile design, styling and creating in figma, designing and utilizing components, and figma sharing, collaborating, and prototyping.', 'chapters': [{'end': 166.673, 'segs': [{'end': 73.383, 'src': 'embed', 'start': 23.706, 'weight': 0, 'content': [{'end': 26.968, 'text': 'Now I will say about pricing, you can use Figma for free.', 'start': 23.706, 'duration': 3.262}, {'end': 32.631, 'text': 'It just limits the amount of pages and documents and layers and some other things like that.', 'start': 27.268, 'duration': 5.363}, {'end': 36.515, 'text': "But as long as you keep everything in your drafts folder, which we'll talk about later,", 'start': 32.992, 'duration': 3.523}, {'end': 39.979, 'text': "it's great for people who have personal projects or just working on their own.", 'start': 36.515, 'duration': 3.464}, {'end': 41.721, 'text': 'You can use Figma for free.', 'start': 40.28, 'duration': 1.441}, {'end': 45.685, 'text': 'But as you scale up into teams and organizations, you might need a little bit more.', 'start': 41.901, 'duration': 3.784}, {'end': 47.267, 'text': "I think it's worthwhile still.", 'start': 46.086, 'duration': 1.181}, {'end': 48.849, 'text': 'Figma is a great investment.', 'start': 47.547, 'duration': 1.302}, {'end': 53.453, 'text': 'So you can go to Figma and you can either log in and use it in the browser,', 'start': 48.869, 'duration': 4.584}, {'end': 57.755, 'text': 'or you could download the local version which I have running right here on my machine.', 'start': 53.453, 'duration': 4.302}, {'end': 62.397, 'text': "Now, once you open up Figma for the very first time, you're going to be presented with the dashboard.", 'start': 58.115, 'duration': 4.282}, {'end': 63.498, 'text': "That's what we're looking at right here.", 'start': 62.437, 'duration': 1.061}, {'end': 64.498, 'text': 'The dashboard.', 'start': 63.818, 'duration': 0.68}, {'end': 69.581, 'text': "My dashboard might look a little bit more busy and filled than yours if you're opening it up for the first time.", 'start': 64.759, 'duration': 4.822}, {'end': 72.082, 'text': "But that's because I use Figma constantly.", 'start': 69.841, 'duration': 2.241}, {'end': 73.383, 'text': 'I have a lot going on in there.', 'start': 72.102, 'duration': 1.281}], 'summary': 'Figma offers free use with limitations, suitable for personal projects. paid versions recommended for teams and organizations.', 'duration': 49.677, 'max_score': 23.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-8023706.jpg'}, {'end': 115.075, 'src': 'embed', 'start': 89.274, 'weight': 3, 'content': [{'end': 96.019, 'text': "You're always able to start a new design file or what's called a new FigJam file, or you can import files, a sketch file,", 'start': 89.274, 'duration': 6.745}, {'end': 98.021, 'text': 'a Figma file or image files here.', 'start': 96.019, 'duration': 2.002}, {'end': 105.427, 'text': "down below that, we're going to be seeing all of the projects that pertain to which folder we're in.", 'start': 98.621, 'duration': 6.806}, {'end': 110.851, 'text': "now let's talk about folders, because up at the very top left hand edge, we are currently in the recents folder.", 'start': 105.427, 'duration': 5.424}, {'end': 112.252, 'text': "this is everything we've recently viewed.", 'start': 110.851, 'duration': 1.401}, {'end': 115.075, 'text': "it's just going to aggregate everything into this folder.", 'start': 112.252, 'duration': 2.823}], 'summary': 'Figjam allows starting new design file, importing sketch or figma files, and organizing projects into folders.', 'duration': 25.801, 'max_score': 89.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-8089274.jpg'}, {'end': 156.36, 'src': 'embed', 'start': 129.108, 'weight': 2, 'content': [{'end': 135.174, 'text': "this is where you're going to want to probably keep all of your work inside the drafts folder and just name things really really good,", 'start': 129.108, 'duration': 6.066}, {'end': 136.536, 'text': 'so you can keep things organized.', 'start': 135.174, 'duration': 1.362}, {'end': 142.295, 'text': "But the draft folder is where you keep everything that's not organized into what are called projects.", 'start': 136.816, 'duration': 5.479}, {'end': 147.517, 'text': "Now the projects are listed down the left hand edge and they're organized by the organization.", 'start': 142.915, 'duration': 4.602}, {'end': 149.658, 'text': "I have a few organizations that I'm working in here.", 'start': 147.577, 'duration': 2.081}, {'end': 156.36, 'text': 'If I wanted to take this draft, this Messenger app design, and move it into a project, all I have to do is grab it,', 'start': 149.858, 'duration': 6.502}], 'summary': 'Organize work in drafts folder, move to projects for better organization.', 'duration': 27.252, 'max_score': 129.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80129108.jpg'}], 'start': 0.029, 'title': 'Designing with figma', 'summary': 'Provides an overview of using figma for designing mobile applications and websites, including information on pricing, account options, navigating the dashboard, and organizing projects.', 'chapters': [{'end': 166.673, 'start': 0.029, 'title': 'Designing with figma: getting started', 'summary': 'Provides an overview of using figma for designing mobile applications and websites, including information on pricing, account options, navigating the dashboard, and organizing projects.', 'duration': 166.644, 'highlights': ['Figma can be used for free, with limitations on pages, documents, and layers, making it suitable for personal projects or individual use. Figma can be used for free, with limitations on pages, documents, and layers, making it suitable for personal projects or individual use.', 'Figma is suitable for teams and organizations, offering additional features and benefits, making it a worthwhile investment. Figma is suitable for teams and organizations, offering additional features and benefits, making it a worthwhile investment.', 'The Figma dashboard provides access to templates, new design and FigJam file creation, and file import options, making it a central hub for project management. The Figma dashboard provides access to templates, new design and FigJam file creation, and file import options, making it a central hub for project management.', 'Folders in Figma, such as Recents and Drafts, help organize and manage projects, while allowing easy access to recently viewed files and unorganized work. Folders in Figma, such as Recents and Drafts, help organize and manage projects, while allowing easy access to recently viewed files and unorganized work.', 'Projects can be organized within folders and moved between organizations, providing a structured approach to managing design files. Projects can be organized within folders and moved between organizations, providing a structured approach to managing design files.']}], 'duration': 166.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-8029.jpg', 'highlights': ['Figma is suitable for teams and organizations, offering additional features and benefits, making it a worthwhile investment.', 'The Figma dashboard provides access to templates, new design and FigJam file creation, and file import options, making it a central hub for project management.', 'Projects can be organized within folders and moved between organizations, providing a structured approach to managing design files.', 'Folders in Figma, such as Recents and Drafts, help organize and manage projects, while allowing easy access to recently viewed files and unorganized work.', 'Figma can be used for free, with limitations on pages, documents, and layers, making it suitable for personal projects or individual use.']}, {'end': 539.624, 'segs': [{'end': 213.671, 'src': 'embed', 'start': 186.512, 'weight': 0, 'content': [{'end': 189.874, 'text': 'So no longer do I have to Google and find Figma resources.', 'start': 186.512, 'duration': 3.362}, {'end': 193.236, 'text': "They're most likely all right here in the community.", 'start': 190.314, 'duration': 2.922}, {'end': 195.958, 'text': 'So when I come into the community, I can search for anything I want.', 'start': 193.496, 'duration': 2.462}, {'end': 202.423, 'text': 'I can find plugins and widgets and design systems and typography, and I can search for anything.', 'start': 196.058, 'duration': 6.365}, {'end': 210.569, 'text': 'I can search for buttons inside of here and I might get some different options files, plugins, creators, widgets,', 'start': 202.483, 'duration': 8.086}, {'end': 213.671, 'text': 'everything that I might need that relates to buttons.', 'start': 210.569, 'duration': 3.102}], 'summary': 'Figma community provides comprehensive resources, including plugins, widgets, and design systems for easy access.', 'duration': 27.159, 'max_score': 186.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80186512.jpg'}, {'end': 271.5, 'src': 'embed', 'start': 241.719, 'weight': 3, 'content': [{'end': 247.105, 'text': "In the center of the stage here, we have the canvas, and this is where you're going to do the majority of your design work.", 'start': 241.719, 'duration': 5.386}, {'end': 249.527, 'text': 'You can zoom in and out with the minus and plus key.', 'start': 247.125, 'duration': 2.402}, {'end': 253.689, 'text': 'You can also use Z and highlight and kind of zoom in that way.', 'start': 250.107, 'duration': 3.582}, {'end': 257.391, 'text': 'You can always use spacebar to move around and find elements.', 'start': 253.989, 'duration': 3.402}, {'end': 264.696, 'text': 'The V key on your toolbar or excuse me, on your keyboard is the way for you to click and actually drag things around.', 'start': 257.712, 'duration': 6.984}, {'end': 271.5, 'text': "And if you double click on groups, you'll be able to drill down into those groups and find all the different elements like so.", 'start': 264.916, 'duration': 6.584}], 'summary': 'Transcript: tips for using design software efficiently and effectively.', 'duration': 29.781, 'max_score': 241.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80241719.jpg'}, {'end': 351.688, 'src': 'embed', 'start': 327.099, 'weight': 4, 'content': [{'end': 333.141, 'text': 'And if I turn it on, I now have that library available to me inside of this Figma project.', 'start': 327.099, 'duration': 6.042}, {'end': 343.524, 'text': 'So it might be a good idea to create one design system or pattern library out of a file and then reuse that for a brand or project or a company throughout.', 'start': 333.421, 'duration': 10.103}, {'end': 345.425, 'text': 'So everything stays really, really consistent.', 'start': 343.584, 'duration': 1.841}, {'end': 346.705, 'text': "That's a way that you can do that.", 'start': 345.465, 'duration': 1.24}, {'end': 351.688, 'text': "And so you'll see any updates to those files or those libraries right there.", 'start': 347.225, 'duration': 4.463}], 'summary': 'Creating a design system in figma for consistency and reusability.', 'duration': 24.589, 'max_score': 327.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80327099.jpg'}, {'end': 506.433, 'src': 'embed', 'start': 479.918, 'weight': 5, 'content': [{'end': 484.221, 'text': 'Frames are one of the most basic but powerful tools inside of Figma.', 'start': 479.918, 'duration': 4.303}, {'end': 490.444, 'text': 'And if you can get your mind wrapped around frames, you will be a powerhouse, a power user of Figma.', 'start': 484.241, 'duration': 6.203}, {'end': 500.11, 'text': 'Unlike other design tools, frames are not just artboards, but they are containing elements that you can style and do anything you want with.', 'start': 491.004, 'duration': 9.106}, {'end': 506.433, 'text': "And you can have frames inside of frames, unlike other design tools where it's an artboard and don't put anything else on top of that artboard.", 'start': 500.15, 'duration': 6.283}], 'summary': 'Understanding frames in figma unlocks powerful design capabilities, enabling users to style and manipulate contained elements, with the added advantage of nesting frames within frames.', 'duration': 26.515, 'max_score': 479.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80479918.jpg'}], 'start': 167.034, 'title': 'Figma community benefits and using figma for mobile design', 'summary': "Discusses the benefits of accessing figma's integrated community, providing a one-stop platform for resources, and covers the basics of using figma for mobile design, including navigating the interface, utilizing assets and libraries, creating frames, and understanding the power of frames for design elements.", 'chapters': [{'end': 210.569, 'start': 167.034, 'title': 'Figma community benefits', 'summary': "Highlights the convenience of accessing figma's integrated community, which provides a one-stop platform for resources, including plugins, widgets, design systems, and typography, eliminating the need for external searches.", 'duration': 43.535, 'highlights': ['The Figma community is integrated into the tool, providing a convenient platform for resources.', 'Users no longer need to search externally for Figma resources as they are likely available within the community.', 'The community offers access to various resources such as plugins, widgets, design systems, and typography.']}, {'end': 539.624, 'start': 210.569, 'title': 'Using figma for mobile design', 'summary': 'Covers the basics of using figma for mobile design, including navigating the interface, utilizing assets and libraries, creating frames, and understanding the power of frames for design elements.', 'duration': 329.055, 'highlights': ["Understanding the interface and navigation The chapter provides an overview of Figma's canvas, zooming and panning shortcuts, layers panel, and assets panel, emphasizing familiarity for design software users.", 'Utilizing assets and libraries for design consistency The chapter explains how Figma allows the creation of design systems and pattern libraries within projects, promoting consistent design elements and updates across multiple files and libraries.', 'Importance and versatility of frames in Figma The chapter highlights the significance of frames in Figma, as they are not just artboards but also containers for styling and organizing elements, enabling the creation of frames within frames and providing a wide range of preset frame options for different devices.']}], 'duration': 372.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80167034.jpg', 'highlights': ['The Figma community is integrated into the tool, providing a convenient platform for resources.', 'Users no longer need to search externally for Figma resources as they are likely available within the community.', 'The community offers access to various resources such as plugins, widgets, design systems, and typography.', "Understanding the interface and navigation The chapter provides an overview of Figma's canvas, zooming and panning shortcuts, layers panel, and assets panel, emphasizing familiarity for design software users.", 'Utilizing assets and libraries for design consistency The chapter explains how Figma allows the creation of design systems and pattern libraries within projects, promoting consistent design elements and updates across multiple files and libraries.', 'Importance and versatility of frames in Figma The chapter highlights the significance of frames in Figma, as they are not just artboards but also containers for styling and organizing elements, enabling the creation of frames within frames and providing a wide range of preset frame options for different devices.']}, {'end': 771.092, 'segs': [{'end': 600.736, 'src': 'embed', 'start': 539.644, 'weight': 0, 'content': [{'end': 546.549, 'text': "You can see all of the elements that have to do with that frame, the X and Y values where they're placed on our canvas.", 'start': 539.644, 'duration': 6.905}, {'end': 551.03, 'text': 'as well as our width and our height, rotation and our corner radius.', 'start': 547.049, 'duration': 3.981}, {'end': 557.531, 'text': 'You can see if we bring our artboard or a frame into view, we can actually style frames and we can even round the corners.', 'start': 551.07, 'duration': 6.461}, {'end': 567.833, 'text': "So, if you prefer, while you're working to have all of your screens resemble a little bit more like that rounded kind of style of an actual device,", 'start': 557.591, 'duration': 10.242}, {'end': 571.273, 'text': 'you can grab all of them at the same time and round those corners.', 'start': 567.833, 'duration': 3.44}, {'end': 575.497, 'text': "And it's basically just going to mask them off and Work like that.", 'start': 571.333, 'duration': 4.164}, {'end': 576.478, 'text': 'I like to work like that.', 'start': 575.597, 'duration': 0.881}, {'end': 577.519, 'text': 'It just looks a little bit nicer.', 'start': 576.498, 'duration': 1.021}, {'end': 586.806, 'text': "Any frame can have matching border radius, but you can also, if you'd like, you can also have independent corners.", 'start': 577.879, 'duration': 8.927}, {'end': 589.768, 'text': 'So we click that and we can say, hey, I want this top right hand corner.', 'start': 586.826, 'duration': 2.942}, {'end': 595.292, 'text': 'to you know, like have more of a corner radius than all the other corners right?', 'start': 590.288, 'duration': 5.004}, {'end': 600.736, 'text': 'This is going to come into play a lot, because not only can you use frames for artboards like this,', 'start': 595.332, 'duration': 5.404}], 'summary': 'Figma allows styling frames, rounding corners, and matching border radius for a consistent and appealing design.', 'duration': 61.092, 'max_score': 539.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80539644.jpg'}, {'end': 709.892, 'src': 'heatmap', 'start': 663.095, 'weight': 3, 'content': [{'end': 672.783, 'text': 'Hit I for eyedropper and style that that way and then paste our text inside of our frame and then round the border radius or the corner radius of our frame.', 'start': 663.095, 'duration': 9.688}, {'end': 675.185, 'text': "And now we have a button that's built out of a frame.", 'start': 673.043, 'duration': 2.142}, {'end': 686.594, 'text': "But we could go even one more step in trying to recreate this button and we could just take the text and I can introduce you to the power of what's called auto layout inside of Figma.", 'start': 675.245, 'duration': 11.349}, {'end': 687.554, 'text': "I'm going to hold down shift.", 'start': 686.634, 'duration': 0.92}, {'end': 690.216, 'text': "I'm going to press A for auto layout.", 'start': 687.594, 'duration': 2.622}, {'end': 693.199, 'text': 'Auto layouts are frames by their very nature.', 'start': 690.717, 'duration': 2.482}, {'end': 696.281, 'text': 'They just have a little bit of a different icon and different behavior.', 'start': 693.239, 'duration': 3.042}, {'end': 703.167, 'text': "It's going to allow us to lay things into this layout and automatically space them the way that we want.", 'start': 697.042, 'duration': 6.125}, {'end': 709.892, 'text': 'So maybe we have an icon and we really want that to be inside of our button as well.', 'start': 703.547, 'duration': 6.345}], 'summary': 'Learn how to use auto layout in figma to create a button with icon and text.', 'duration': 46.797, 'max_score': 663.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80663095.jpg'}], 'start': 539.644, 'title': 'Styling and creating in figma', 'summary': 'Covers styling frames and corners in figma, allowing users to set x and y values, width, height, rotation, and corner radius. it also discusses creating buttons and icons, emphasizing the use of frames and auto layout for efficient structuring and providing workflow optimization tips.', 'chapters': [{'end': 600.736, 'start': 539.644, 'title': 'Styling frames and corners', 'summary': 'Explains how to style frames and round corners in figma, allowing users to set x and y values, width, height, rotation, and corner radius, enabling consistent or independent corner rounding for frames.', 'duration': 61.092, 'highlights': ['Users can style frames by adjusting X and Y values, width, height, rotation, and corner radius, allowing for consistent or independent corner rounding (e.g., setting top right corner to have more radius) for a more polished look.', 'Frames can be used for artboards, and users can round corners for all screens at the same time, creating a uniform rounded style for multiple elements.', 'The ability to round corners and style frames is preferred for a more polished and unified appearance, enhancing the overall look and feel of the design.']}, {'end': 771.092, 'start': 600.736, 'title': 'Creating buttons and icons in figma', 'summary': 'Discusses the process of creating buttons and icons in figma, emphasizing the use of frames and auto layout to efficiently structure and style elements, providing tips for optimizing the workflow.', 'duration': 170.356, 'highlights': ['The chapter emphasizes using frames and auto layout to efficiently structure and style elements in Figma. Frames and auto layout are highlighted as efficient methods for structuring and styling elements in Figma, promoting workflow optimization.', 'The chapter provides tips for creating buttons and icons, outlining the process of utilizing frames and auto layout for efficient button construction. Tips are provided for optimizing the workflow by utilizing frames and auto layout for efficient button construction and styling, improving the overall design process.', 'The chapter introduces the concept of auto layout, emphasizing its role in enabling automatic spacing and structuring of elements within a layout. The introduction of auto layout is emphasized for its ability to enable automatic spacing and structuring of elements within a layout, streamlining the design process.']}], 'duration': 231.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80539644.jpg', 'highlights': ['Users can style frames by adjusting X and Y values, width, height, rotation, and corner radius, allowing for consistent or independent corner rounding for a polished look.', 'The ability to round corners and style frames is preferred for a more polished and unified appearance, enhancing the overall look and feel of the design.', 'Frames can be used for artboards, and users can round corners for all screens at the same time, creating a uniform rounded style for multiple elements.', 'The chapter emphasizes using frames and auto layout to efficiently structure and style elements in Figma, promoting workflow optimization.', 'The chapter provides tips for creating buttons and icons, outlining the process of utilizing frames and auto layout for efficient button construction.', 'The introduction of auto layout is emphasized for its ability to enable automatic spacing and structuring of elements within a layout, streamlining the design process.']}, {'end': 1376.345, 'segs': [{'end': 823.08, 'src': 'embed', 'start': 790.597, 'weight': 0, 'content': [{'end': 796, 'text': 'And of course, we have automatic spacing built in, right, so we can The button will stretch with the spacing.', 'start': 790.597, 'duration': 5.403}, {'end': 799.384, 'text': 'We can always round the corners and stylize this.', 'start': 796.381, 'duration': 3.003}, {'end': 805.67, 'text': 'And if we want a little bit more padding and we want that padding to be a little bit more customized,', 'start': 799.684, 'duration': 5.986}, {'end': 808.593, 'text': 'we can change that padding here in our little interface.', 'start': 805.67, 'duration': 2.923}, {'end': 811.336, 'text': 'So do like 40 pixels on the left and right hand edge.', 'start': 808.613, 'duration': 2.723}, {'end': 815.017, 'text': "It's always going to keep that spacing as we type in our button.", 'start': 811.716, 'duration': 3.301}, {'end': 823.08, 'text': "Now you've created a really responsive button for mobile websites, for mobile applications, even desktop applications as well.", 'start': 815.437, 'duration': 7.643}], 'summary': 'Automatically responsive button with customizable padding, 40 pixels on left and right, suitable for mobile and desktop applications.', 'duration': 32.483, 'max_score': 790.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80790597.jpg'}, {'end': 861.572, 'src': 'embed', 'start': 833.424, 'weight': 1, 'content': [{'end': 837.765, 'text': 'Well, This card right here, that could or should be a frame.', 'start': 833.424, 'duration': 4.341}, {'end': 839.666, 'text': 'The image inside of it could be a frame.', 'start': 838.045, 'duration': 1.621}, {'end': 841.846, 'text': 'The button and the icon here, that could be a frame.', 'start': 839.706, 'duration': 2.14}, {'end': 847.068, 'text': 'These areas right here, like these table row cells, those could be frames.', 'start': 842.286, 'duration': 4.782}, {'end': 849.929, 'text': 'And inside of it, it could have this little image.', 'start': 847.388, 'duration': 2.541}, {'end': 851.029, 'text': 'That should be a frame.', 'start': 850.069, 'duration': 0.96}, {'end': 854.15, 'text': 'So use frames as much as you possibly can,', 'start': 851.349, 'duration': 2.801}, {'end': 861.572, 'text': "because they're going to be a lot more extendable in the future as you start to scale and make things responsive and all that kind of stuff.", 'start': 854.15, 'duration': 7.422}], 'summary': 'Use frames extensively for better scalability and responsiveness.', 'duration': 28.148, 'max_score': 833.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80833424.jpg'}, {'end': 941.284, 'src': 'embed', 'start': 914.852, 'weight': 2, 'content': [{'end': 920.314, 'text': "If we change the order even of where the icons go, it's going to change it on every single button.", 'start': 914.852, 'duration': 5.462}, {'end': 929.198, 'text': "If we change the background to the frame right and turn it into a color like that, it's gonna change it across hundreds or thousands of artboards,", 'start': 920.354, 'duration': 8.844}, {'end': 930.019, 'text': "if you'd like it to.", 'start': 929.198, 'duration': 0.821}, {'end': 936.782, 'text': 'And so creating components and using instances of those components is a way that we work smarter and not harder.', 'start': 930.279, 'duration': 6.503}, {'end': 941.284, 'text': 'So take these elements and bring our instance up into an artboard.', 'start': 936.922, 'duration': 4.362}], 'summary': 'Changing icons order affects all buttons; altering background changes across hundreds or thousands of artboards. creating components and instances helps work smarter.', 'duration': 26.432, 'max_score': 914.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80914852.jpg'}, {'end': 1035.47, 'src': 'embed', 'start': 1003.226, 'weight': 3, 'content': [{'end': 1006.589, 'text': "it's just a masked group that has a masked image inside.", 'start': 1003.226, 'duration': 3.363}, {'end': 1008.691, 'text': 'OK, I want it to extend.', 'start': 1006.669, 'duration': 2.022}, {'end': 1015.216, 'text': "And the way we're going to do that is by using our constraints panel here on the right hand side in our settings panel.", 'start': 1008.851, 'duration': 6.365}, {'end': 1020.821, 'text': 'Right. Not only do we get the ability to fill it with different things and all sorts of things like that, but we can also say hey,', 'start': 1015.617, 'duration': 5.204}, {'end': 1022.823, 'text': 'we want this to be responsive right now.', 'start': 1020.821, 'duration': 2.002}, {'end': 1027.126, 'text': "We're saying I want it to be anchored to the top left hand corner of our design.", 'start': 1022.843, 'duration': 4.283}, {'end': 1035.47, 'text': "If I change that at the top right and I stretch again, you're going to see how it it tries to honor your decision and stay anchored to one corner.", 'start': 1027.406, 'duration': 8.064}], 'summary': 'Using constraints panel to make masked image responsive and anchored to corners.', 'duration': 32.244, 'max_score': 1003.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-801003226.jpg'}, {'end': 1108.909, 'src': 'embed', 'start': 1085.159, 'weight': 4, 'content': [{'end': 1092.566, 'text': "And you've probably heard of those like whether they're a 12 column grid for a website or maybe it is a smaller grid, or an eight point,", 'start': 1085.159, 'duration': 7.407}, {'end': 1094.426, 'text': 'Google Material Design pixel grid.', 'start': 1092.566, 'duration': 1.86}, {'end': 1096.486, 'text': 'Maybe you want to implement one of those on your designs.', 'start': 1094.686, 'duration': 1.8}, {'end': 1097.907, 'text': "That's probably a good place to start.", 'start': 1096.526, 'duration': 1.381}, {'end': 1103.728, 'text': "We can take any frame that we're working on and we can implement a layout grid by adding one right here.", 'start': 1098.187, 'duration': 5.541}, {'end': 1105.028, 'text': 'We have different options.', 'start': 1104.148, 'duration': 0.88}, {'end': 1108.909, 'text': 'You can either choose a grid or you can choose columns or you can choose rows.', 'start': 1105.048, 'duration': 3.861}], 'summary': 'Implement a layout grid for website designs, like a 12-column grid or google material design pixel grid.', 'duration': 23.75, 'max_score': 1085.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-801085159.jpg'}, {'end': 1301.17, 'src': 'embed', 'start': 1273.643, 'weight': 5, 'content': [{'end': 1278.546, 'text': "You can also stroke anything, like let's say we pick maybe like this pink color.", 'start': 1273.643, 'duration': 4.903}, {'end': 1284.067, 'text': 'and we can choose to make it on the inside and kind of increase the size of our stroke.', 'start': 1279.386, 'duration': 4.681}, {'end': 1287.648, 'text': "And let's change that color because it's a little bit atrocious.", 'start': 1284.787, 'duration': 2.861}, {'end': 1291.008, 'text': 'Also, you can add effects to any element inside of Figma.', 'start': 1288.028, 'duration': 2.98}, {'end': 1295.749, 'text': 'So I can go down here to the effects panel and make sure that I have my element in view.', 'start': 1291.028, 'duration': 4.721}, {'end': 1301.17, 'text': 'I can turn on the effect and I can select inner shadow, drop shadow, layer blur, background blur.', 'start': 1296.049, 'duration': 5.121}], 'summary': 'In figma, elements can be styled with strokes, colors, and effects like inner shadow, drop shadow, layer blur, and background blur.', 'duration': 27.527, 'max_score': 1273.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-801273643.jpg'}, {'end': 1345.041, 'src': 'embed', 'start': 1314.459, 'weight': 6, 'content': [{'end': 1318.323, 'text': 'And now we have a nice drop shadow coming off of our design.', 'start': 1314.459, 'duration': 3.864}, {'end': 1321.727, 'text': 'The export features inside of Figma are really powerful.', 'start': 1318.443, 'duration': 3.284}, {'end': 1327.673, 'text': 'I can kind of zoom in here down to the bottom and you can see the different possibilities for exporting right?', 'start': 1322.227, 'duration': 5.446}, {'end': 1330.995, 'text': 'So once I press Export, I have my artboard selected.', 'start': 1327.733, 'duration': 3.262}, {'end': 1337.558, 'text': 'I can say I want to export this at one time as a PNG.', 'start': 1331.375, 'duration': 6.183}, {'end': 1345.041, 'text': 'But if I want to add more to it, I can add suffix or prefixes onto it and I can continue to export these.', 'start': 1337.858, 'duration': 7.183}], 'summary': 'Figma offers powerful export features, allowing users to export designs as png with the option to add suffixes or prefixes.', 'duration': 30.582, 'max_score': 1314.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-801314459.jpg'}], 'start': 771.112, 'title': 'Designing and utilizing components', 'summary': 'Discusses controlling element spacing and padding, creating a responsive button with customized padding of 40 pixels, utilizing frames for various components, and covers the creation and utilization of components, responsive resizing, creation of reusable elements, and implementation of layout grids and export settings in figma.', 'chapters': [{'end': 854.15, 'start': 771.112, 'title': 'Controlling element spacing and padding', 'summary': 'Discusses controlling element spacing and padding, creating a responsive button with customized padding of 40 pixels, and utilizing frames for various components to enhance design and responsiveness.', 'duration': 83.038, 'highlights': ['Creating a responsive button with customized padding of 40 pixels on the left and right edges, suitable for mobile and desktop applications.', 'Utilizing frames for various components such as cards, images, buttons, and icons to enhance design and responsiveness.', 'Discussing the importance of using frames for as many elements as possible to improve the overall design and functionality.']}, {'end': 1376.345, 'start': 854.15, 'title': 'Creating and utilizing components in figma', 'summary': 'Covers the creation and utilization of components and responsive resizing in figma, allowing for the creation of reusable elements and the implementation of layout grids and export settings.', 'duration': 522.195, 'highlights': ['Creating Components for Reusability Components in Figma enable the creation of reusable elements, providing a way to work smarter and not harder by allowing changes in one instance to reflect across all instances, potentially saving time and effort.', 'Utilizing Responsive Resizing and Constraints The use of constraints and responsive resizing in Figma allows for elements to adapt and stretch with the design, providing a way to maintain consistency and responsiveness across different device sizes and layouts.', 'Implementing Layout Grids for Design Consistency The implementation of layout grids, such as the Google Material Design pixel grid, and the combination of pixel grids and columns, provides guidelines for design consistency and alignment, aiding in the creation of responsive designs.', 'Fills, Strokes, and Effects Customization Figma allows for the customization of fills, strokes, and effects, offering options for creating visually appealing designs with multiple fills, stroke settings, and effects such as shadows and blurs.', "Powerful Export Settings Figma's export features provide flexibility in exporting designs at different resolutions and sizes, allowing for customization of export settings to meet specific workflow and team requirements."]}], 'duration': 605.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-80771112.jpg', 'highlights': ['Creating a responsive button with customized padding of 40 pixels on the left and right edges, suitable for mobile and desktop applications.', 'Utilizing frames for various components such as cards, images, buttons, and icons to enhance design and responsiveness.', 'Creating Components for Reusability Components in Figma enable the creation of reusable elements, providing a way to work smarter and not harder by allowing changes in one instance to reflect across all instances, potentially saving time and effort.', 'Utilizing Responsive Resizing and Constraints The use of constraints and responsive resizing in Figma allows for elements to adapt and stretch with the design, providing a way to maintain consistency and responsiveness across different device sizes and layouts.', 'Implementing Layout Grids for Design Consistency The implementation of layout grids, such as the Google Material Design pixel grid, and the combination of pixel grids and columns, provides guidelines for design consistency and alignment, aiding in the creation of responsive designs.', 'Fills, Strokes, and Effects Customization Figma allows for the customization of fills, strokes, and effects, offering options for creating visually appealing designs with multiple fills, stroke settings, and effects such as shadows and blurs.', "Powerful Export Settings Figma's export features provide flexibility in exporting designs at different resolutions and sizes, allowing for customization of export settings to meet specific workflow and team requirements.", 'Discussing the importance of using frames for as many elements as possible to improve the overall design and functionality.']}, {'end': 1916.311, 'segs': [{'end': 1439.232, 'src': 'embed', 'start': 1390.895, 'weight': 0, 'content': [{'end': 1394.778, 'text': "we're going to create that link or send those invites and get people into our file.", 'start': 1390.895, 'duration': 3.883}, {'end': 1402.765, 'text': "Once they're here, they can hit C or the little comment bubble up above, and they can start commenting on our design in different areas.", 'start': 1395.158, 'duration': 7.607}, {'end': 1411.031, 'text': "We can start having conversations about anything that's being spoken about right here inside of Figma, which is pretty nice.", 'start': 1403.025, 'duration': 8.006}, {'end': 1415.079, 'text': 'and we can mention people and all sorts of things.', 'start': 1412.498, 'duration': 2.581}, {'end': 1418.561, 'text': 'And then once this is done, we can resolve that comment.', 'start': 1415.3, 'duration': 3.261}, {'end': 1421.883, 'text': 'Now you can also hand everything off in an inspect mode.', 'start': 1418.581, 'duration': 3.302}, {'end': 1422.843, 'text': 'What is inspect mode?', 'start': 1421.923, 'duration': 0.92}, {'end': 1429.827, 'text': "That's the ability to share a link and send it to your development teams, your engineering teams, stakeholders,", 'start': 1422.863, 'duration': 6.964}, {'end': 1433.129, 'text': 'and allow them to be here in this inspect mode.', 'start': 1429.827, 'duration': 3.302}, {'end': 1437.351, 'text': 'They can choose whether or not they want to see things for Android or iOS.', 'start': 1433.909, 'duration': 3.442}, {'end': 1439.232, 'text': 'or get CSS code.', 'start': 1437.911, 'duration': 1.321}], 'summary': 'Using figma, collaborate on design, resolve comments, and share in inspect mode with development teams, stakeholders, and get css code.', 'duration': 48.337, 'max_score': 1390.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-801390895.jpg'}, {'end': 1625.447, 'src': 'embed', 'start': 1601.284, 'weight': 3, 'content': [{'end': 1608.172, 'text': "You can have each of these all wired together as different flows, and you'll see as we press play and open up our prototype,", 'start': 1601.284, 'duration': 6.888}, {'end': 1611.115, 'text': 'which is going to happen right here inside of Figma.', 'start': 1608.172, 'duration': 2.943}, {'end': 1616.2, 'text': 'we have the opportunity to select the different flows here on the left hand panel.', 'start': 1611.115, 'duration': 5.085}, {'end': 1625.447, 'text': 'But now that we have this here, you can see that we can click and we get a nice simple built in, baked in kind of like push interaction.', 'start': 1616.62, 'duration': 8.827}], 'summary': 'Demonstrating different flows in figma, with built-in push interaction.', 'duration': 24.163, 'max_score': 1601.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-801601284.jpg'}, {'end': 1888.199, 'src': 'embed', 'start': 1861.096, 'weight': 4, 'content': [{'end': 1867.461, 'text': "let's press play on this and we should be able to just hover right over and we get baked in interactions for everything.", 'start': 1861.096, 'duration': 6.365}, {'end': 1867.802, 'text': 'All right.', 'start': 1867.602, 'duration': 0.2}, {'end': 1872.746, 'text': "I feel like I've hit you with a ton of knowledge about Figma all the basics, a basic tour,", 'start': 1867.822, 'duration': 4.924}, {'end': 1879.031, 'text': 'even some advanced techniques like responsive resizing components, variants and a whole bunch of stuff.', 'start': 1872.746, 'duration': 6.285}, {'end': 1882.454, 'text': "There are other videos that I've made that are fully dedicated to some of these topics.", 'start': 1879.091, 'duration': 3.363}, {'end': 1888.199, 'text': "So if you want to study a little bit deeper, make sure you check out some of the videos I've linked up here in cards and down in the description.", 'start': 1882.754, 'duration': 5.445}], 'summary': 'Figma tutorial covers basics, advanced techniques, and dedicated videos for deeper study.', 'duration': 27.103, 'max_score': 1861.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-801861096.jpg'}], 'start': 1376.445, 'title': 'Figma sharing, collaborating, and prototyping', 'summary': "Covers sharing and collaborating in figma, including inviting others to comment, resolving comments, and using inspect mode. it also explores prototyping basics such as wired interactions, smart animate, flow management, interactive components, and hover animations, showcasing figma's interactive capabilities.", 'chapters': [{'end': 1461.47, 'start': 1376.445, 'title': 'Sharing and collaborating in figma', 'summary': 'Discusses the process of sharing and collaborating in figma, including inviting others to comment on the design, resolving comments, and using inspect mode to share with development teams and stakeholders, offering the ability to view and extract pertinent details and code for android, ios, and css.', 'duration': 85.025, 'highlights': ['The ability to share a link and send it to development teams, stakeholders, and allow them to be here in this inspect mode. Inspect mode allows sharing with development teams, stakeholders, and offers the ability to view and extract pertinent details and code for Android, iOS, and CSS.', 'Inviting others to comment on the design and resolving comments. Users can invite others to comment on the design and resolve comments within Figma.', 'The process of sharing and collaborating in Figma. The chapter discusses the process of sharing and collaborating in Figma.']}, {'end': 1916.311, 'start': 1461.49, 'title': 'Figma prototyping basics', 'summary': 'Explores the basics of prototyping in figma, covering the creation of wired interactions, smart animate, flow management, interactive components, and hover animations, demonstrating the seamless and interactive experience figma offers.', 'duration': 454.821, 'highlights': ['Figma provides the ability to create wired interactions from one state to another, allowing users to easily prototype different interactions. Figma allows users to create wired interactions, simplifying the process of prototyping different interactions.', 'The demonstration of smart animate showcases the seamless transition between different states, providing a visually appealing and interactive experience. The smart animate feature in Figma allows for seamless transitions between different states, enhancing the visual and interactive experience for users.', "The management of flows within Figma enables the creation of multiple interconnected flows, providing a comprehensive view and control over the entire prototyping process. Figma's flow management feature allows for the creation of multiple interconnected flows, offering a comprehensive view and control over the prototyping process.", "The ability to create interactive components with baked-in hover animations enhances user experience by providing seamless and intuitive interactions. Figma's interactive components with baked-in hover animations enhance user experience by offering seamless and intuitive interactions."]}], 'duration': 539.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/II-6dDzc-80/pics/II-6dDzc-801376445.jpg', 'highlights': ['Inspect mode allows sharing with development teams, stakeholders, and offers the ability to view and extract pertinent details and code for Android, iOS, and CSS.', 'Inviting others to comment on the design and resolving comments within Figma.', 'The process of sharing and collaborating in Figma.', 'Figma allows users to create wired interactions, simplifying the process of prototyping different interactions.', 'The smart animate feature in Figma allows for seamless transitions between different states, enhancing the visual and interactive experience for users.', "Figma's flow management feature allows for the creation of multiple interconnected flows, offering a comprehensive view and control over the prototyping process.", "Figma's interactive components with baked-in hover animations enhance user experience by offering seamless and intuitive interactions."]}], 'highlights': ["Figma's export features provide flexibility in exporting designs at different resolutions and sizes, allowing for customization of export settings to meet specific workflow and team requirements.", 'The smart animate feature in Figma allows for seamless transitions between different states, enhancing the visual and interactive experience for users.', "Figma's flow management feature allows for the creation of multiple interconnected flows, offering a comprehensive view and control over the prototyping process.", "Figma's interactive components with baked-in hover animations enhance user experience by offering seamless and intuitive interactions.", 'The process of sharing and collaborating in Figma.', 'Inspect mode allows sharing with development teams, stakeholders, and offers the ability to view and extract pertinent details and code for Android, iOS, and CSS.', 'Inviting others to comment on the design and resolving comments within Figma.', 'Figma allows users to create wired interactions, simplifying the process of prototyping different interactions.', "Understanding the interface and navigation The chapter provides an overview of Figma's canvas, zooming and panning shortcuts, layers panel, and assets panel, emphasizing familiarity for design software users.", 'Utilizing assets and libraries for design consistency The chapter explains how Figma allows the creation of design systems and pattern libraries within projects, promoting consistent design elements and updates across multiple files and libraries.', 'Importance and versatility of frames in Figma The chapter highlights the significance of frames in Figma, as they are not just artboards but also containers for styling and organizing elements, enabling the creation of frames within frames and providing a wide range of preset frame options for different devices.', 'The ability to round corners and style frames is preferred for a more polished and unified appearance, enhancing the overall look and feel of the design.', 'Frames can be used for artboards, and users can round corners for all screens at the same time, creating a uniform rounded style for multiple elements.', 'The chapter emphasizes using frames and auto layout to efficiently structure and style elements in Figma, promoting workflow optimization.', 'The chapter provides tips for creating buttons and icons, outlining the process of utilizing frames and auto layout for efficient button construction.', 'The introduction of auto layout is emphasized for its ability to enable automatic spacing and structuring of elements within a layout, streamlining the design process.', 'Creating a responsive button with customized padding of 40 pixels on the left and right edges, suitable for mobile and desktop applications.', 'Utilizing frames for various components such as cards, images, buttons, and icons to enhance design and responsiveness.', 'Creating Components for Reusability Components in Figma enable the creation of reusable elements, providing a way to work smarter and not harder by allowing changes in one instance to reflect across all instances, potentially saving time and effort.', 'Utilizing Responsive Resizing and Constraints The use of constraints and responsive resizing in Figma allows for elements to adapt and stretch with the design, providing a way to maintain consistency and responsiveness across different device sizes and layouts.', 'Implementing Layout Grids for Design Consistency The implementation of layout grids, such as the Google Material Design pixel grid, and the combination of pixel grids and columns, provides guidelines for design consistency and alignment, aiding in the creation of responsive designs.', 'Fills, Strokes, and Effects Customization Figma allows for the customization of fills, strokes, and effects, offering options for creating visually appealing designs with multiple fills, stroke settings, and effects such as shadows and blurs.', 'Figma is suitable for teams and organizations, offering additional features and benefits, making it a worthwhile investment.', 'The Figma dashboard provides access to templates, new design and FigJam file creation, and file import options, making it a central hub for project management.', 'Projects can be organized within folders and moved between organizations, providing a structured approach to managing design files.', 'Folders in Figma, such as Recents and Drafts, help organize and manage projects, while allowing easy access to recently viewed files and unorganized work.', 'Figma can be used for free, with limitations on pages, documents, and layers, making it suitable for personal projects or individual use.', 'The Figma community is integrated into the tool, providing a convenient platform for resources.', 'Users no longer need to search externally for Figma resources as they are likely available within the community.', 'The community offers access to various resources such as plugins, widgets, design systems, and typography.']}