Midjourney Web Design - Depth Animation and Prototyping

while designing beautiful UI is crucial it's equally essential to master the art of prototyping with figma Unleash Your creativity and bring your ideas to life seamlessly beautiful UI is enchanting but adding life to it elevates the experience motion animation and immersive interactions transform static designs into captivating stories that engage and guide users let's Infuse our creations with soul breathing emotion and wonder into every pixel forging deep connections and leaving Lasting Impressions we will explore Leia pix converter a software tool designed to convert 2D images and videos into holographic content the converter utilizes Leia's diffractive light field backlighting technology to create a sense of depth and dimensionality in the content providing a unique and immersive visual experience animations can add a touch of interactivity and visual interest to your designs making them more engaging and dynamic we will add out line animation using interactive components I will guide you through the process of creating an outline animation that triggers when hovering over an element and returns to its initial State when the mouse leaves get ready to Captivate and Inspire your audience like never before lastly discover why a well-designed signup page is crucial for success it's all about leaving a lasting first impression enhancing the user experience boosting conversion rates and Gathering valuable user data ready to Captivate your audience build trust and unlock the full potential of your website or application we will then turn the model interactive by adding overlay prototypes these overlays provide additional context or information without navigating away from the current screen and simulate real user experiences so let's begin to find all the prompts I share you will find it in my figma file copy The Prompt and go to mid-journey Discord then type image prompt and paste the prompt so here is your generate image you'll see a grid of four Images if you're not satisfied with the result you can always click on generate more let's take a look at the new image we've generated honestly I'm not fan of the eyes in this one I prefer the first image we generated you can still generate more images and also modify the prompt to get different results you can also create your own prompt if you're not familiar with prompts I'm here to guide you my trick is to go to the explore section in the mid-journey website write down what you're specifically looking for and then copy the prompt go to the mid-journey Discord to render the image and type imagine prompt then paste your prompt you'll see a grid of four images and if you like one or more of them you can click the U button if you're not satisfied with the result you can always click on generate more you can modify the prompt by adding specific words for example it's written a sports car you can specify the exact car that you want such as Bugatti also if you want to see Flames behind the car be sure to include these details in the prompt to get the exact result you want here is the new image we've generated with the new detail that we just added I very like the fourth image so I'm going to click on the u4 button and mid-journey will upscale the image you can also generate more until you find the perfect image now you have your upscale image it will save automatically in your mid-journey account go back to your mid-journey account you will find your image in the home section then click on the three points icons and select save image once you've found the perfect image and saved it we'll head over to the leopix converter website this amazing tool enables us to transform your favorite images into captivating depth animations by adding depth to your visuals this powerful tool brings a whole new dimension making them come to life in breathtaking ways unleash the full potential of your images and create stunning animated experiences that Captivate and engage your audience with leopix converter the possibilities are endless and your Creations are only limited by your imagination you must create an account once you have registered click on upload an image select your image and then upload it now I'll show you how to use this cool tool you'll see it's super easy go to edit mode in the menu on the left you have options such as animation linked animation style amount of motion Focus Point Edge dilation and advanced editor we're going to start with the animation length this setting determines the duration of the animation you can choose a length between 1 and 6 seconds if you'd like to follow along with my course I recommend setting your animation to 5 Seconds this duration will give your animation a nice steady Pace without it feeling rushed now select the animation style this option lets you select the style of Animation you want to apply to your image the available styles are as follows horizontal creates a horizontal animation effect Wide Circle produces a circular animation with a wider radius Circle creates a circular animation tall Circle generates a circular animation with a taller shape vertical creates a vertical animation effect perspective applies a perspective based animation effect in my case I've decided to go with the last perspective as it suits my vision best feel free to experiment with these Styles and find the one that resonates with your project now select the amount of motion option this setting allows you to control the intensity or amount of motion in the animation you can choose from three options less produces a subtle or minimal motion effect regular applies a moderate amount of motion more generates a higher intensity of motion we're going to apply the regular motion now select the focus point this option determines the focal point or area of focus in the animation you can choose from three options close sets the focus Point closer to the viewer Center positions the focus point at the center of the animation far sets the focus Point further away from the viewer choose the close Focus point if you want to create a pronounced sense of depth and bring objects closer to the viewer this option works well when you want to emphasize certain elements in the animation and make them appear more prominent it can add a sense of immediacy and impact to your visuals select the center Focus point if you want to distribute the focus evenly across the animation this option keeps the viewers attention centered and balanced making it suitable for animations with a symmetrical or evenly distributed composition it provides a more balanced and uniform depth effect opt for the far Focus point if you want to create a sense of depth that extends into the distance this option can make objects in the animation appear farther away and create a vast or expansive visual experience it works well for creating a sense of scale and depth in Landscapes or scenes with a distant Horizon we're going to opt for the center Focus point the center Focus Point helps maintain visual balance and symmetry within the animation and create an equidistant depth effect where objects both near and far from the viewer appear to have a similar level of prominence now go to Edge dilation this setting controls the edge dilation effect in the animation it adjusts the amount of expansion or contraction applied to the edges of the image you can choose from four levels of dilation 0.00.5 1.0 and 1.5 usually a dilation of 0.0 means no dilation will be performed leaving the edges unchanged as you can see from our image the effect is not good at all we can see the expanding edges a factor of 0.5 would apply a mild dilation expanding the edges slightly but with this image 0.5 is the best option because no dilation is performed and leaves the edges unchanged so it depends on the image then when you increase the factor to 1.0 and 1.5 the dilation effect becomes more pronounced resulting in a more significant expansion of the edges the choice of the dilation level depends on the desired outcome and the characteristics of the image in our case 0.5 is the best option for us let's select the advanced editor this option provides an advanced editing interface that allows for more detailed customization of the animation it offers additional controls and settings to fine-tune the animation according to your preferences the amplitude X this parameter controls the extent or strength of the animation's movement along the x-axis which mean the horizontal Direction adjusting the amplitude x value will determine how far the animation moves from side to side the amplitude y this parameter controls the extent or strength of the animation's movement along the y-axis which mean the vertical Direction modifying the amplitude y value will determine how far the animation moves up and down the amplitude Z this parameter controls the extent or strength of the animation's movement along the z-axis which mean the depth or forward backward Direction changing the amplitude Z value will determine how far the animation moves closer to the viewer or recedes into the distance the phase X this parameter controls the timing or phase of the animation's movement along the x-axis adjusting the phase x value will determine at what point the animation starts its movement from side to side the phase y this parameter controls the timing or phase of the animation's movement along the y-axis modifying the phase y value will determine at what point the animation starts its movement up and down the phase Z this parameter controls the timing or phase of the animation's movement along the z-axis changing the phase Z value will determine at what point the animation starts moving closer to the viewer or receding into the distance now let's adjust the parameters to achieve the desired effect in my animation the amplitude X I have chosen the middle option because I want the animation to move in the center rather than from side to side the amplitude y I have selected zero because I don't want my animation to move up and down it makes me feel nauseous the amplitude Z I have opted for the center option for the phase X and Y I have selected none which corresponds to zero lastly for the phase Z I have chosen one quarter all right let's take the next steps first click on go back great now click on share and select save to MP4 here's the thing though when you save your image in MP4 format it might lose some quality and end up looking a bit blurry but hey no need to fret I've got a Nifty trick up my sleeve to help you out we can cheat a little by using a studio recording software like screenflow or screen Studios but I think we have to pay so we're going to use QuickTime Player instead go to file and select new screen recording you will notice a setting at the bottom of your screen right now you cannot see it on my screen because at the moment I'm using my laptop and my studio display and the setting is appearing on my laptop so you have two options the first option is to record the entire screen while the second option is to record a selected portion choose the selected portion option and then frame the specific area that you wish to record then just record your screen with that software and click on stop at the top when you're done by doing so we'll be able to maintain better image quality and keep those pesky blurriness issues at Bay so here is your animation without any loss in quality pretty neat trick right then we're going to add some cool effect using the cap cut tool which is a really cool app for editing videos it was made by the same company that created Tick Tock and do Yin so you know it's got some great features with cap cut you can create and edit videos using lots of different tools you can cut trim and merge your videos easily plus you can add cool effects filters text and even music to make your videos more awesome you have the option to either download the Mac app or edit videos online the choice is yours afterward you will need to sign up I'm going to use the app version for Mac so open your cap cut app and click on new project but first I need to log in now let's explore its features you have options such as media audio text stickers effects transitions filters and adjusting options you will see that this tool is pretty simple and easy to use so you will be automatically in the media section this feature allows you to import media files such as videos photos and audio clips into the editor you can add these files to your timeline and work with them in your editing project so let's import the animation that we just created in the layupix converter the audio feature enables you to edit and manipulate the audio within your videos you can add background music trim or cut audio clips adjust volume levels and apply other audio effects to enhance the overall sound quality of your videos however for our project we don't need any audio adjustments [Music] first go back to media and drag our animation here to start to edit then go to the text section which allows you to add text elements to your videos you can choose from different fonts sizes colors and styles to create titles captions or any other textual elements you want to include in your videos Additionally you can customize the position duration and animation of the text to achieve the desired visual effect however for our project we won't be using any text with the sticker feature you can add stickers or images to your videos these stickers can be emojis icons Graphics or any other visual elements that you want to Overlay onto your video footage you can resize rotate and position stickers on the video timeline to create fun and engaging visual effects let me delete the sticker since we won't need it and then we can move on to the effects the effects feature offers a wide range of visual effects that you can apply to your videos these effects can enhance the colors contrast saturation or other aspects of your video footage moreover you can apply filters Transitions and various creative effects to give your videos a unique and Polished look enjoy experimenting with the effects to find the ones that work best for your animation in our project simply scroll down until you come across the spark category and then select spark 1 from the available options click on the plus button and it will automatically add the effect to the timeline then stretch it to the right until it reaches the end of the animation then click on play to preview your animation however feel free to explore further and choose what works best for you if you have selected a different image it's important to note that the same effect might not work as well so don't hesitate to explore and find the perfect fit have fun transitions are effects that are applied between two video clips to create a smooth and seamless transition from one scene to another however for our project since we only have one animation we won't be needing transitions but if you're working on your personal project or work you can experiment with two videos and explore the variety of transition options cap cut provides you can choose from options like fade dissolve slide zoom and more customize the duration and other parameters to achieve the desired visual effect between your video clips filters are visual effects that can be applied to your video clips to change their overall look and mood cap cut offers a collection of filters with different color tones and styles you can choose a filter that best suits the atmosphere you want to create in your video and apply it to enhance the visual appeal of your footage and then you have various adjustment tools to refine and enhance your video clips these options allow you to modify parameters such as brightness contrast saturation Hue and more by adjusting these settings you can fine tune the colors and visual characteristics of your videos to achieve the desired aesthetic so I'm going to remove the custom adjustment since I only needed to add an effect after that I'll click on the export button it's crucial to choose the 4K resolution and MP4 format once selected we can proceed to export our animation click on open folder your video is save on the cap cut documents now let's preview our new animation it's amazing right start by creating a new figma project if you prefer to work on your own or open the design file I have provided bring your animation into your canvas and ensure that your design is prepared and organized with the elements you wish to animate on my page I have already taken care of everything for you including prompts designs and even my own animation next we'll flip our animation horizontally to ensure that my text appears on the left hand side without obscuring the girl's face select the animation right click and click on flip horizontal this simple adjustment solves the problem effectively additionally we'll proceed to scale down the animation press on K on your keyboard set the width size to 1840 then go to the height size set to 1031 and make sure to remove the chain we're going to create interactive components with variants click on the create component and then click on ADD variant this feature allows you to establish prototype interactions between different variants within a component set whenever you add an instance of the component to your designs the interactions are automatically set up and functional this not only saves you time during prototype creation but also helps avoid unnecessary complexity in your design process in Prototype mode we're going to disable audio playback for the parent component to ensure that audio is not played automatically when interacting with the Prototype however we're not going to disable audio for the variant component the reason for disabling audio play for the parent component while keeping it enabled for the child component is to create an interactive effect where the animation starts playing when the user hovers over the component to set up this interaction follow these steps select the parent component and click on the plus icon to create an interaction drag the interaction to the variant component a setting will appear in the setting choose while hovering and select the instant option this means that when the mouse enters the hover area the animation triggers and begins playing next set up the interaction for when the mouse leaves the hover area select the variant component and click on the plus icon to create a new interaction drag this interaction to the parent component choose the mouse Leaf option this ensures that when the mouse exits the hover area the animation stops to make the Prototype work we need to place our animation within a frame copy the default component paste the component onto the canvas right click on the pasted component and select frame selection click on the play button to preview your prototype so we achieve the desired interactive effect where the animation starts playing when hovering and stops when the mouse leaves the hover area we've reached the end of this section by now you've gained the skills to animate your images using the Fantastic Tools I introduced Leia picks and cap cut it's amazing how simple and effortless it was to bring your image to life right now get ready for the next thrilling step creating an outline animation together we're going to learn how to create an outline animation using interactive components animations can add a touch of interactivity and visual interest to your designs making them more engaging and dynamic in this section I will guide you through the process of creating an outline animation that triggers when hovering over an element and returns to its initial State when the mouse leaves by the end of this tutorial you'll have the knowledge to incorporate these interactive and animated elements into your figma prototypes bringing your designs to life lastly we learned how to animate our image but before we get started let's begin by selecting the landing page design in dark mode and replacing the existing image with the animation we created in the previous section once that's done we'll maintain the same design but shift our Focus to animating the outline of the three cards located at the bottom sheet we'll duplicate the three cards and move to another section called the component page I will demonstrate how to animate the outline of the first card and then it will be your task to apply the same animation to the remaining two cards consider this as a homework or exercise to reinforce what you've learned feel free to rewind or pause the video if needed now let's dive into the component part we're going to create an interactive component with variance just like we did with the animated image in the previous section select the first card and click on create component in the toolbar at the top then click on the plus icon to add variant we'll modify the outlines for both the default component and its variant our goal is to create an effect where the outline starts on the right side and then changes direction to the left to achieve this effect we need to make adjustments to the outlines select the parent component and navigate to The Stroke section you will find two linear gradients choose the second gradient and keep the color white but adjust the opacity set the opacity at the top to sixty percent and ensure it transitions to 100 at the bottom make sure the blending mode is set to Overlay next select the first linear gradient and change the blend mode to normal and the gradient to angular now let's add colors to our gradient by clicking on the spot where we want the color to appear to start I'll add my first color to the top middle of my oval which is 3 7 F4F and four make sure to set the opacity to 100 for this color I'm going to add two more colors one to the top right and one to the top left the color for both spots is three three four two F and F but this time we're going to reduce the opacity to zero percent you'll notice that even with the opacity set to zero percent the colors will still be visible albeit in a subtle way we'll now add two stop colors one to the bottom right and one to the bottom left the color for both stops will be black and we'll set the opacity to ten percent in the stroke section next to angular make sure to set the opacity to 100 percent once you have added colors to your angular gradient you can adjust the gradient's angle by clicking on the rotation handle located at the bottom of the gradient bar simply drag this handle to rotate the gradient in any desired Direction in this case we'll rotate the gradient until our color accent is positioned in the left hand corner we're going to copy the properties of the first outline right click on it and select copy properties then right click on the variant and choose paste properties be sure to paste it onto the base layer which is the rectangle for the variant let's rotate the angular gradient to the right ensure that the color accent stops at the right hand corner now let's switch to the Prototype mode located at the top of the right hand menu here we'll focus on creating connections adding interactions and animations to our prototype to create a connection start by selecting the parent component then click on the plus icon located on the border of the selected objects drag your cursor to the destination which in this case is the variant this establishes a connection between the two cards once the connection is created the interaction detail panel will appear here you can specify the details for the interaction for the trigger select while hovering this Choice ensures that the outline animation occurs only when the user's cursor hovers over the card next choose instant for the animation type this option enables an immediate and seamless transition for the animation effect now let's create another interaction that stops the outline animation when the mouse leaves the cards select the variant and click on the plus icon then drag your cursor to the component this establishes the connection between the two cards in the interaction detail panel you will see various options select Mouse leave as the interaction type this Choice ensures that the outline animation stops when the user's mouse cursor leaves the component additionally choose instant as the animation type to achieve an immediate and seamless transition effect now it's time to test our prototype and evaluate its functionality we'll assess how well it works and determine if any adjustments are necessary copy the parent component and then paste to our design click on the play button located in the toolbar to preview of the animation now you can see it in action the outline animates when we hover over it now let's repeat the same process with the remaining two cards put your card in a component and add a variant copy the properties from the outline of the card we worked on together to avoid manually redoing them then paste the properties to the other two card bases next do the same for the variant copy the properties from the outline of the variant and paste them to the other two variants after that activate prototype mode select the component and choose the while hovering interaction then for the variant select the mouse leave option repeat the same process for the last component and variant then copy the components and paste them into your design that's it you've completed the process for all the cards now we can preview our prototype so everything is working we can move to the next step the next step is to animate the outline the update layout we are going to repeat the same steps copy the update layout and bring it into the component page place it within a component and add a variant the outline has already been completed for the parent component now we just need to do it for the variant select the variant and enter the angular settings make adjustments To the Colors by moving the stop colors accordingly also you can modify the angle of the angular gradient once you're satisfied with the variant copy its properties and paste them onto the other list layouts next let's repeat the same process for the interactions switch to prototype mode and establish a connection between the parent component and the child variant select while hovering as the interaction type and choose instant as the animation now focus on the child variant and create a connection back to its parent this time select Mouse leave as the interaction and again set the animation to instant copy the parent component and then paste to your design now let's preview it great the interactive component is working perfectly later in the course we will also learn how to animate buttons now the only task left is to animate the outlines in the page notification this will be assigned to you as a homework task or exercise congratulations on successfully learning how to create an outline animation using interactive components with variance in figma feel free to explore various animation options experiment with timing and easing and incorporate these techniques into your own projects by practicing continuously you will further enhance your prototyping skills in figma in the next section we will focus on designing the sign up page and I will guide you through creating the model and setting up the Prototype in our previous section we covered how to bring our images to life and animate the outline now let's move on to designing the signup layout using images from mid-journey and leveraging the auto layout feature furthermore we'll guide you through the exciting process of creating overlay prototypes in figma these prototypes Empower you to build interactive models tooltips and drop down menus that significantly enhance user engagement we're going to work on this stunning image created by mid-journey I'll give you the prompt and then you can hop over to the mid-journey Discord to render the images on your own alternatively you can use the same image as me if you prefer all the prompts I share can be found in my figma file so you won't miss a thing go to the mid-journey Discord and type slash imagine prompt to bring up the prompt input paste your desired prompt and you will be presented with a grid of four images to generate an upscaled version of an image simply click on the U button or generate more images by clicking on the respective option okay let's go through the process step by step first you need to pick an image second we'll design the sign up layout and finally the third step is to create the overlay now let's focus on creating our signup layout to begin press the T key to activate the text tool next type sign up using the enter font and make it bold with a size of 40. then we'll set the alignment to left and enable auto width lastly be sure to select the dark primary color style for the text for the subtitle let's start by duplicating the text then change the duplicated text to say sign up now and get access to exclusive content using the body 2 text style lastly make sure to apply the dark secondary color style to the subtitle to proceed once again press the T key and type email address using the enter font set the font size to 16 and choose the medium weight option you can opt for either the primary color or white color for the text press the T key and type name at email.com set the font weight to regular set the alignment to left and enable auto width lastly reduce the opacity of the text layer to 30 percent to achieve the desired transparency effect to add Auto layout right click on the selected elements and choose add Auto layout from the menu in the auto layout properties set the alignment to align left in the center adjust the spacing between items to 4 horizontal padding to 16 and vertical padding to 4. now in the frame properties select a fixed width of 320 and a fixed height of 44. set the corner radius to 10 to give it a rounded appearance for the fill choose the linear option set the color to white and set the opacity at the top to zero percent and at the bottom to 100 percent choose the blend mode as overlay then reduce the opacity of the linear fill to 20 percent add a stroke with a white color select the blend mode as overlay and set the stroke opacity to 60 percent lastly apply a background blur effect with a strength of 30. select the text layer that contains email address and also select the frame layer press shift plus a to add Auto layout adjust the spacing between items to eight name the layer as form duplicate the layer and change the text to password use asterisk six times to represent the password we'll copy the password field and remove it from the auto layout we'll name it sign up button we'll change the text to sign up in the auto layout section we're going to put 0 to the padding and set the alignment in the center select the dark primary color style and the subtitle one text style go to the design page and we'll take the generate image button from the landing page in dark mode then we will copy and paste the buttons properties into the new button you can see that there's a glow below the button I'll ungroup everything else to avoid redoing it and keep only the glow layer I'll put it under my new button then I'll extend it to the right to cover the length of my button now we'll add some text to the top of the button press on T and type forgot your password reset password select only forgot password and set to normal we're going to keep reset password in semi-bold but we'll change the color to 0 0 cfd right by clicking on sign up you agree to our terms of service and privacy policy using the caption one style choose the dark secondary text color for a visually consistent and clear presentation go to the asset and type Google button assets are components that can be reused in your designs allowing you to enhance your workflow and save time select it and bring it into the canvas now we're going to create a separator between the text and the Google button press on T and write or using the regular and the size is 14. press on R to activate the rectangle 2 and create a line of 120 by 0.5 duplicate it and place it on the left the text should be in the middle then set it in an auto layout now we're going to change the color select the text reduce the opacity to 60 percent and then for the two lines the color is white and reduce the opacity to twenty percent in the auto layout set 12 on the spacing between items and Name by separator place the Google button under the separator next we'll select everything and put it in an auto layout set 30 on the spacing between items 100 on the horizontal padding and 80 on the vertical padding fill with the color 1 f 2 C 6 and 4 and reduce the opacity to 70 percent we'll navigate to the mid Journey prompts page to capture or use your own generated image insert the image onto the page you're currently working on next press the r key to create a rectangle with dimensions of 544 by 784 select both the rectangle and the image then group them together and name the group image position the rectangle layer at the bottom of the image and use it as a mask select the image group and the form frame then apply Auto layout ensure that the spacing between items is set to zero in the frame section choose fill container to fit the layout properly finally navigate to the auto layout properties and select the Align left option we're going to name the layer by sign up layout then we're going to set the corner radius to 20 and clip content now let's add an outline to the layout we will use the same outline as in the previous design choose outline dark update list color style and detach it so we can move the angle then we're going to add another color for the outline choose solely with the color white and choose overlay for the blend mode our layout is now missing a bit of information in other words we're missing a text to initiate users to register when you add text directly within an auto layout it typically expands to accommodate the content as a result it may push other elements or create empty space causing a gap in the layout this behavior is a consequence of the automatic adjustment mechanism of Auto layout to overcome this issue one approach is to separate the text from the auto layout then put the text with the Image Group to maintain the desired visual Association and Arrangement I'm going to write join a thriving community of creators in semi-bold with a font size of 40. a additionally I will write with artificial intelligence in regular font and a size of 20. select the two text add in Auto layout in the spacing between items is 32. we're going to put our text in the image group now we will apply a drop shadow effect set the Y offset to 100 and the blur radius to 100 using the color black with an opacity of 25 percent additionally add another drop shadow effect with a Y offset of 40 a blur radius of 80 and a black color with an opacity of 50 percent we need a closing button go to asset type close button and bring it into the design it's very important that the close button layer is at the top of the frame otherwise it'll go into the sign up layout then we're going to put the sign up layout and the close button in a frame and rename it by sign up the spacing for the close button is 14 from the top and right to proceed let's enter the Prototype mode in figma we'll return to our landing page where we previously animated our image and outline this time we'll focus on creating a modal using the overlay feature we will establish a connection between the sign up button and the sign up layout the triggering event will be a click action meaning that when the user clicks on the button the animation will be initiated instead of selecting navigate to a frame we will opt for open overlay you have various positioning options available to determine the layout's placement whether in the center on the right or on the left in this case we will choose the center position as I want the sign up layout to appear in the middle I will explain this two features after now let's delve into the animation options you have three choices instant dissolve and move in instant this animation type provides an immediate transition from the button click to the appearance of the sign up layout there are no visual effects or transitions involved resulting in an instantaneous change dissolve with the dissolve animation the sign up layout gradually Fades into view upon clicking the sign up button this creates a smooth and gradual transition giving a subtle and elegant effect to the appearance of the layout and the last move in which involves the sign up layout sliding or moving into the designated position from a specific Direction such as the left right or bottom upon clicking the button we can close when clicking outside this feature allows the sign up layout to close when the user clicks anywhere outside of the overlay it enhances user experience by providing an intuitive way to dismiss the sign up form without needing to specifically locate a close button also we can add background behind overlay this feature involves adding a background layer behind the sign up overlay the purpose of this background is to visually separate the overlay from the rest of the page content creating a focus on the sign up form it helps to emphasize the importance of the sign up process and provides a clear visual boundary so let's set the color to Black with 80 opacity as for the animation we'll choose dissolve with a gentle effect and a duration of 300 MS let's review our prototype now let's get our close button working that when you click on the close button it will close using the close overlay to do this let's select the close button then go to hover in the Prototype properties and select close overlay our button works perfectly and we can now close the model by clicking on it that's all for today we've covered animating our image and outline as well as creating a modal using overlays if you're interested in continuing the Prototype course you can visit our design code website there you'll learn how to animate buttons cards scrolling and sticky headers you'll also have access to the complete design resources so thank you so much for watching see you next time

Channel: DesignCode

Views: 24,234

Keywords: figma, auto layout, ui, ux, midjourney, web design, responsive design, sign up page, modal, prototype, animation, Leia pix converter, variants, components, intro animation, parallax animation

Id: xv4myqcvVT0

Length: 43min 41sec (2621 seconds)

Published: Thu Jun 15 2023