you've spent most of this course building your mock-ups and now it's time to turn them into a high-fidelity prototype as you learned earlier in this certificate program a prototype is an early model of a product that demonstrates functionality so what's the difference between low fidelity and high fidelity prototypes low fidelity prototypes are interactive versions of designs that use content placeholders on the other hand high fidelity prototypes are detailed interactive versions of designs that closely match the look and feel of the final product essentially a high fidelity prototype takes the design work you've already done in the mock-ups and makes it interactive remember that mockups focus on visual design but prototypes focus on functionality a high-fidelity prototype must have these three pieces visual elements like color images icons and typography navigation to help users move between screens and interaction like gestures in motion which make the prototype function first you'll need to finalize all of the visual elements within the prototype basically this means confirming any written content illustrations graphics and external links that will be part of the final product in an ideal world you'll coordinate with other members of your team to make sure you have realistic pieces of content to include in your high fidelity prototype but in the real world you might need to design with placeholders if something isn't ready think about this screen of the dog walker app on the left the low fidelity prototype used lines as placeholders for names you might also use placeholder text like first name last name or dog walker a in a low fidelity part of the type on the right the high fidelity prototype includes actual names and descriptions instead of placeholders the goal is to have realistic names and profile photos to simulate the real app experience the second part of high fidelity prototypes that you'll need to finalize is the navigation for the user flow you want to test your low fidelity prototypes should have already taken into account the critical user journey also known as the main user flow navigation is important because it helps users explore and enjoy your product without a good navigation system in place users will struggle or even stop using your product so check that you have the right buttons or icons on each screen like back arrows and x's to allow navigation to happen when checking the navigation in a high fidelity prototype ask yourself these questions how does user get from one screen to the next how easy is it to locate navigation related icons like back arrows and at what point does a user journey end finally a high fidelity prototype needs interactivity remember how you connected each screen of the low fidelity prototype now you need to add interaction between each screen again using your new high fidelity designs as a reminder interactivity makes the prototype function let's revisit how to make something interactive in figma also known as making a connection to create a connection first select the item you want to be the hotspot this is where the user's interaction will take place you can create a hotspot on anything like a button icon or heading second make the connection this is the arrow or noodle that connects the hotspot to the destination you can make a connection by clicking the little blue plus sign inside the circle finally indicate the destination this is where a connection ends remember the destination has to be a frame or screen it cannot be an item within the frame once you have these connections you can add the interaction and animation interaction and animation includes things like gestures in motion we'll focus on gestures in motion in this part of the course so stay tuned for more okay you're starting to understand everything that goes into a high fidelity prototype so it's time to learn how to create one yourself coming up we'll start working on a high fidelity prototype in figma let's get going there are six steps to create a high fidelity prototype in figma those six steps are lay out the mockups connect the screens add interaction details adjust the animation complete for all screens and share your work in this video we'll focus on the first two we'll cover the other four later before we get started i'm going to open up figma so you can follow along with each step here's a quick pro tip you can create your high fidelity prototype inside of the same file as all of your existing designs like your wireframes and mock-ups i'll simply create a new page all right you're ready to get started with step one lay out the mock-ups first i'm going to copy and paste my mock-ups into the hi-fi prototype page as you might have noticed we've been designing the screens of the dog walker app in the order that the user would move through the app we started with the home screen then designed the choose a date and time screens next we created the select dog walker screens and finally we added the booking confirmation screen at this point in the design process you should have already considered the user flow through your own app too if you haven't ordered your screens based on the user flow take time now to do so alright you're now ready for step 2 which is connecting the screens remember from the last video to create a connection you first need to select the item you want to be the hotspot then make the connection using the arrow and finally indicate the destination where the connection ends let me show you i'll connect the book appointment button on the home page with the first book appointment screen to do that i'll select the book appointment button on the home page to be the hotspot i need to check that i'm in prototype mode on the right side panel seems like i'm still in design mode i'm going to click on prototype at the top of the right side panel to switch did you notice how this new blue circle appeared on the book appointment button when i switched to prototype mode this is how i'll make the connection when i hover over the blue circle i get this plus sign in the middle of the right side of the button we call the blue circle with the plus sign a prototype node or just a node for short when i click on the node and drag an arrow appears i drag the arrow from the book appointment button on the home page to the frame i want to connect to which is the first book appointment screen this will be the destination keep in mind that the first connection you make will be the starting frame for your prototype this is why it's important to have your screens laid out in the order of the user flow and for the first connection you make to be the first action you'd want a user to take in your prototype from here i'll continue to work my way through the rest of the screens in my app making additional connections alright we've covered the first two steps to create a hi-fi prototype in figma lay out the mock-up and connect the screens now it's your turn to try out these steps on your own designs we'll cover the other four steps soon good luck before you learn about the additional steps to create a high fidelity prototype in figma i want to introduce you to two concepts gestures and motion let's start with some quick definitions a gesture is any method of interaction a user has with information on their device using touch the most common gestures are tapping scrolling swiping and zooming motion is a way to animate static design elements to focus the user's attention and tell stories another way to think about this is motion helps the user understand subtle changes that take place on screen by adding an animation for example when you make an online purchase on a mobile device you usually tap on a button to add the item to your cart if the cart icon changes state without any animation you may not notice the change but if the cart icon animates as it changes state your attention gets drawn to the cart and you are automatically provided feedback that an action occurred in this example the tap is the gesture and the motion is the animation that takes place after the add to cart button is tapped let's check out a second common gesture swipe have you ever read an ebook and swiped your finger across the screen to flip to the next page of the book in this case swipe is the gesture the motion is the animation that takes place after you swipe the key takeaway is that gestures in motion help enrich the user experience and increase usability so far the prototype we've created is pretty static as we've connected the screens without adding any animations coming up next i'll show you how to enrich the user experience using motion and gestures ready to cover the next four steps to create a high fidelity prototype in figma as a refresher the six steps to create a high fidelity prototype are lay out the mock-ups connect the screens add interaction details adjust the animation complete for all screens and share your work we already learned how to layout the mock-ups and connect the screens now it's on to step three which is adding interaction details after connecting two screens it's time to customize the interaction details before we get started i'm going to open up figma so you can follow along with each step there are three parts of an interaction to explore first is the trigger the trigger defines what type of interaction will cause the prototype to advance forward the trigger could be a mouse click touch gesture or the time elapsed in the current frame in figma the trigger is the first drop down menu listed on the interaction details panel for the book appointment button on the home page i'll select the trigger called on click on tap which means the prototype will advance forward when a user clicks or taps the button the second part of an interaction is the action the action defines what happens when the user interacts with the hotspot this could mean moving to another frame or opening a link there are six actions to choose from in figma for this example i'll select navigate to from the dropdown menu this action takes users from one frame in a prototype to the next navigate 2 is the most common type of action to use when moving between entire screens the last part of an interaction is the destination the destination could be another screen in the prototype or an overlay that appears above the current screen in this example after a user clicks the book appointment button i want the destination to be the first book appointment screen alright we finished step three of creating a high fidelity prototype in figma which was adding interaction details now it's time for step four which is adjusting the animation the animation settings determine how the prototype moves from one screen to the other this is how i can add motion to the prototype figma has eight animations you can choose from for example if i select instant as the animation the user will go from one screen to the next without any motion or transition in between let's take a moment to check out how this works in the prototype first i'll hit the present icon next to the share button in the top right of figma that will open up a new tab if i click on the book appointment button in the homepage of the prototype our app will instantly move to the first book appointment screen now that i've seen this animation in action i'm not sure that i like the instant animation because it feels jarring so let me try changing this animation to slide in instead for this animation i also need to select the direction that the page will slide in from i'll select the up arrow because i want the page to slide in from the bottom of the screen up toward the top of the screen the arrow points in the direction that the screen will slide then i'll test it out again i'll hit the present button one more time and see how the slide in animation looks great i like the slide in animation because it's smoother and more natural one more thing gestures in motion can really help users with wayfinding i've just shown you how to make the book appointment screen open now i need to add the motion that will happen when a user closes the screen in order to return to the home page i want these two motions to feel similar so that it's easy for users to navigate through the app to go back to the home screen users will tap the x in the upper right corner of the book appointment screen i'll start by connecting the x to the home page i'll click the x select the node and drag the arrow to the left to connect it to the home page great the interaction detail panel has popped up i'll keep the trigger as on click on tap instead i'll focus on the animation when the user closes the book appointment screen i want the animation to be the opposite of when the user opens the screen so i'll select slide out instead of slide in and the down arrow instead of the up arrow let me test my prototype one more time using the present button i'll click the book appointment button and the second screen slides up then if i click the x to return to the home page the screen slides down you will probably play around with your prototype and figma like this quite a bit you'll test out lots of options for interactions and animations until you land on the one that looks and feels right to you this is part of the fun in the prototyping process and with that i've added gesture and motion to the high fidelity prototype i will continue adding gestures in motion for each screen of the prototype just like i did for this screen in order to finish the user flow once i've finished creating all of the interactions and my prototype is looking good i can share my work with others let me show you if i click on the share button in the top right of the screen i can select people to view or edit my file in figma all right that's it you now know the basics of how to create a high fidelity prototype in figma it's your turn to transform your mock-ups into a high-fidelity prototype for your own project hello again it's me shabby i'm back to share some more tips about making your designs accessible adding motion to designs brings up new considerations to make sure your products are accessible to all users in this video we'll explore a few things to keep in mind to ensure your designs are accessible when it comes to gestures and motion first you should always provide alternative options to using gestures gestures are a specific action that many groups of people might not be able to use for example some users might not have complete control of their hands or be able to see the screen which can make some gestures difficult the best accessibility principle to follow is to make sure that a gesture is not the only way to complete a task a gesture should just be one option for example in gmail you can swipe left to archive an email but that isn't the only way to get rid of an email you can also select the archive button second think critically about the speed and duration of motion in your designs very fast motion can be disturbing and alarming to people in addition motion that goes on for too long can be distracting and can create confusion the world wide web consortium also called w3c recommends that animations are under five seconds long in order to be accessible in figma you'll time motion by the millisecond this means your transitions and other motion should be between 150 and 500 milliseconds finally give users the ability to turn off emotion as you step into the world of ux design it's important to design for users by ensuring that the motion in your designs is accessible for example looping motion has become popular recently especially with gifs or autoplay but looping motion can be distracting so you should provide users with the option to make motion loop or not youtube follows this practice by allowing users to toggle auto play on or off you should work with your product and engineering counterparts to ensure this option is included with these three considerations in mind you'll be well on your way to ensuring that your designs are inclusive to all users congratulations on finishing this course from the google ux design certificate you can access the full experience including job search help and start to earn your certificate by clicking on the icon or the link in the description below watch the next video in the course by clicking here and subscribe to our channel for more from upcoming google career certificates