Lesson 16 · Project: an interactive landing page prototype¶

What a prototype is and what it is for¶

A prototype is not a website. It has no code, saves no data, does not work offline. It is a simulation — convincing enough that someone can use it and tell you where they get stuck.

Why it is worth the effort:

Preparation¶

What you should already have¶

• The component library from lesson 08, with every state drawn (lesson 14).
• The visual identity from lesson 15.
• The flow written in words.

The flow for this project¶

1. The visitor opens the landing page → sees the welcome section
2. Scrolls → sees what the club does, the projects, the schedule
3. Presses "Join" (from the menu or the page) → reaches the form
4. Fills in the fields → presses "Submit"
5. Sees the confirmation screen
6. (alternatively) Submits with an empty field → sees the error state

Six steps, and step 6 is the one most people forget.

The screens needed¶

Six phone frames. For desktop, screens 2 and 3 merge (the menu is always visible, the form is a page section), so four frames.

Building the screens¶

The landing page sections¶

The total exceeds the screen height (844 px) — as it should; the page scrolls.

Elements fixed while scrolling¶

The navigation must stay at the top while you scroll.

1. Select the navigation frame.
2. In the Prototype tab, tick Fix position when scrolling.

The same applies to a floating button, if you have one.

Linking the screens¶

The basic connections¶

1. Switch to the Prototype tab (top right).
2. Select the element being pressed (the button, not the text inside it).
3. Drag the blue circle on its edge onto the destination frame.
4. In the panel that appears, set the trigger and the animation.

The triggers¶

The animations¶

Smart Animate¶

It is the only animation that needs explaining.

How it works: Figma compares the elements in the two frames and automatically interpolates anything that has exactly the same layer name. Position, size, colour, opacity, rotation.

The mandatory condition¶

The layers must have identical names in both frames. If in the first frame the button is called cta-button and in the second Rectangle 43, Smart Animate will not link them — it will fade instead.

What you can do with it¶

Interactions inside components¶

A button with variants (lesson 08) can carry its interactions inside the component, rather than on each instance.

1. Enter the variant set.
2. Select the State: default variant.
3. In the Prototype tab, drag a connection to the State: hover variant.
4. Trigger: While hovering. Animation: Instant or Dissolve 100 ms.
5. Add the reverse connection (hover back to default is created automatically).

The result: every instance of the button across the whole prototype reacts to hover. You never have to wire anything by hand.

Testing with users¶

This is the part everyone skips, and the one that gives the most back.

Preparing¶

1. Share → can view → Copy link, then append &scaling=scale-down to the link so it fits the person's screen.
2. Prepare one single task, phrased as a goal, not as an instruction.

During the test¶

What you note¶

From observations to fixes¶

Exercises¶

Exercise 1 — A mobile menu with Smart Animate¶

Build two frames — the landing with the menu closed and with the menu open — and link them with Smart Animate so the panel slides down from the top.

Exercise 2 — A form with simulated validation¶

Build the complete form flow: empty → field focused → filled → error → confirmation.

Exercise 3 — A testing session¶

Test the prototype with three people who have not seen the project. Record the observations in the table above and produce a prioritised fix list.

Mini-project: a complete landing page, tested and fixed¶

Build the full prototype for your club, test it with three people and deliver the corrected version together with the testing report.

You have finished the course¶

You have walked the whole road: from what a design decision is (lesson 00), through the visual language and Figma's tools, to a complete visual identity and a prototype tested with real users.

What you now have:

• A vocabulary: hierarchy, contrast, grid, component, state, breakpoint.
• A process: brief → content → structure → appearance → checks → testing.
• A portfolio: poster, logo, visual identity, prototype.
• Checking habits: blur, contrast, black and white, 3 seconds, user testing.

Where to go next:

Summary¶

• A prototype is a simulation, not a website — but it is enough to test the flow.
• Scrolling: a frame at screen size + Clip content + Vertical scrolling on the content.
• Fix position when scrolling for navigation and floating buttons.
• Triggers: on click, while hovering, while pressing, after delay.
• The right transition duration: 150–300 ms. Above 700 ms it becomes annoying.
• Smart Animate requires identical layer names in both frames — duplicate, do not rebuild.
• Put the interactions inside the components, not on each instance.
• Three people uncover most usability problems.
• Phrase tasks as goals, not instructions; do not help during the test.
• Retest with different people, not the same ones.

Back to: the course map