Activity 07: Getting Started with Figma

Due Date: Before the end of lab 12B (4/29/2026). Submit a shared figma link + reflection to #activity07 on Discord.

Overview

This short lab introduces Figma as a tool / playground for interaction design; also, as a designed object, using interaction design concepts to understand what it is and how it works.

You’ll use two images you already have on hand from in earlier activities (Activity 04 + Activity 06 / Project 2) to build a simple, clickable prototype. This will be your first digital exploration of affordance, feedback, and mapping inside of an interface.

This is a quick experiment.

Treat it like a sketch in a new medium: light, curious, imperfect.

Objectives

By completing this experiment, you will:

  1. Discover how basic interaction principles play out in a digital interface
  2. Practice translating a static composition into an interactive prototype
  3. Explore how tool design (Figma) shapes user behavior
  4. Prepare for Unit 3 / Project 3: get comfortable inside Figma’s workspace, and begin using its interactive design tools

Instructions

Step 0: Create a Figma account.

Visit figma.com and sign up with your school email.

Open a new Design file.

Step 1: Build your frames.

Frame 1 will be your recomposed image from Activity 06.

Frame 2 will be the original image that inspired your soundscape.

Use any template, but resize them to 1080 x 1080.

Step 2: Import your images

These can be dragged and dropped directly into Figma (and become assets within your Figma library that can be used in any subsequent project).

Step 3: Link them interactively

Use the prototype tab.

When the first image is clicked, have it navigate to the second image.

When the second image is clicked, have it navigate back to the first image.

Choose any simple animation (dissolve, instant, et c.)

Step 5: Test it

Click the play button to open the interactive preview.

Confirm that clicking swaps between the two images.

Reflection Prompts (choose two)

  • How did Figma’s design (layout, tools, constraints) shape the way you worked?
  • What kinds of affordances, signifiers, or feedback did you notice while prototyping?
  • Did the interactive swap between your two images change the way you saw them or understood them?
  • How might interactivity reveal / demand new relationships between sound, image, composition?

Deliverables

Post in the #activity07 thread in the activities forum:

  1. A view-only Figma share-link to your prototype.
  2. A view-only Figma share-link to your project.
  3. 150-250 word reflection.

Make sure to make your links viewable by others!