Log in from a computer to take this course

You'll need to log in from a computer to start Introduction to UI and UX Design. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
Learn

The last stop on our tour is the grand finale: Prototype mode. Your wireframes look polished, but they are static — it’s time to bring them to life!

So far in this lesson, we have been exploring and working in Design mode, which provides the tools to create a design. Now, we’ll switch over to Prototype mode, to access the tools to turn the design into a prototype. We can switch between Design and Prototype at the top of the properties panel.

Screenshot of the top of the properties panel. Prototype is bolded, indicating that the editor is in Prototype mode.

To transform a design into a prototype, we need to add connections between frames. A connection has three elements: a hotspot, a connection, and a destination.

To create a hotspot (starting point), select a frame or a specific layer. When deciding where to place the hotspot, consider how someone might interact with the product. In the example design, someone would tap the “Sign Up” button to reach the next page, so this is a good place to add a hotspot.

With the hotspot selected, we can select the connection node (the plus sign on the right of the hotspot) and drag a connection to the destination frame.

Screenshot from the example design. The "Sign Up" button is selected, and a connection node, which looks like a plus sign, appears on the right of the button.

Once a connection has been created, we can select the connection (the blue arrow) to open a menu with the Interaction Details.

A screenshot of the example design. A connection arrow has been created from the "Sign Up" button to the next frame.

From here, adjustments can be made to tailor the interaction’s trigger, animation style, and speed.

The interaction details menu, which displays the trigger, starting point, destination, and animation style and timing.

After dragging out a connection or two, we should review the prototype to check if it’s working as intended. Select Present (the Play button), which is on the right side of the toolbar. Another tab will open where we can view and interact with the prototype.

After seeing our prototype in action, we may want to add, remove, or customize some connections. As we update the prototype in the editor, we can keep the Presentation tab open. The changes we make are automatically reflected in the Presentation tab, so we can easily move between adjusting the connections and testing them.

Instructions

Task: Transform your wireframes into a prototype. Then, select the Present button to preview the design and interact with the prototype. You can use suggestions from the video, or use an approach that works well for your design.

  1. Switch from Design mode to Prototype mode by selecting “Prototype” at the top of the properties panel.

  2. Review your first wireframe and consider which layer you would interact with in order to navigate to the next wireframe. For example, you might tap a button or a link. This layer will become a hotspot.

  3. Select the layer that you want to turn into a hotspot. With the layer selected, drag out a connection from the little plus sign to the destination wireframe.

  4. Once a connection is created, the Interaction Details menu will open. Leave the presets for now, and make changes after viewing the prototype.

  5. Make any additional connections between the wireframes, so that you can navigate between the pages of your app.

  6. Test out your prototype by selecting the Present button in the toolbar. A new tab will open where you can view and interact with the prototype. Try to navigate through the app, and make note of any connections you want to adjust.

  7. Return to the Figma editor to customize the connections. Select a connection arrow to open the Interaction Details menu. You can adjust the trigger (how the connection gets activated), destination, animation style, and timing. Try various animation styles and timings, and check the results in the Presentation tab. Keep experimenting until you are happy with your prototype.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?