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!

Sound and Image Study

Due Date: Friday, October 25, 2025 (submitted to activity06 on Discord)

Overview

This activity will prepare you for Project 02, the capstone of Unit 2’s investigation into visual composition and audio design.

You will extend the work you began in Activity 04 (Composition Scavenger Hunt), and Activity 05 (Sonic Scavenger Hunt) by creating an experimental pairing of image and sound.

Rather than aiming for a polished final piece, treat this as a laboratory exercise: a chance to experiment with Photoshop, Illustrator, and Audition, and to test how design principles translate across media.

Objectives

• Explore a principles of composition in both visual and audio design.
• Practice technical workflow between Photoshop, Illustrator and Audition.
• Explore how sound can shape the perception of an image, and vice versa.
• Begin the iterative refinement process that will lead into Project 02.

Part 1: Select and Plan

1. Choose one image from your Activity 04 Composition Scavenger Hunt.
2. Listen to the sounds you collected in Activity 05.
3. Ask yourself:
   • what mood or energy or vibe connects the image and sounds?
   • what might this image sound like?
   • what story or emotion would emerge if they were combined?
4. WRITE: 2-3 sentences describing the relationship you want to explore.

Part 2: Build a Soundscape (Audition)

1. Open Audition.
2. Import 3-6 of your scavenged sounds.
3. Arrange and layer them into a 10-20 second soundscape that reflects your chosen image.
4. Experiment with
   • amplitude (loud vs soft)
   • frequency (high vs low tones)
   • rhythm & tempo (patterns of time)
   • reverb & space (distance, room size)
   • dynamics & contrast (changes over time)
5. EXPORT: as .wav or .mp3; SAVE the Audition project file.

Part 3 – Recompose The Composition (Photoshop -> Illustrator)

1. In Photoshop, open your chosen image.
2. Use the skills you learned in Lab 4.5 to select + mask + export 3-5 key elements of the image (objects, figures, shapes).
   • Export each as a transparent .png.
3. In Illustrator, create a new artboard (width: 1080px, height: 1080px).
4. Place your exported elements and re-compose the scene.
   • Add geometric primitives, typography, or new colors.
   • Emphasize one or two design principles (balance, contrast, hierarchy, rhythm, depth).
   • Aim for visual rhythm or tension that parallels your soundscape.
5. EXPORT as a .png; SAVE your Photoshop and Illustrator project files.

Part 4 – Reflect

Write a short paragraph (150-350 words), explaining what you actually did: the choices, steps, and reasoning behind them. Use plain language; imagine you’re explaining your workflow to a classmate who missed the lab.

You might address:

• How you built your soundscape:
  • What sounds did you combine?
  • How did you decide their order, volume, or rhythm?
  • What effects did you use, if any? (Fade, reverb, panning, et c.)
• What you changed:
  • What parts of the original image did you export, remove, or rearrange?
  • What edits did you make in Photoshop / Illustrator?
• How sound and image relate to each other:
  • Did one influence the other?
  • How does the timing or texture of the sound align with the layout or color choics?
• What you learned:
  • Was anything easier or harder than you expected?
  • What would you change if you did another version?

Avoid generic phrases like “I liked how it looked” or “it felt right”; be specific. What did you like about how it looked? When you say it felt right: how so? What does it mean to feel right?

Consider using verbs that describe decisions: cropped, layered, balanced, matched; and also, consider, you could have done it a different way; why did you do it that way?

Deliverable

Link to a research folder containing:

• raw image folder:
  • original image from Activity 04
• raw audio folder:
  • raw audio from Activity 05 (+ any other audio you decide to use in this activity)
• project file folder:
  • Photoshop project file (.psd)
  • Illustrator project file (.ai)
  • Audition project file (.asx)
• work files:
  • exported pngs from step 3
  • any and all drafts produced along the way of your soundscape or visual composition
• final export:
  • soundscape (in mp3 or wav format)
  • final export from step 3
• notes:
  • your reflection from step 4

Due Date: Lab 5B (March 4); submit to Discord in activity04 in the activities forum.

---

Objective:

This activity is a follow-up to our lecture on fundamental principles of composition. We’ll exploring these concepts by engaging with real-world design examples; this offers us an opportunity to develop an eye for composition by identifying and analyzing effective design in context, in our everyday surroundings.

Learning Outcomes:

• Develop observational skills to identify effective composition.
• Apply composition principles to real-world examples.
• Engage in peer discussion and critique to refine their understanding of design principles.

---

Instructions:

1. Find 3–4 examples of real-world composition.
   • Look for examples of composition in everyday life, such as posters, flyers, signs, packaging, books, magazines.  (Take your own original photos!)
2. Upload your examples to an online folder.
   • N.B. It may be useful for you to organize this in a class folder for MTEC1101 that also holds your Activity 03 materials, your Project 01 work, et cetera.
3. Select one of your images as an interesting example of composition you’d like to analyze.
   • This should be the most interesting design among your selections (not necessarily the best! bad is sometimes better!). 
   • Write a ~250-word analysis addressing the use (or neglect) of composition principles.
   • Consider elements such as:
     • Balance: Is the composition symmetrical or asymmetrical?
     • Contrast: How are colors, shapes, or textures used to create visual interest?
     • Hierarchy: What grabs your attention first? How are visual elements structured?
     • Color: How does it guide your eye and set the tone?
     • Typography: Do the words “look” like they mean what they say?
4. Post a link to your folder along with the photo and your analysis to the Discord activity forum.
5. EXTRA PARTICIPATION CREDIT: engage with a peer’s example.
   • At any point during Module 02, reply to one or more classmate’s posts by selecting one of the images they uploaded, but not the one that they analyzed; offer an observation or ask a question about their example.

---

Deliverables:

1. Discord Submission
   • A link to folder containing 3–4 images of real-world composition.
   • One of those images posted in the comment + a written analysis of that image.
2. Extra credit: respond to a peer’s post; examine their folder, pick a photo they chose but didn’t analyze; offer an observation or ask a question.

Due Date: Lab 5B (10/14/2025). Submit to the activity05 discussion on Discord.

Part 1: What do you see?

Choose one image from Activity 04 (it can be your own, or a peer’s).

Part 2: What do you hear?

What do you hear?

Comb through this shared sound folder (or go listen for yourself to some different sounds on freesound.org).

Find 4-7 audio files that could fit the mood, environment, or implied story of that image.

For each sound you selected, include a comment (2-3 sentences) addressing:

• What is the sound? What does it represent?
• How would you describe it? Utilize at least two of the concepts from our lecture (frequency, amplitude, envelope/ADSR, rhythm, space/reverb).

Part 3: Stand and Deliver, Collect and Organize

Organize the image and the sounds into an online folder labeled “Lastname-Activity05”.

Structure your folder, and include all materials in it.

It should include:

• two subfolders; 1st contains the image, the 2nd contains the sounds
  • in the 2nd subfolder, include a record of your files + your observations on a spreadsheet, formatted like this example spreadsheet (feel free to make a copy for yourself!): https://docs.google.com/spreadsheets/d/1sJX02l3Tkt4s3O39NjbQMAgHlApbiimhmkNoO473dgM/edit?usp=sharing.
  • The spreadsheet should include the filename, the file’s location, the file’s format (the file extension, such as .wav or .mp3 or .ogg et c), rights (public domain, creative commons, unknown, et c), and comments (your short reflection).
  • Make sure to follow the naming convention (Lastname-activity04-audio_sources-YYYY-MMDD) of the spreadsheet.
• a simple document in the main folder that includes the image, a description of the image; a catalog of the audio; a description of why you chose these pieces and how they would tell the story of this image

Make sure to change the file permissions of your folder (so that anyone with the link can view the files and the spreadsheet).

An example Google Drive folder can be found here: https://drive.google.com/drive/folders/1Ct1gFZeovJwVtDKdK3wyII8V_B3INIpb?usp=sharing

Deliverables

• Properly formatted folder, containing:
  • ‘image’ subfolder containing the image that inspired you
  • ‘audio’ subfolder containing 5-7 clips
  • a spreadsheet cataloging the sounds you’ve selected
  • a document describing the image and the sounds that might relate to it