Lab 4: Hi-Fi Prototypes with Figma

In the previous lab we looked at using Figma to make high fidelity wireframes. However, these were only static sites with no interactivity. We will now look at using the Figma Prototyping workflow to add some interactivity to our website mockups, which we can demonstrate using the Present function.

Download the starting files from URCourses, and open up travel-hyrule-starting.fig, a mobile tourism site for a fictional land.

We will work together through:

• Setting a home page and previewing
• Connecting the hamburger menu to each of the pages
• Connecting the Weird Stuff page to their subpages
• Add an automatic carousel to the first page
• Add some light boxes to the locations page
• Have a unique interaction on each of the strange
  • A slow auto-fade effect on the shrines page
  • A draggable gallery on the divine beasts page, with a subtle cover flow effect
  • A carousel with buttons on the towers page

Note, as this was adapted from XD, I am still using their terminology Artboard in places, but in Figma this is called a Frame.

To add interactivity to our design, we need to be in prototyping mode. Switch to prototyping mode using the top menu:

A journey through our prototype is called a flow. We need to set a default flow starting point, so that when we start our presentation Figma knows which screen to start on. The home screen may already be set as the default flow starting point.

You can configure your present mode to simulate an android phone using the following settings

You can preview your page by clicking on the preview icon.

This will open up your view. You can scroll around and click on things, but not much will happen yet. Let’s try to fix that.

In prototyping, we can connect a visual element, called a hotspot to respond to a trigger (e.g. tapping, dragging) to cause a transition to another page. This process is called adding a connection, and requires a destination. In addition, we can also cause pages to temporarily overlay the current page.

First we will connect each of the pages to the menu via the hamburger menu icon.

Click this icon on the Home page. A new circle gizmo will appear on the right side of the icon. Hover over it and click on the + and drag it to the menu screen to the left.

You will see that it is wired correctly if a curved blue line connects the screens.

Transitions can also have animation. Let’s cause our menu to slide down. Access the interaction settings in the menu from here:

It is a good idea to preview here to be sure we are happy with our settings. We are going to want to copy this transition to each of our hamburger menus on each of our pages.

To copy a setting you need to click on the left gutter beside the interaction (This is a small window, maybe ten pixels):

You will know you have the interaction selected because it is highlighted in blue:

Copy it with ctrl+c.

Now click on the hamburger on the next page, and ctrl+v. You should see the same animation appear in the interactions pane.

Continue for all hamburger menus.

You also need to wire up the hamburger menu of links back to the appropriate pages. Let’s start with the home page.

Once you have configured the interactions as you like, these remain the default for further connections from this page.

And then set the other pages too:

The wires are getting pretty crazy. Don’t worry, it will get much, much worse.

Run your preview again, and confirm that all of the links are working correctly.

This is the complete workflow to link pages together. In the next sections we will work on animations to bring the pages to life.

While we’re linking pages, notice that the Weird Stuff page should link to three sub pages. Link with the following animation settings:

This will create a push effect. We don’t typically see this on the web, but they may be used in a mobile app.

Repeat for the other two pages.

Each of these pages has a back button, which we can wire back to the weird stuff page. However, we can simply set the interaction style to back, which will return to the previous page, and attempt to reverse the interaction as well! (Though I sometimes encountered bugs with it):

Alternatively, you could hard code the destination, and just be sure the mirror the direction of the “push”.

This may also be a fun time to try the different easings, e.g. Bouncy

Ensure all pages are linked, and test it out, does it go forward and backward as expected? You can try different animations for the three pages, forward and back, to see what you like.

This is all we need to get basic interactivity. However, in the next sections we are going to look at some advanced animations for giving our prototypes some extra polish.

In preparation for this, we want to reorganize our board, so that each of the main pages are aligned vertically, with space to their right which we will use for progressive animation frames. You can do this by box selecting from prototype and dragging full frames around:

On the top of the home page, in the image bar, I have placed three images offset slightly to the left. We want to make an animation which automatically transitions through these three images at regular intervals.

To create animations, we need to create a few keyframes. Our animations will be automatically animated between keyframes using interpolation, in a process known as inbetweening, or simply tweening. Each keyframe is a complete copy of an artboard, with only one or two small adjustments between keyframes. While still in Prototype, drag the home page down into some open space so it easier to work with. Next make two copies of the home page, using ctrl+d. If you make these copies in Prototype, existing links will be copied too, which will save us some time. Delete and reposition the images in the top bar so that one and only one unique image exists in the same place in each of the three artboards:

Connect the first artboard to the second with the following settings:

![Carousel transition](

Wire up the second to the third screen, and the third screen back to the first. Unfortunately you will update the settings on each page. Alternatively, you can copy and paste, as we saw earlier, and move the destination.

Preview the page. The image should swap automatically every few seconds. Note that if you scroll when a transition is occurring, weird things will happen. This seems to be due to a conflict in two animations playing at once. So far I don’t know a good workaround.

Next let’s add some Lightboxes to the location page. Lightboxes dim the screen and show some content highlighted in a popup. We will allow the user to click on the text at various points in the page, and have a pop-up appear with more information.

Move the location page near the four lightboxes, and wire the links together with the following settings:

We can also wire the close buttons back to close the overlay.

Test it out. You may click on the x to close the lightbox. The dimming effect is caused by a slightly transparent dark filled rectangle placed under the info box in the lightbox, although it looks like there is a native ability to do this in Figma, but I did not explore it.

In this section we’ll make a slow transition on the shrine page. Duplicate the shrine page, and center one of the two shrine images in each page. Finally, add transition effects back and forth with the following settings. (no delay, slow animate)

Preview the page. This effect looks pretty neat. However, notice that page scrolling is strange. This is because the scroll animation is playing over the old fade out, which does not scroll with it. For this reason, these types of animations should be used cautiously, for example, on splash screen pages and single-page views without scroll.

On the Divine Beasts page we will simulate a draggable scrolling gallery effect. In addition, the image which is currently in view will be enlarged somewhat, to make an effect similar to Coverflow.

For this effect we will need six total keyframes, but we will make four to start.

Duplicate the page, and move the image slider so that one of the four images is in the middle of the frame, in order from left to right. Be careful not to drag the group out of the frame when sliding them over!:

To make this effect even more interesting, we will zoom in on the selected beast in each frame. Double-click on the group, select the image in frame, and scale it up. If you hold shift and alt while you drag, it will stay centered and scale while maintaining the aspect ratio.

We need two more keyframes to complete this animation. Duplicated the third artboard as the fifth, and the second artboard as the sixth.

Now we’ll add our animations. The easiest way is to add one animation first, adjust the settings, and then copy and paste more.

It may be tricky to find the connector on the banner, look to the right side of it, which will be different in each of the images, due to the positioning.

Once you have the animation settings correct, connect each images to their keyframe to their right, and connect the final image back to the first artboard.

Test the page. Drag through your images all the way to the right, and then all the way back to the left. The limitation to this animation is that you can only drag in this specific order, but it still creates a neat animation with the coverflow zooming effect.

The trick to making this work was using the smart animate feature, which tweens between differences properties in adjacent frames, including scaling, position, and more. Play with this feature to see what you can come up with!

Also note how dragging changes the behaviour of the back button - it now undoes the last animation rather than going to the previous page. If you do not like this functionality, you can instead hard wire the back buttons back to the Weird Stuff page with the push right effect.

The final “Weird Stuff” page will have a five image carousel.

As always, drag it down somewhere you can work, and duplicate it into five keyframes. Have a different image from the set of five images in each keyframe. Also, change the fill on the little circles so that they match up with their keyframe.

Wiring this pattern is very logical. You simply need to wire up the triangles to the next or previous artboard (and don’t forget to wrap around from the last to the first, and vice versa.) Don’t forget to set the animation style after drawing the first wire! Also wire up the circles to the corresponding image. These settings work well:

Each page should have six exists (two arrows and four circles) to make the gallery work. When it’s all wired up, it will be quite a mess!

Test it out. The arrows are easy test, the bubbles slightly less so, as you would need to test all four exists from each page! I test first page to the remaining four and back, second page to the remaining three and back, third page to the remaining two and back, etc.

And that’s it. The full website is accessible, with several interesting effects. Test it out to see if anything is broken. Are all the hamburger icons leading to the menu page? You can verify by clicking on the menu and tracing all of the dashed lines.

---

Your project for this lab is to create a virtual tour, a prototype of a simple webpage which simulates touring a real-world (or fictional) location such as a national park, a tourist destination, or a science-fiction or fantasy world from a book, media or game. You virtual tour should include:

• A home page
• Some type of menu (properly connected so that every page is accessible)
• Three landmark pages, which showcases a specific feature of your locale, with a page for each
  • Each landmark should have a name, a set of images and text description
  • The images should be stored in some type of interactive image container
    • You can use ones from the pre-lab, or create your own
  • Use a different type of interaction for each page
    • At least one of the three must include a Smart Animate of a transform, such as size
    • Leave a note in the figma file to explicitly show where you are using the Smart Animate

Please include some images from the landmarks. You can find many images on the web in the creative commons, but for education purposes, it is okay to included copyrighted images as this project as it is for educational / non-commercial purposes. Just be aware of the implications if you intend to use this in your portfolio.

As we are now at the half way point of the lab, do not forget about your running assignment of maintaining a github portfolio! This would be a good time to ensure everything is up to date, well organized, and easy to navigate. Think about users browsing your page as a portfolio, are they likely to download and open up “.fig” files, or would they rather see screen capture images presented in easily to see markdown files?

---

Please submit your .fig files to UR Courses by the due date.

---

Originally based on the following XD tutorials, later migrated to Figma from XD:

W. Everhart, Adobe XD CC Fundamentals, Pluralsight, 2018

E. Key, Prototyping a WordPress Project in Adobe XD, Linda from LinkedIn, 2019