title
Creating the Most DYNAMIC Buttons in Figma

description
https://designcourse.com - Learn UI/UX like a rockstar! -- Today, we're going to take a look at creating highly dynamic and flexible buttons within Figma. I'm talking about smart animate micro-interactions, variants with boolean values, masks, the ability to quickly replace icons within variant-based button components & more.. Here's that other video I referenced: https://www.youtube.com/watch?v=9k4KYcHfEic The before and after .fig project files: https://coursetro.s3.amazonaws.com/stuff/figbuttons.zip (Extra and drag these files on top of the Figma interface with your project view) 0:00 - Introduction 0:59 - DesignCourse 1:36 - Designing the Button 3:27 - How flexible is it? 5:29 - Preparing a Hover State Animation 7:30 - Creating the Component 8:10 - Creating the Variant 8:50 - Defining the Variant Properties 10:01 - Prototyping the First Variant 10:30 - Creating a Button without the Icon 14:00 - Dynamic Icons 16:28 - Final Thoughts Let's get started! #figma #buttons #dynamic - - - - - - - - - - - - - - - - - - - - - - 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': 'Creating the Most DYNAMIC Buttons in Figma', 'heatmap': [{'end': 303.87, 'start': 285.263, 'weight': 0.705}, {'end': 396.434, 'start': 370.909, 'weight': 0.728}, {'end': 563.976, 'start': 482.604, 'weight': 0.756}], 'summary': 'Discusses creating dynamic button components in figma, launching a ui ux design course on designcourse.com with interactive tests and mentorship on january 4th, 2022, and designing a call to action button emphasizing context, color, and responsiveness using figma and iconify. it also covers creating a button with hover state and ellipse animation using smart animate, and demonstrates creating a component and variant in adobe xd with techniques such as duplicating the button, using an ellipse as a mask, adjusting opacity, creating hover state, adding properties, and utilizing iconify for interchangeable icons.', 'chapters': [{'end': 46.093, 'segs': [{'end': 46.093, 'src': 'embed', 'start': 0.369, 'weight': 0, 'content': [{'end': 2.151, 'text': 'Buttons, buttons, buttons.', 'start': 0.369, 'duration': 1.782}, {'end': 10.94, 'text': "This tutorial is not just about buttons, but I'm going to be demonstrating a process I saw from a previous YouTube video.", 'start': 2.251, 'duration': 8.689}, {'end': 17.186, 'text': "I'm going to link that in the YouTube description, but I've expanded on it a bit more to make it more flexible and dynamic.", 'start': 10.96, 'duration': 6.226}, {'end': 23.791, 'text': 'and so this process will allow you to create components that are extremely dynamic and flexible.', 'start': 17.666, 'duration': 6.125}, {'end': 32.058, 'text': 'you can choose to create these boolean values or these properties that allow you to determine stuff like if you want your button to have an icon,', 'start': 23.791, 'duration': 8.267}, {'end': 38.684, 'text': 'and also allow you to customize the icons very easily within your components and the variants.', 'start': 32.058, 'duration': 6.626}, {'end': 46.093, 'text': 'just looking at this, obviously this is all from a single component variant, and the possibilities are really just endless,', 'start': 38.684, 'duration': 7.409}], 'summary': 'Demonstrating a process to create dynamic and flexible components with customizable icons and variants.', 'duration': 45.724, 'max_score': 0.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g369.jpg'}], 'start': 0.369, 'title': 'Dynamic button components', 'summary': 'Discusses creating dynamic and flexible components for buttons, allowing customization of icons and variants, inspired by a previous youtube tutorial, resulting in endless possibilities.', 'chapters': [{'end': 46.093, 'start': 0.369, 'title': 'Dynamic button components tutorial', 'summary': 'Discusses creating dynamic and flexible components for buttons, allowing customization of icons and variants, inspired by a previous youtube tutorial, and resulting in endless possibilities.', 'duration': 45.724, 'highlights': ['The process allows creating extremely dynamic and flexible components, increasing customization and flexibility (e.g., allowing customization of icons and variants).', 'The tutorial is inspired by a previous YouTube video, and the process has been expanded upon for more flexibility and dynamism, enhancing the original concept.', 'The components created using this process are from a single component variant, providing endless possibilities for customization and usage.']}], 'duration': 45.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g369.jpg', 'highlights': ['The components created using this process are from a single component variant, providing endless possibilities for customization and usage.', 'The process allows creating extremely dynamic and flexible components, increasing customization and flexibility (e.g., allowing customization of icons and variants).', 'The tutorial is inspired by a previous YouTube video, and the process has been expanded upon for more flexibility and dynamism, enhancing the original concept.']}, {'end': 326.798, 'segs': [{'end': 75.95, 'src': 'embed', 'start': 46.093, 'weight': 0, 'content': [{'end': 49.96, 'text': 'and it makes your life much easier as a designer working with a big Figma project.', 'start': 46.093, 'duration': 3.867}, {'end': 52.385, 'text': 'So as always, make sure to subscribe.', 'start': 50.321, 'duration': 2.064}, {'end': 53.226, 'text': "Let's get started.", 'start': 52.405, 'duration': 0.821}, {'end': 60.438, 'text': 'Now, wait one second.', 'start': 59.437, 'duration': 1.001}, {'end': 68.144, 'text': 'I want you to check out designcourse.com, which is going to be launching here in 60 days or January 4th of 2022.', 'start': 60.458, 'duration': 7.686}, {'end': 69.345, 'text': "If it's not launched.", 'start': 68.144, 'duration': 1.201}, {'end': 75.95, 'text': "based on the time you're watching this, I want you to enter your email address, because it is my new, very robust UI UX design course.", 'start': 69.345, 'duration': 6.605}], 'summary': "Figma project makes designer's life easier. designcourse.com launching in 60 days or january 4th, 2022.", 'duration': 29.857, 'max_score': 46.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g46093.jpg'}, {'end': 167.154, 'src': 'embed', 'start': 110.744, 'weight': 1, 'content': [{'end': 112.625, 'text': 'um so, right here we want to have a call to action.', 'start': 110.744, 'duration': 1.881}, {'end': 114.865, 'text': 'this is where our button is going to go now.', 'start': 112.625, 'duration': 2.24}, {'end': 121.929, 'text': "if you're kind of a stickler when it comes to alignment, we can come over here to turn on the grid and then we'll take our rectangle tool.", 'start': 114.865, 'duration': 7.064}, {'end': 126.171, 'text': "now some people they kind of just they'll design a button without context, like they'll.", 'start': 121.929, 'duration': 4.242}, {'end': 127.272, 'text': "they won't put it in a design.", 'start': 126.171, 'duration': 1.101}, {'end': 129.553, 'text': "maybe they'll just do it off here in the canvas or whatever.", 'start': 127.272, 'duration': 2.281}, {'end': 133.815, 'text': "i like to see what it looks like first in the context of the design on that we're working with.", 'start': 129.553, 'duration': 4.262}, {'end': 136.757, 'text': 'so i we can hide that now.', 'start': 133.815, 'duration': 2.942}, {'end': 140.899, 'text': 'and, By the way, when it comes to a call to action button, you really want it to stand out well.', 'start': 136.757, 'duration': 4.142}, {'end': 143.62, 'text': "So we're going to use this color right here.", 'start': 141.179, 'duration': 2.441}, {'end': 152.464, 'text': "And ideally, if you're working with a real project with many artboards and stuff, you want to save this here to your, not that button.", 'start': 144.06, 'duration': 8.404}, {'end': 155.066, 'text': 'sorry, your color styles right here.', 'start': 152.464, 'duration': 2.602}, {'end': 157.607, 'text': "So you'd save this, name it primary, whatever.", 'start': 155.166, 'duration': 2.441}, {'end': 159.308, 'text': 'and all that good stuff.', 'start': 158.207, 'duration': 1.101}, {'end': 163.471, 'text': "So then what we're gonna do is we're gonna round the edges just a bit.", 'start': 159.948, 'duration': 3.523}, {'end': 165.072, 'text': 'I like five, typically.', 'start': 163.531, 'duration': 1.541}, {'end': 167.154, 'text': "It's very small, works well.", 'start': 165.413, 'duration': 1.741}], 'summary': 'Designing a call to action button with color, context, and rounded edges.', 'duration': 56.41, 'max_score': 110.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g110744.jpg'}, {'end': 253.083, 'src': 'embed', 'start': 231.408, 'weight': 3, 'content': [{'end': 240.795, 'text': "So the first thing that we're going to want to do is I want to see how this button responds, based on this artboard, when we adjust it in and out,", 'start': 231.408, 'duration': 9.387}, {'end': 246.018, 'text': "kind of like testing responsive design out on an actual website that's been realized in front of development.", 'start': 240.795, 'duration': 5.223}, {'end': 248.08, 'text': "So right now, this is what's happening.", 'start': 246.458, 'duration': 1.622}, {'end': 249.721, 'text': "It's not ideal at all.", 'start': 248.18, 'duration': 1.541}, {'end': 253.083, 'text': 'And the reason I think this is important is because if you do make, if you..', 'start': 250.821, 'duration': 2.262}], 'summary': 'Testing responsive design on website with adjustments. current state not ideal.', 'duration': 21.675, 'max_score': 231.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g231408.jpg'}, {'end': 312.692, 'src': 'heatmap', 'start': 285.263, 'weight': 0.705, 'content': [{'end': 291.687, 'text': 'we want to make sure that this element right here is structured left and right.', 'start': 285.263, 'duration': 6.424}, {'end': 296.048, 'text': "So now when we pull it out, it's going to be left and right.", 'start': 292.408, 'duration': 3.64}, {'end': 297.369, 'text': 'All right.', 'start': 297.129, 'duration': 0.24}, {'end': 303.87, 'text': "So the next step is we want to take both of these elements and we're going to auto layout it.", 'start': 297.409, 'duration': 6.461}, {'end': 307.951, 'text': "So we're going to add plus right here and that automatically creates an auto layout.", 'start': 304.11, 'duration': 3.841}, {'end': 312.692, 'text': 'We can also do this to align it here to the absolute center.', 'start': 308.451, 'duration': 4.241}], 'summary': 'Structuring element left and right for auto layout.', 'duration': 27.429, 'max_score': 285.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g285263.jpg'}], 'start': 46.093, 'title': 'Ui ux design course launch and call to action button design', 'summary': 'Highlights the launch of designcourse.com on january 4th, 2022, offering a ui ux design course with interactive tests and mentorship. it also covers the process of designing a call to action button, emphasizing context, color, and responsiveness, using tools like figma and iconify.', 'chapters': [{'end': 91.46, 'start': 46.093, 'title': 'Ui ux design course launch', 'summary': 'Highlights the launch of designcourse.com in 60 days or january 4th, 2022, offering a comprehensive ui ux design course with interactive tests, design mentorship, and encourages viewers to enter their email for more information.', 'duration': 45.367, 'highlights': ['The launch of designcourse.com in 60 days or January 4th, 2022, offering a comprehensive UI UX design course with interactive tests and design mentorship.', 'Encouraging viewers to enter their email for more information about the UI UX design course.', 'The course includes interactive UI tests and design mentorship with challenges.']}, {'end': 326.798, 'start': 91.46, 'title': 'Designing a call to action button', 'summary': 'Covers the process of designing a call to action button, emphasizing the importance of context, color, and responsiveness, and demonstrating the use of tools like figma and iconify, to ensure efficient and scalable design.', 'duration': 235.338, 'highlights': ['The importance of designing a button in the context of the overall design is emphasized to ensure it stands out and complements the layout. Designing the button in the context of the overall design ensures it stands out and complements the layout, enhancing user engagement.', 'Emphasizing the use of specific colors and saving them as color styles in Figma for consistency across the project. Emphasizing the use of specific colors and saving them as color styles in Figma for consistency across the project ensures a cohesive visual identity.', 'Demonstrating the process of adding text and icons to the button, including using specific font styles and tools like Iconify in Figma. Demonstrating the process of adding text and icons to the button, including using specific font styles and tools like Iconify in Figma, enhances the visual appeal and functionality of the button.', 'Highlighting the importance of designing with responsiveness in mind, using auto layout and ensuring elements are structured and aligned for scalability. Designing with responsiveness in mind, using auto layout and ensuring elements are structured and aligned for scalability, enhances the adaptability of the button across different screen sizes.']}], 'duration': 280.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g46093.jpg', 'highlights': ['The launch of designcourse.com in 60 days or January 4th, 2022, offering a comprehensive UI UX design course with interactive tests and design mentorship.', 'Emphasizing the use of specific colors and saving them as color styles in Figma for consistency across the project ensures a cohesive visual identity.', 'Demonstrating the process of adding text and icons to the button, including using specific font styles and tools like Iconify in Figma, enhances the visual appeal and functionality of the button.', 'Highlighting the importance of designing with responsiveness in mind, using auto layout and ensuring elements are structured and aligned for scalability, enhances the adaptability of the button across different screen sizes.', 'The importance of designing a button in the context of the overall design is emphasized to ensure it stands out and complements the layout.']}, {'end': 1013.661, 'segs': [{'end': 396.434, 'src': 'heatmap', 'start': 328.479, 'weight': 0, 'content': [{'end': 335.667, 'text': 'I want this to be a button that has a hover state and that has an interesting animation that will take place with smart animate.', 'start': 328.479, 'duration': 7.188}, {'end': 341.293, 'text': 'So what I envision is having like an ellipse that kind of grows out from the center.', 'start': 336.688, 'duration': 4.605}, {'end': 346.296, 'text': 'So to do that, we have to think ahead a little bit before we make it a component.', 'start': 342.254, 'duration': 4.042}, {'end': 347.657, 'text': 'It makes life easier.', 'start': 346.836, 'duration': 0.821}, {'end': 352.839, 'text': "What we'll do is we're going to duplicate this rectangle four, which is the button right here.", 'start': 348.017, 'duration': 4.822}, {'end': 356.281, 'text': 'So control D, now we have rectangle five.', 'start': 353.32, 'duration': 2.961}, {'end': 360.263, 'text': "Now our intention isn't to keep just a second copy of it.", 'start': 356.981, 'duration': 3.282}, {'end': 362.724, 'text': "It's going to serve as a mask.", 'start': 360.683, 'duration': 2.041}, {'end': 369.848, 'text': "So what we'll do is we're going to take an ellipse and just somewhere around the center, I'm going to hold, oops, we don't want that to happen.", 'start': 363.185, 'duration': 6.663}, {'end': 371.469, 'text': "let's see here.", 'start': 370.909, 'duration': 0.56}, {'end': 380.218, 'text': "what we'll do is just I'll just come over here off the side and we're gonna put it near the center and then we're going to hold shift,", 'start': 371.469, 'duration': 8.749}, {'end': 386.925, 'text': "select that rectangle 5 and then we're gonna come out and click this mask.", 'start': 380.218, 'duration': 6.707}, {'end': 396.434, 'text': 'that way we can make this ellipse any size we want and it will still stay within the confines of that button container or that rectangle five right here,', 'start': 387.952, 'duration': 8.482}], 'summary': 'Creating a button with hover state and animation using smart animate.', 'duration': 42.99, 'max_score': 328.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g328479.jpg'}, {'end': 453.753, 'src': 'embed', 'start': 425.005, 'weight': 4, 'content': [{'end': 433.153, 'text': "So let's collapse the frame and let me make sure this works.", 'start': 425.005, 'duration': 8.148}, {'end': 436.061, 'text': 'All right, there we go.', 'start': 435.421, 'duration': 0.64}, {'end': 438.543, 'text': "So now it's placed where it needs to be.", 'start': 436.742, 'duration': 1.801}, {'end': 448.85, 'text': "Let's open up the mask group here and change our ellipse to 0% opacity because by default, the default state is obviously without that.", 'start': 438.723, 'duration': 10.127}, {'end': 451.812, 'text': "All right, we're getting very close.", 'start': 449.71, 'duration': 2.102}, {'end': 453.753, 'text': "So now we're going to take everything.", 'start': 451.872, 'duration': 1.881}], 'summary': 'Adjusting the frame and opacity, progressing towards completion.', 'duration': 28.748, 'max_score': 425.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g425005.jpg'}, {'end': 563.976, 'src': 'heatmap', 'start': 482.604, 'weight': 0.756, 'content': [{'end': 487.829, 'text': 'So now that we have that done, what we want to do is create a variant out of it.', 'start': 482.604, 'duration': 5.225}, {'end': 490.831, 'text': 'A variant is a relatively new feature.', 'start': 488.469, 'duration': 2.362}, {'end': 493.994, 'text': "I've talked about this a couple of videos, but it's over here.", 'start': 490.851, 'duration': 3.143}, {'end': 496.155, 'text': "It's in this section right there.", 'start': 494.254, 'duration': 1.901}, {'end': 502.04, 'text': "So we're going to move this off here just so we have some space to work with, because when we click on variants,", 'start': 496.175, 'duration': 5.865}, {'end': 505.043, 'text': "it's going to expand it into this little container right here.", 'start': 502.04, 'duration': 3.003}, {'end': 510.161, 'text': "Alright, so what we'll do now is we're going to create the state for hover.", 'start': 506.018, 'duration': 4.143}, {'end': 516.804, 'text': "So we're going to double click into here, we're going to get access to our ellipse 2, we're going to drag it up,", 'start': 510.821, 'duration': 5.983}, {'end': 523.89, 'text': "holding shift and alt right around there, just so it consumes the whole button, and then we're going to change this to 100%.", 'start': 516.804, 'duration': 7.086}, {'end': 526.332, 'text': 'So now we can see it is darker.', 'start': 523.89, 'duration': 2.442}, {'end': 534.832, 'text': "All right, next up, we're going to select our component in the whole outline or whatever you wanna call it.", 'start': 527.307, 'duration': 7.525}, {'end': 538.094, 'text': "And we're going to add a property.", 'start': 535.352, 'duration': 2.742}, {'end': 540.375, 'text': "So property one by default, we're gonna change to hover.", 'start': 538.274, 'duration': 2.101}, {'end': 549.641, 'text': "All right, then we're gonna select on our first one and we're gonna change this property here from default just to false,", 'start': 541.636, 'duration': 8.005}, {'end': 551.222, 'text': 'because this is not the hover version.', 'start': 549.641, 'duration': 1.581}, {'end': 553.684, 'text': "This is, so we're gonna put true.", 'start': 552.383, 'duration': 1.301}, {'end': 556.669, 'text': "Now here's where the fun stuff comes in.", 'start': 554.947, 'duration': 1.722}, {'end': 563.976, 'text': "We're going to go to assets, drag in our component, get it placed roughly where we want, and then we're going to hit play.", 'start': 556.689, 'duration': 7.287}], 'summary': 'Creating a hover variant for a new feature, adjusting properties and components.', 'duration': 81.372, 'max_score': 482.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g482604.jpg'}, {'end': 523.89, 'src': 'embed', 'start': 496.175, 'weight': 1, 'content': [{'end': 502.04, 'text': "So we're going to move this off here just so we have some space to work with, because when we click on variants,", 'start': 496.175, 'duration': 5.865}, {'end': 505.043, 'text': "it's going to expand it into this little container right here.", 'start': 502.04, 'duration': 3.003}, {'end': 510.161, 'text': "Alright, so what we'll do now is we're going to create the state for hover.", 'start': 506.018, 'duration': 4.143}, {'end': 516.804, 'text': "So we're going to double click into here, we're going to get access to our ellipse 2, we're going to drag it up,", 'start': 510.821, 'duration': 5.983}, {'end': 523.89, 'text': "holding shift and alt right around there, just so it consumes the whole button, and then we're going to change this to 100%.", 'start': 516.804, 'duration': 7.086}], 'summary': 'Creating hover state by expanding and modifying an ellipse to consume the whole button', 'duration': 27.715, 'max_score': 496.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g496175.jpg'}, {'end': 723.692, 'src': 'embed', 'start': 690.694, 'weight': 5, 'content': [{'end': 693.095, 'text': "So we'll change this to that same color.", 'start': 690.694, 'duration': 2.401}, {'end': 703.317, 'text': "Next up, we're gonna go back to our component one and we're going to add a new property by clicking the three dots, add new property.", 'start': 694.135, 'duration': 9.182}, {'end': 704.898, 'text': "We're gonna put icon.", 'start': 703.938, 'duration': 0.96}, {'end': 711.201, 'text': "And then we're going to over here specify icon is false.", 'start': 705.836, 'duration': 5.365}, {'end': 714.704, 'text': 'Icon is also false.', 'start': 713.443, 'duration': 1.261}, {'end': 717.767, 'text': "Oh wait, I'm slow.", 'start': 716.485, 'duration': 1.282}, {'end': 719.368, 'text': 'Icon is true.', 'start': 718.267, 'duration': 1.101}, {'end': 721.55, 'text': "It's a little bit late.", 'start': 719.388, 'duration': 2.162}, {'end': 722.871, 'text': 'Icon is true.', 'start': 722.09, 'duration': 0.781}, {'end': 723.692, 'text': 'All right.', 'start': 722.891, 'duration': 0.801}], 'summary': "Adding a new property 'icon' and setting it to true in component one.", 'duration': 32.998, 'max_score': 690.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g690694.jpg'}, {'end': 858.583, 'src': 'embed', 'start': 831.207, 'weight': 3, 'content': [{'end': 835.149, 'text': "that's going to be difficult, like changing the icon on the component instance.", 'start': 831.207, 'duration': 3.942}, {'end': 836.55, 'text': "it's not really possible.", 'start': 835.149, 'duration': 1.401}, {'end': 843.515, 'text': "um, just by trying to drag in and a new icon here or just deleting this, this right here it's, it's.", 'start': 836.55, 'duration': 6.965}, {'end': 846.517, 'text': "it's not going to work the way you want it to.", 'start': 843.515, 'duration': 3.002}, {'end': 849.218, 'text': 'so here is a workaround.', 'start': 846.517, 'duration': 2.701}, {'end': 854.601, 'text': "so what we can do is let's get a um, let's use iconify real quick.", 'start': 849.218, 'duration': 5.383}, {'end': 856.942, 'text': "um, we'll just do like right.", 'start': 854.601, 'duration': 2.341}, {'end': 858.583, 'text': 'just type in right.', 'start': 856.942, 'duration': 1.641}], 'summary': 'Changing the icon on the component instance is difficult, but a workaround using iconify can be used.', 'duration': 27.376, 'max_score': 831.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g831207.jpg'}], 'start': 328.479, 'title': 'Button animation design and creating component and variant in adobe xd', 'summary': 'Covers creating a button with hover state and ellipse animation using smart animate, and demonstrates creating a component and variant in adobe xd, including steps and techniques such as duplicating the button, using an ellipse as a mask, adjusting opacity, creating hover state, adding properties, and utilizing iconify for interchangeable icons.', 'chapters': [{'end': 453.753, 'start': 328.479, 'title': 'Button animation design', 'summary': 'Covers the process of creating a button with a hover state and an ellipse animation using smart animate, including duplicating the button, using an ellipse as a mask, and adjusting the opacity to achieve the desired effect.', 'duration': 125.274, 'highlights': ['Creating a button with a hover state and ellipse animation using smart animate The chapter covers the process of creating a button with a hover state and an ellipse animation using smart animate.', 'Duplicating the button to serve as a mask for the ellipse The process involves duplicating the button to serve as a mask for the ellipse, ensuring that the ellipse stays within the confines of the button container.', "Adjusting the opacity of the ellipse to achieve the desired effect The tutorial demonstrates the adjustment of the ellipse's opacity to achieve the desired effect for the button animation."]}, {'end': 1013.661, 'start': 454.414, 'title': 'Creating component and variant in adobe xd', 'summary': 'Demonstrates the process of creating a component and a variant in adobe xd, including steps such as creating hover state, adding properties, and utilizing iconify for interchangeable icons.', 'duration': 559.247, 'highlights': ['Creating a variant by adding a hover state The process of creating a variant in Adobe XD involves adding a hover state to the component, allowing for easy toggling between different states.', 'Utilizing iconify for interchangeable icons The speaker demonstrates the use of iconify to create interchangeable icons for different button states, providing flexibility and ease of use in the design.', 'Demonstrating the process of adding properties to the component The chapter explains the steps involved in adding properties to the component, such as specifying states like hover and icon, enhancing the functionality and user experience.']}], 'duration': 685.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KWUlkXZOj4g/pics/KWUlkXZOj4g328479.jpg', 'highlights': ['Creating a button with a hover state and ellipse animation using smart animate', 'Creating a variant by adding a hover state', 'Duplicating the button to serve as a mask for the ellipse', 'Utilizing iconify for interchangeable icons', 'Adjusting the opacity of the ellipse to achieve the desired effect', 'Demonstrating the process of adding properties to the component']}], 'highlights': ['The launch of designcourse.com in 60 days or January 4th, 2022, offering a comprehensive UI UX design course with interactive tests and design mentorship.', 'The importance of designing a button in the context of the overall design is emphasized to ensure it stands out and complements the layout.', 'The components created using this process are from a single component variant, providing endless possibilities for customization and usage.', 'The process allows creating extremely dynamic and flexible components, increasing customization and flexibility (e.g., allowing customization of icons and variants).', 'Emphasizing the use of specific colors and saving them as color styles in Figma for consistency across the project ensures a cohesive visual identity.', 'Demonstrating the process of adding text and icons to the button, including using specific font styles and tools like Iconify in Figma, enhances the visual appeal and functionality of the button.', 'Highlighting the importance of designing with responsiveness in mind, using auto layout and ensuring elements are structured and aligned for scalability, enhances the adaptability of the button across different screen sizes.', 'Creating a button with a hover state and ellipse animation using smart animate', 'Creating a variant by adding a hover state', 'Duplicating the button to serve as a mask for the ellipse', 'Utilizing iconify for interchangeable icons', 'Adjusting the opacity of the ellipse to achieve the desired effect', 'Demonstrating the process of adding properties to the component', 'The tutorial is inspired by a previous YouTube video, and the process has been expanded upon for more flexibility and dynamism, enhancing the original concept.']}