Today

• Practice the three main skills you will need for HW7:
  • frames
  • Auto Layout
  • reusable components
• Build a small interface pattern in Figma before starting your full homework.
• Connect your HW6 wireframes to the more structured Figma work you will do in HW7.

Setup

• Work with your HW6 team.
• Open Figma.
• Download the token pack from HW7:

hw07.zip

• Import the token JSON files if you are ready to do so.
• Have your HW6 wireframes nearby so you can refer to one real screen from your team’s work.

Goal

By the end of class, your team should have:

• one desktop frame
• one mobile frame
• one small reusable component set
• one screen section laid out with Auto Layout

This does not need to be a complete homework submission. Think of this as a guided warm-up for HW7.

Part 1 - Create Two Frames (10 minutes)

Create a new Figma page called Practice.

Add two top-level frames:

• Desktop Practice at 1440 x 1024
• Mobile Practice at 390 x 844

Inside each frame:

• add a page title
• add a content area
• add one section that could plausibly appear in your stakeholder’s interface

Examples:

• a list of activities
• a daily summary
• a profile card
• a task list
• a message or notification area

The goal here is just to get comfortable placing content inside frames and thinking about desktop vs. mobile space.

Part 2 - Build One Reusable Pattern with Auto Layout (20 minutes)

Choose one small repeated pattern from your HW6 work.

Good options:

• a button
• an activity card
• a task row
• a profile summary card
• an input field

Build it first as a normal design using Auto Layout:

• use vertical or horizontal stacking
• set consistent spacing
• align items cleanly
• make sure the content can grow or shrink without falling apart

As you work, ask:

• If I duplicated this 5 times, would it still be easy to manage?
• If the text got longer, would the layout still work?
• Does this feel like a flexible building block?

Part 3 - Turn It into a Component (15 minutes)

Convert your pattern into a component.

Then create at least two variations or states.

Examples:

• Button: primary / secondary
• Card: with button / without button
• Input: default / error
• Task row: complete / incomplete

Place instances of the component in both the desktop and mobile frames.

As a team, notice what gets easier once the pattern is reusable.

Part 4 - Build One Small Screen Section (20 minutes)

Using your component, create one section of a screen that could belong to your HW6 stakeholder.

This could be:

• the top of a dashboard/home screen
• a list section
• an activity detail panel
• a profile/settings section

Requirements:

• use Auto Layout for the section itself
• include at least one component instance
• include a clear heading or label
• include a clear primary action or next step
• make both a desktop and mobile version

Do not worry about making the whole app. Focus on one section that is organized, reusable, and responsive.

Part 5 - Quick Share-Out (10 minutes)

Be ready to show:

• your desktop frame
• your mobile frame
• your component
• one thing Auto Layout helped with
• one thing that still feels confusing

When you look at another team’s file, give feedback on:

• clarity: Is it easy to tell what the section is for?
• reuse: Does the component look reusable?
• responsiveness: Does the mobile version still make sense?

Exit Check

Before you leave, make sure your team can answer:

1. What repeated UI pattern did we turn into a component?
2. Where did we use Auto Layout?
3. What part of our HW6 work could this support in HW7?
4. What do we still need to learn before finishing the homework?

If You Finish Early

• Add a third variant to your component.
• Apply tokens to colors, spacing, or text styles.
• Duplicate your frame and try a second theme.
• Start a second screen section from your HW6 wireframes.