Design practice

Responsive Redesign

Take a print layout and redesign it for mobile, tablet, and desktop with proper breakpoints and token-based color

Start the exercise

01 / Prepare

What you’ll
work on.

Take a well-designed print layout (magazine spread, poster, or brochure) and redesign it as a responsive web page that works across mobile (375px), tablet (768px), and desktop (1440px). Practice the shift from fixed-canvas to fluid layout thinking.

Before you begin

  • Figma proficiency (auto layout, constraints, frames)
  • Understanding of breakpoints and mobile-first design
  • Familiarity with responsive layouts and typography on screens

02 / Practice

The work,
step by step.

Work through these 5 parts at your own pace. Keep your notes and work together so you can review them when you finish.

  1. Select and Analyze

    30 min

    1. Choose a print layout — a magazine article spread, a poster, or a brochure page with rich typographic hierarchy.

    2. Analyze the design decisions — What makes it work? Identify: type hierarchy, grid structure, whitespace rhythm, color usage, image treatment.

    3. Identify what will change — Which elements are fixed-size? What assumptions break on a small screen?

  2. Content Inventory

    30 min

    1. List every content element: headlines, body text, images, captions, pull quotes, sidebars.

    2. Prioritize for mobile: what is essential vs. what can be deferred or collapsed?

    3. Define a reading order for linear (mobile) layout.

  3. Design Mobile-First

    60 min

    1. Start at 375px — Single column, stacked layout.

    2. Apply a type scale — Choose a ratio (e.g., 1.25) and set sizes using rem.

    3. Use token-based color — Define as Figma variables, not raw hex values.

    4. Set spacing with your scale — Consistent vertical rhythm using your spacing tokens.

  4. Scale Up to Tablet and Desktop

    90 min

    1. Tablet (768px) — Introduce a second column where it makes sense. Adjust type sizes.

    2. Desktop (1440px) — Full multi-column layout. Wider margins, larger type, side-by-side elements.

    3. Document the breakpoint decisions — What changes at each size and why?

  5. Compare

    30 min

    1. Place the original print layout next to your responsive versions.

    2. Write a brief (300 words) comparing: what translated directly, what had to change, and what you learned about the differences between print and screen layout.

03 / Review

Look at what
you’ve made.

Gather your deliverables, then use the criteria to find what worked and what you would change. They also give a peer something specific to respond to.

What to bring together

  • Original print layout (photo or scan)
  • Mobile design (375px)
  • Tablet design (768px)
  • Desktop design (1440px)
  • Type scale and spacing tokens used
  • 300-word comparison brief

How to assess your work

Mobile-first
Mobile layout works as a complete experience, not a squished desktop
Responsive logic
Breakpoint changes are purposeful, not arbitrary
Typography
Consistent scale, proper line-height and measure for readability
Token usage
Colors and spacing use defined tokens, not ad hoc values
Comparison insight
Brief shows genuine understanding of print vs. screen differences

Choose your
next exercise.

Browse all exercises