Week 7 – Quick Prototyping, P2 Check In and Coding From Life

Prototyping in Figma

Prototypes can be helpful to make sure your navigation is clear and to share a website design before it gets programmed. We’re going to create a very basic prototype in Figma.


Step 1
Have your design ready, every page of your site should be finished and labeled. Make sure your pages are labelled appropriately.

Step 2
Select the actionable item (example: a link, a button) and select “Prototype” on the right. Then select “On click” under interaction and then select your targeted artboard. Do not use any animations, simply maintain “instant” under animation. 

Step 3
If your navigation is the same throughout all your pages, create an instant out of it by grouping the items together, right clicking it and selecting “Create Component.” This is a symbol that can be reused throughout. If you need to change it, you can edit it once and it will get updated throughout your whole design.



Task 1 – Complete by 11am

Create a clickable prototype of your current design, making sure that your navigation is addressed. It’s OK if you don’t have all the pages finished yet.

Task 2

Working in small groups, share your project prototype and have a discussion about your work. To help kick you off,  go through these questions for each person.

Group 1: Pauline, Kyndall, Kyle
Group 2: Alex, Conor, Byron
Group 3:  Kevin, Fred, Ed, Matt

Kick Off Questions
  1. What is the concept of the website?