title
Create After Effects-Like Animations in Figma?!

description
https://bit.ly/3D2I3Zu - Take my UI Design Bootcamp Now! -- Want to learn UI/UX? https://designcourse.com​ -- Today, we're going to step into the world of Figma and learn how to create complex animations, with the help of the Figmotion Figma plugin -- which is free to use! It allows you to create animation sequences that you wouldn't otherwise be able to achieve using Figma alone. You can export them as high framerate MP4's, as well as export the CSS animation code (and JSON)! https://www.figma.com/community/plugin/733025261168520714/Figmotion 0:00 - Introduction 0:35 - An Awesome Offer 1:09 - Installing the Figmotion Plugin 1:36 - Designing a Quick UI 3:35 - Using the Figmotion Plugin 13:49 - Video Render of the Animation 14:48 - Viewing the CSS 15:44 - Outro Let's get started! #figma #animation #ui - - - - - - - - - - - - - - - - - - - - - - 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': 'Create After Effects-Like Animations in Figma?!', 'heatmap': [{'end': 105.536, 'start': 90.146, 'weight': 0.736}, {'end': 236.192, 'start': 204.186, 'weight': 0.738}, {'end': 487.071, 'start': 472.669, 'weight': 0.724}, {'end': 840.571, 'start': 824.607, 'weight': 0.865}, {'end': 865.898, 'start': 841.532, 'weight': 0.731}, {'end': 908.198, 'start': 881.3, 'weight': 0.953}], 'summary': 'Learn to create intricate ui animations using figmotion in figma, covering installation, setup of ui elements, and plugin usage. also, explore animation design techniques, animating elements with ease in and out easing functions, and manipulating keyframes to achieve desired animations.', 'chapters': [{'end': 178.925, 'segs': [{'end': 105.536, 'src': 'heatmap', 'start': 26.971, 'weight': 0, 'content': [{'end': 32.335, 'text': "So now, in this video, I'm going to show you a single plugin, which is free, called Fig Motion,", 'start': 26.971, 'duration': 5.364}, {'end': 34.917, 'text': 'where you can do just that without having to leave Figma.', 'start': 32.335, 'duration': 2.582}, {'end': 40.5, 'text': "Now, before we begin, I just wanted to mention if you're interested in UI design but you're not very good,", 'start': 35.097, 'duration': 5.403}, {'end': 44.402, 'text': 'well then you should definitely take my UI design bootcamp at scrimbaugh.com.', 'start': 40.5, 'duration': 3.902}, {'end': 46.423, 'text': "At scrimbaugh, you don't just watch videos.", 'start': 44.542, 'duration': 1.881}, {'end': 47.163, 'text': 'No, no, no.', 'start': 46.743, 'duration': 0.42}, {'end': 50.745, 'text': "You're actually able to modify code in the browser while you learn.", 'start': 47.203, 'duration': 3.542}, {'end': 57.849, 'text': 'My course on UI design features over 100 lessons that are specifically tailored to help you become an awesome UI designer.', 'start': 51.225, 'duration': 6.624}, {'end': 60.03, 'text': "And they're packed with interactive challenges.", 'start': 58.169, 'duration': 1.861}, {'end': 66.532, 'text': "So make sure you click the very top link here in the YouTube description, and that way you'll get access to my course, along with many others,", 'start': 60.31, 'duration': 6.222}, {'end': 68.112, 'text': 'for a very low monthly fee.', 'start': 66.532, 'duration': 1.58}, {'end': 68.992, 'text': "Let's get started.", 'start': 68.372, 'duration': 0.62}, {'end': 72.073, 'text': 'Alrighty, so we have Figma open here.', 'start': 69.532, 'duration': 2.541}, {'end': 76.214, 'text': "Now the first thing we're going to want to do is I right click on the canvas.", 'start': 72.093, 'duration': 4.121}, {'end': 80.095, 'text': "We're going to go to plugins and then go to browse plugins.", 'start': 76.234, 'duration': 3.861}, {'end': 83.976, 'text': "And this is of course assuming you don't have FigMotion already installed.", 'start': 80.555, 'duration': 3.421}, {'end': 88.417, 'text': 'We can click on this plugins over here, type in FigMotion.', 'start': 84.536, 'duration': 3.881}, {'end': 91.647, 'text': 'and install.', 'start': 90.146, 'duration': 1.501}, {'end': 93.048, 'text': 'click, install.', 'start': 91.647, 'duration': 1.401}, {'end': 96.37, 'text': "obviously it's already installed here, um, and then you come back here.", 'start': 93.048, 'duration': 3.322}, {'end': 97.891, 'text': 'I believe you have to refresh.', 'start': 96.37, 'duration': 1.521}, {'end': 105.536, 'text': "uh, if you have a current document open and I'm just using the desktop, uh, frame right here and let's get ready to rock.", 'start': 97.891, 'duration': 7.645}], 'summary': 'Learn about the free fig motion plugin for figma and ui design bootcamp at scrimbaugh.com.', 'duration': 66.077, 'max_score': 26.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU26971.jpg'}, {'end': 158.158, 'src': 'embed', 'start': 130.149, 'weight': 1, 'content': [{'end': 137.572, 'text': "so because we want good visual hierarchy, we're going to scale that thing down a lot and also change from bold to regular.", 'start': 130.149, 'duration': 7.423}, {'end': 146.558, 'text': "Now I'm going to drag out just the text area kind of size right here and right click plugins, and I have the lorem ipsum plugin.", 'start': 138.092, 'duration': 8.466}, {'end': 151.521, 'text': "You can install that as well using the same method that we used before and we'll choose generate.", 'start': 146.638, 'duration': 4.883}, {'end': 152.521, 'text': 'All right.', 'start': 152.281, 'duration': 0.24}, {'end': 158.158, 'text': "looking a little bit boring, I guess, but that's okay.", 'start': 154.977, 'duration': 3.181}], 'summary': 'Scaling down visual hierarchy for better design, adding lorem ipsum plugin for generating text.', 'duration': 28.009, 'max_score': 130.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU130149.jpg'}], 'start': 6.055, 'title': 'Creating ui animations in figma with figmotion', 'summary': 'Explains how to use figmotion in figma to create intricate ui animations, promoting a ui design bootcamp. it covers installing figmotion, setting up ui elements, and using plugins to generate text and shapes.', 'chapters': [{'end': 178.925, 'start': 6.055, 'title': 'Create ui animations in figma with figmotion', 'summary': 'Explains how to use figmotion, a free plugin for figma, to create intricate ui animations without leaving the platform, and also promotes a ui design bootcamp. it highlights the process of installing figmotion, setting up ui elements, and using plugins to generate text and shapes.', 'duration': 172.87, 'highlights': ['The chapter explains how to use FigMotion, a free plugin for Figma, to create intricate UI animations without leaving the platform. The video introduces FigMotion, a free plugin for Figma, that allows users to create intricate UI animations directly within Figma without the need to switch to other software like Adobe After Effects.', 'The chapter highlights the process of installing FigMotion in Figma. The tutorial demonstrates the process of installing FigMotion within Figma by accessing the plugins menu, browsing plugins, and installing FigMotion to enable the animation functionality.', 'The chapter discusses setting up UI elements and using plugins to generate text and shapes. The tutorial covers the process of setting up UI elements such as headlines, sub-headlines, and images, and also emphasizes the use of plugins like Lorem Ipsum to generate text and rectangles to create shapes within the Figma workspace.', 'The chapter promotes a UI design bootcamp at scrimbaugh.com. The chapter promotes a UI design bootcamp at scrimbaugh.com, featuring over 100 lessons tailored to help individuals become proficient UI designers, with interactive challenges and the option for a low monthly fee subscription.']}], 'duration': 172.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU6055.jpg', 'highlights': ['The chapter promotes a UI design bootcamp at scrimbaugh.com, featuring over 100 lessons tailored to help individuals become proficient UI designers, with interactive challenges and the option for a low monthly fee subscription.', 'The tutorial covers the process of setting up UI elements such as headlines, sub-headlines, and images, and also emphasizes the use of plugins like Lorem Ipsum to generate text and rectangles to create shapes within the Figma workspace.', 'The tutorial demonstrates the process of installing FigMotion within Figma by accessing the plugins menu, browsing plugins, and installing FigMotion to enable the animation functionality.', 'The video introduces FigMotion, a free plugin for Figma, that allows users to create intricate UI animations directly within Figma without the need to switch to other software like Adobe After Effects.']}, {'end': 599.01, 'segs': [{'end': 236.192, 'src': 'heatmap', 'start': 178.945, 'weight': 0, 'content': [{'end': 182.906, 'text': "We're going to right click plugins and we're going to choose Unsplash.", 'start': 178.945, 'duration': 3.961}, {'end': 183.467, 'text': 'All right.', 'start': 183.186, 'duration': 0.281}, {'end': 184.547, 'text': 'Yet another one.', 'start': 183.567, 'duration': 0.98}, {'end': 187.188, 'text': 'Another plugin that you can install.', 'start': 185.827, 'duration': 1.361}, {'end': 189.328, 'text': 'Now Unsplash I use all the time.', 'start': 187.848, 'duration': 1.48}, {'end': 190.329, 'text': 'So I recommend using it.', 'start': 189.368, 'duration': 0.961}, {'end': 196.49, 'text': "Trees Let's just, let's put in trees because for some strange reason I chose trees.", 'start': 191.069, 'duration': 5.421}, {'end': 198.631, 'text': 'I like that.', 'start': 198.171, 'duration': 0.46}, {'end': 201.644, 'text': 'Look how cool that looks.', 'start': 200.643, 'duration': 1.001}, {'end': 202.885, 'text': "That's nice looking.", 'start': 201.684, 'duration': 1.201}, {'end': 209.971, 'text': 'All right, so just, you know, a half-baked, half-assed sort of a UI that we have here.', 'start': 204.186, 'duration': 5.785}, {'end': 215.056, 'text': "But that's all we need just to demonstrate the purpose of the Fig Motion plugin.", 'start': 209.991, 'duration': 5.065}, {'end': 222.662, 'text': "So what we want to do is first we'll select the frame, right-click, go to Plugins, and then choose Fig Motion.", 'start': 215.136, 'duration': 7.526}, {'end': 225.565, 'text': "And we're going to choose Open Fig Motion right here.", 'start': 222.983, 'duration': 2.582}, {'end': 236.192, 'text': "Now, as you can see, it's showing if you have the layers panel open over here in the main Figma interface and then over here,", 'start': 227.529, 'duration': 8.663}], 'summary': 'Demonstrating plugin use with unsplash images in figma.', 'duration': 46.62, 'max_score': 178.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU178945.jpg'}, {'end': 293.909, 'src': 'embed', 'start': 267.166, 'weight': 2, 'content': [{'end': 271.008, 'text': "um, we don't want that, though we'll click update layers again.", 'start': 267.166, 'duration': 3.842}, {'end': 274.25, 'text': "Okay, so, here's the thing.", 'start': 272.168, 'duration': 2.082}, {'end': 274.991, 'text': "Here's how this works.", 'start': 274.33, 'duration': 0.661}, {'end': 284.32, 'text': "Basically, if you've ever worked with keyframe animation-based software, of which there's many freaking After Effects, Adobe Premiere, Final Cut,", 'start': 275.031, 'duration': 9.289}, {'end': 285.901, 'text': 'I believe, so many.', 'start': 284.32, 'duration': 1.581}, {'end': 289.765, 'text': 'The way we handle animation is this timeline right here.', 'start': 286.862, 'duration': 2.903}, {'end': 293.909, 'text': 'And as you can see, zero seconds, 0.1 seconds.', 'start': 290.365, 'duration': 3.544}], 'summary': 'Introduction to animation timeline in software like after effects, adobe premiere, and final cut.', 'duration': 26.743, 'max_score': 267.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU267166.jpg'}, {'end': 361.261, 'src': 'embed', 'start': 312.615, 'weight': 3, 'content': [{'end': 320.898, 'text': 'But those are basically the available properties that you have at your disposal to animate individually and simultaneously.', 'start': 312.615, 'duration': 8.283}, {'end': 326.455, 'text': "So.. Here's the thing about animation design and motion design as it's called.", 'start': 321.518, 'duration': 4.937}, {'end': 330.979, 'text': "Just because you're able to animate everything doesn't mean you should.", 'start': 328.657, 'duration': 2.322}, {'end': 337.985, 'text': 'You want things to come in in a consistent manner and almost in an unnoticeable but very nice and pleasing manner.', 'start': 331.94, 'duration': 6.045}, {'end': 343.03, 'text': "While this isn't going to be like a motion design tutorial, I thought I'd just throw that out there.", 'start': 339.527, 'duration': 3.503}, {'end': 351.175, 'text': "All right, so let's say for instance, we want to have this particular page kind of animate in from nothing.", 'start': 343.59, 'duration': 7.585}, {'end': 354.236, 'text': "So initially it's going to look like that.", 'start': 351.295, 'duration': 2.941}, {'end': 357.178, 'text': 'And then these three elements are going to animate in somehow.', 'start': 354.577, 'duration': 2.601}, {'end': 361.261, 'text': "We could do that through a simple opacity fade, although that's kind of lame.", 'start': 357.859, 'duration': 3.402}], 'summary': 'Animation should be consistent, unnoticeable, and pleasing. not everything should be animated.', 'duration': 48.646, 'max_score': 312.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU312615.jpg'}, {'end': 498.327, 'src': 'heatmap', 'start': 472.669, 'weight': 0.724, 'content': [{'end': 479.315, 'text': "oops, i forgot, for the height you can't put zero, it has to be one at least, like that's the smallest value.", 'start': 472.669, 'duration': 6.646}, {'end': 481.157, 'text': 'so you can see it right up there.', 'start': 479.315, 'duration': 1.842}, {'end': 487.071, 'text': "okay, so now, if we hit play, Isn't that kind of cool?", 'start': 481.157, 'duration': 5.914}, {'end': 488.557, 'text': 'how it kind of just kind of fills out?', 'start': 487.071, 'duration': 1.486}, {'end': 490.423, 'text': "So we'll watch this again.", 'start': 489.46, 'duration': 0.963}, {'end': 498.327, 'text': "Now it's, if you right click on these, you could see if we pop up, it has a linear easing applied to it.", 'start': 491.584, 'duration': 6.743}], 'summary': 'Instruction on setting minimum height and applying linear easing.', 'duration': 25.658, 'max_score': 472.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU472669.jpg'}, {'end': 543.57, 'src': 'embed', 'start': 512.832, 'weight': 5, 'content': [{'end': 513.753, 'text': "That's where we change it.", 'start': 512.832, 'duration': 0.921}, {'end': 523.857, 'text': 'So you can use something like custom and you can go to like a website where you can, I get different types of easings to put in.', 'start': 514.193, 'duration': 9.664}, {'end': 527.76, 'text': "I'm just going to use, we'll just use ease in and out.", 'start': 524.198, 'duration': 3.562}, {'end': 531.102, 'text': "Now, if we hit okay, let's do that for both of these.", 'start': 528.42, 'duration': 2.682}, {'end': 534.324, 'text': 'Ease in out, hit okay.', 'start': 532.583, 'duration': 1.741}, {'end': 537.706, 'text': 'And then we go back here and we hit play.', 'start': 535.705, 'duration': 2.001}, {'end': 543.57, 'text': "It's just a more natural sort of animation that occurs.", 'start': 539.187, 'duration': 4.383}], 'summary': 'Using custom easings like ease in and out for natural animations.', 'duration': 30.738, 'max_score': 512.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU512832.jpg'}], 'start': 178.945, 'title': 'Figma motion plugin & animation design', 'summary': 'Covers using fig motion plugin in figma, including adding plugins, using unsplash, and navigating the fig motion interface. it also provides insights into animation design techniques, emphasizing consistent and pleasing animations, and demonstrating animating elements using opacity and movement with ease in and out easing functions.', 'chapters': [{'end': 312.255, 'start': 178.945, 'title': 'Using fig motion plugin in figma', 'summary': 'Discusses the usage of the fig motion plugin in figma, demonstrating the process of adding plugins, using unsplash, and navigating the fig motion interface for layer updates and animation handling.', 'duration': 133.31, 'highlights': ['Demonstrating the process of adding plugins and using Unsplash in Figma. The speaker recommends using Unsplash and demonstrates the process of adding plugins in Figma.', 'Navigating the Fig Motion interface for layer updates and animation handling. The speaker explains the process of updating layers in the Fig Motion interface and demonstrates the animation handling capabilities.', 'Explanation of the timeline and layer properties in Fig Motion. The speaker explains the timeline and layer properties in Fig Motion, including the time range and individual layer attributes.']}, {'end': 599.01, 'start': 312.615, 'title': 'Animation design techniques', 'summary': 'Provides insights into animation design and motion design, emphasizing the importance of consistent and pleasing animations while demonstrating the process of animating elements using opacity and movement with ease in and out easing functions.', 'duration': 286.395, 'highlights': ['The importance of consistent and pleasing animations The chapter emphasizes the need for animations to be consistent and pleasing to the eye for a better user experience.', 'Demonstration of animating elements using opacity and movement The chapter demonstrates the process of animating elements by using a combination of opacity and movement, and highlights the importance of easing functions for a more natural animation.', 'Explanation of ease in and out easing functions The chapter explains the concept of ease in and out easing functions and how they contribute to a more natural animation effect.']}], 'duration': 420.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU178945.jpg', 'highlights': ['Demonstrating the process of adding plugins and using Unsplash in Figma.', 'Navigating the Fig Motion interface for layer updates and animation handling.', 'Explanation of the timeline and layer properties in Fig Motion.', 'The importance of consistent and pleasing animations', 'Demonstration of animating elements using opacity and movement', 'Explanation of ease in and out easing functions']}, {'end': 775.372, 'segs': [{'end': 632.94, 'src': 'embed', 'start': 599.891, 'weight': 1, 'content': [{'end': 601.732, 'text': 'And let me collapse that.', 'start': 599.891, 'duration': 1.841}, {'end': 607.896, 'text': 'So rectangle two is right there and rectangle three is at the top.', 'start': 601.792, 'duration': 6.104}, {'end': 612.178, 'text': "So we wanna animate three first, cause it's at the top and that will naturally happen first.", 'start': 607.956, 'duration': 4.222}, {'end': 623.296, 'text': "So at 300 milliseconds, we'll animate, let's see, I think we'll animate it up on the Y axis.", 'start': 612.218, 'duration': 11.078}, {'end': 625.757, 'text': "So I'm going to try something I haven't tried yet with this.", 'start': 623.516, 'duration': 2.241}, {'end': 632.94, 'text': "And what I'm going to do is let's move over to like the end portion of this.", 'start': 626.877, 'duration': 6.063}], 'summary': 'Animating rectangle three at the top first at 300 milliseconds.', 'duration': 33.049, 'max_score': 599.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU599891.jpg'}, {'end': 683.119, 'src': 'embed', 'start': 654.942, 'weight': 2, 'content': [{'end': 658.505, 'text': 'All right, and with this one, we wanna change the position.', 'start': 654.942, 'duration': 3.563}, {'end': 661.228, 'text': 'Now notice here, it says insert node value.', 'start': 658.906, 'duration': 2.322}, {'end': 673.356, 'text': "I haven't tested this, but I believe what that means is if we move this up, we can click this and it says 189.", 'start': 661.728, 'duration': 11.628}, {'end': 674.656, 'text': 'I think I just realized something.', 'start': 673.356, 'duration': 1.3}, {'end': 676.076, 'text': 'I screwed up and reversed these.', 'start': 674.716, 'duration': 1.36}, {'end': 678.457, 'text': 'So let me back up just a second.', 'start': 676.156, 'duration': 2.301}, {'end': 679.517, 'text': 'All right.', 'start': 679.157, 'duration': 0.36}, {'end': 682.498, 'text': "So let's go back to zero.", 'start': 679.918, 'duration': 2.58}, {'end': 683.119, 'text': "Let's hit play.", 'start': 682.518, 'duration': 0.601}], 'summary': 'Discussion about changing position and realizing a mistake with node values.', 'duration': 28.177, 'max_score': 654.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU654942.jpg'}, {'end': 741.814, 'src': 'embed', 'start': 712.873, 'weight': 0, 'content': [{'end': 715.695, 'text': "Except you know what? I don't want it hiding this.", 'start': 712.873, 'duration': 2.822}, {'end': 720.318, 'text': 'Or you know what we could do is we could do height as well and just kind of push it right there.', 'start': 716.735, 'duration': 3.583}, {'end': 731.445, 'text': "All right, so rectangle two is right here and we're gonna put in the key frame right around here for height this time and Y as well.", 'start': 720.338, 'duration': 11.107}, {'end': 737.409, 'text': "And then we'll go all the way to the end around 1000 milliseconds where the other ones end.", 'start': 732.525, 'duration': 4.884}, {'end': 741.814, 'text': 'And why is it doing that? There we go.', 'start': 738.329, 'duration': 3.485}], 'summary': "Adjusting rectangle two's height and position over 1000 milliseconds.", 'duration': 28.941, 'max_score': 712.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU712873.jpg'}], 'start': 599.891, 'title': 'Animating rectangles in ui', 'summary': 'Explains the process of animating rectangles in a ui, utilizing keyframes and node values to manipulate the y axis and height, achieving the desired animations over specific time intervals.', 'chapters': [{'end': 775.372, 'start': 599.891, 'title': 'Animating rectangles in ui', 'summary': 'Explains the process of animating rectangles in a ui, utilizing keyframes and node values to manipulate the y axis and height, achieving the desired animations over specific time intervals.', 'duration': 175.481, 'highlights': ["The chapter details animating rectangle three first as it's at the top, utilizing keyframes and node values to manipulate the Y axis and achieve the animation within 300 milliseconds.", 'It explains the process of correcting a mistake in the animation by adjusting the node values and keyframes, exemplifying the human aspect of the process.', 'The chapter then progresses to animate rectangle two, detailing the process of setting keyframes and node values to manipulate the height and Y axis, achieving the animation over a specified time interval of 1000 milliseconds.']}], 'duration': 175.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU599891.jpg', 'highlights': ['Animating rectangle two by setting keyframes and node values to manipulate height and Y axis over 1000ms', 'Animating rectangle three by utilizing keyframes and node values to manipulate Y axis within 300ms', 'Explaining the process of correcting animation mistakes by adjusting node values and keyframes']}, {'end': 961.145, 'segs': [{'end': 809.231, 'src': 'embed', 'start': 777.854, 'weight': 3, 'content': [{'end': 778.514, 'text': 'And there we go.', 'start': 777.854, 'duration': 0.66}, {'end': 783.298, 'text': 'This is a type of animation that you really wanna be able to create here in Figma,', 'start': 778.594, 'duration': 4.704}, {'end': 788.362, 'text': "when things are happening at different points in the timeline within the same artboard or the frame as it's called.", 'start': 783.298, 'duration': 5.064}, {'end': 795.868, 'text': "Okay Now, let's say for instance, you're happy with the animation.", 'start': 791.044, 'duration': 4.824}, {'end': 802.625, 'text': 'What is it that you can do at this point in order, boy, this is really frustrating me.', 'start': 796.248, 'duration': 6.377}, {'end': 804.286, 'text': 'Part of that UI was hidden.', 'start': 802.665, 'duration': 1.621}, {'end': 805.187, 'text': "Let's go back to it.", 'start': 804.326, 'duration': 0.861}, {'end': 809.231, 'text': 'Fig motion, open it.', 'start': 806.809, 'duration': 2.422}], 'summary': 'Figma allows creating multi-timeline animations with figmotion.', 'duration': 31.377, 'max_score': 777.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU777854.jpg'}, {'end': 912.679, 'src': 'heatmap', 'start': 881.3, 'weight': 1, 'content': [{'end': 885.522, 'text': "And yeah, that's a really handy tool.", 'start': 881.3, 'duration': 4.222}, {'end': 888.663, 'text': 'So now we can also hit export.', 'start': 885.682, 'duration': 2.981}, {'end': 892.864, 'text': 'We can export this as actually CSS or as JSON.', 'start': 889.223, 'duration': 3.641}, {'end': 893.725, 'text': 'So if I..', 'start': 893.305, 'duration': 0.42}, {'end': 899.555, 'text': 'Save that, and we open this up, and there we go.', 'start': 895.754, 'duration': 3.801}, {'end': 908.198, 'text': 'So basically it takes the selector names as IDs, as we can see here, from the names of the layers.', 'start': 899.655, 'duration': 8.543}, {'end': 912.679, 'text': 'Obviously you would wanna use something better in naming conventions rather than rectangle.', 'start': 908.698, 'duration': 3.981}], 'summary': 'Tool allows exporting as css or json, using selector names as ids.', 'duration': 71.147, 'max_score': 881.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU881300.jpg'}, {'end': 961.145, 'src': 'embed', 'start': 935.369, 'weight': 0, 'content': [{'end': 939.951, 'text': 'and this is something that as well, that you can hand to the front end developer or they can take themselves,', 'start': 935.369, 'duration': 4.582}, {'end': 943.633, 'text': 'um to help them set up all of the individual keyframes.', 'start': 939.951, 'duration': 3.682}, {'end': 945.573, 'text': 'All right, everybody.', 'start': 944.912, 'duration': 0.661}, {'end': 946.974, 'text': 'hopefully you learned something new.', 'start': 945.573, 'duration': 1.401}, {'end': 950.797, 'text': 'Just a quick video here just to teach you some awesome new plugin.', 'start': 947.014, 'duration': 3.783}, {'end': 959.123, 'text': "I'm not sure how new it is, I'll be honest with you, but at least it is for this channel that you can use to create awesome UI animations.", 'start': 951.157, 'duration': 7.966}, {'end': 960.624, 'text': "All right, I'll see you all soon.", 'start': 959.303, 'duration': 1.321}, {'end': 961.145, 'text': 'Goodbye.', 'start': 960.704, 'duration': 0.441}], 'summary': 'Introducing a new plugin for ui animations. suitable for front-end developers. quick and informative video.', 'duration': 25.776, 'max_score': 935.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU935369.jpg'}], 'start': 777.854, 'title': 'Figma animation and ui plugin overview', 'summary': 'Explores creating animations within an artboard in figma, encountering ui issues, and resolving them. it also discusses a ui animation plugin, showcasing smoother results and exporting options such as css or json, with potential benefits for front-end developers.', 'chapters': [{'end': 827.228, 'start': 777.854, 'title': 'Animating in figma: timeline and artboard', 'summary': 'Explores creating animations within the same artboard in figma, encountering ui issues, and resolving them, demonstrating the frustration of encountering unexpected behavior during the process.', 'duration': 49.374, 'highlights': ['Encountering UI issues and resolving them within Figma, demonstrating the frustration of unexpected behavior during the process.', 'Creating animations within the same artboard in Figma, emphasizing the capability to depict different events at different points in the timeline.', 'Demonstrating the frustration of encountering unexpected behavior during the animation creation process in Figma.']}, {'end': 961.145, 'start': 827.748, 'title': 'Ui animation plugin overview', 'summary': 'Discusses using a tool to render and export ui animations, showcasing the smoother results, exporting options such as css or json, and its potential for aiding front-end developers in implementing animations, concluding with an invitation to explore the new plugin for ui animations.', 'duration': 133.397, 'highlights': ['The tool allows rendering and exporting of UI animations, providing options to change video format and export as CSS or JSON, with a rendering time of approximately 30 seconds.', 'The rendered animation appears smoother compared to playing within the editor, showcasing its potential for presenting prototypes to front-end developers.', 'Exporting as CSS or JSON generates selector names as IDs, although it is noted that using better naming conventions is advisable.', 'The tool aids front-end developers in setting up individual keyframes for animations, potentially streamlining the implementation process.', 'The chapter concludes with an invitation to explore the new plugin for UI animations, offering a quick tutorial and highlighting its potential for creating impressive UI animations.']}], 'duration': 183.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/h6LX3bb7SxU/pics/h6LX3bb7SxU777854.jpg', 'highlights': ['The tool aids front-end developers in setting up individual keyframes for animations, potentially streamlining the implementation process.', 'Exporting as CSS or JSON generates selector names as IDs, although it is noted that using better naming conventions is advisable.', 'The rendered animation appears smoother compared to playing within the editor, showcasing its potential for presenting prototypes to front-end developers.', 'Creating animations within the same artboard in Figma, emphasizing the capability to depict different events at different points in the timeline.', 'The tool allows rendering and exporting of UI animations, providing options to change video format and export as CSS or JSON, with a rendering time of approximately 30 seconds.']}], 'highlights': ['The tutorial covers the process of setting up UI elements such as headlines, sub-headlines, and images, and also emphasizes the use of plugins like Lorem Ipsum to generate text and rectangles to create shapes within the Figma workspace.', 'The tutorial demonstrates the process of installing FigMotion within Figma by accessing the plugins menu, browsing plugins, and installing FigMotion to enable the animation functionality.', 'The video introduces FigMotion, a free plugin for Figma, that allows users to create intricate UI animations directly within Figma without the need to switch to other software like Adobe After Effects.', 'Demonstrating the process of adding plugins and using Unsplash in Figma.', 'The tool aids front-end developers in setting up individual keyframes for animations, potentially streamlining the implementation process.', 'Exporting as CSS or JSON generates selector names as IDs, although it is noted that using better naming conventions is advisable.', 'The rendered animation appears smoother compared to playing within the editor, showcasing its potential for presenting prototypes to front-end developers.', 'Creating animations within the same artboard in Figma, emphasizing the capability to depict different events at different points in the timeline.', 'Animating rectangle two by setting keyframes and node values to manipulate height and Y axis over 1000ms', 'Animating rectangle three by utilizing keyframes and node values to manipulate Y axis within 300ms', 'Explaining the process of correcting animation mistakes by adjusting node values and keyframes', 'The tutorial promotes a UI design bootcamp at scrimbaugh.com, featuring over 100 lessons tailored to help individuals become proficient UI designers, with interactive challenges and the option for a low monthly fee subscription.']}