Skip to content

Components & Prototypes

Figma Design

Purpose

We learned last week that a prototype is an interactive design. It should emulate how the final website behaves and functions. You won't be making complete prototypes in Figma for Project 2, but you will have pages linked together so you can navigate from one page to another. This assignment will walk you through the steps of creating a Figma prototype and how to build your own UI component.

Instructions

  1. In Figma go to the Components & Prototype page in Unit 2 Files.
  2. Watch and follow along with the four videos for this assignment.

Submission

  1. Once complete, click the blue Share button in the upper right corner of the Figma file.
  2. Select "Copy link" in the lower left of the modal.
  3. Open the Week 8 folder in Blackboard
  4. Click on the Components & Prototypes submission link.
  5. Paste the link into this submission's comments section.
  6. Click Submit.

Grading Criteria

Points Possible: 3

  • Prototype (links): Each frame is connected and runs in present mode.

  • Prototype (overlay): An overlay was used.

  • Components: A new local component has been created and used.