Stop 11 · BA Tools & PlatformsTopics · 5/8

Wireframing Tools (Figma Basics)

In short

Paper sketches are great for thinking. But when you need to share a clickable idea with a remote team, or work alongside designers, a little Figma goes a long way. You don't need to be a designer.

Enough Figma fluency to sketch a requirement visually and collaborate with designers — directly extending Phase 8's basic wireframing skill into a real, widely-used tool.

The purple blob arranges tiny furniture inside an open dollhouse with small rooms.

Think of it like this

Playing with a dollhouse

Before shifting the real sofa, imagine moving tiny dollhouse furniture around in seconds: sofa by the window, table in the corner, try again. Figma lets you move screens and buttons just as easily, before anyone writes code.

Watch it happen

A clickable wireframe in Figma

Frame

Shapes

Components

Prototype

Comments

1/5Add a frame sized for a phone screen. It's your blank screen.

The big ideas

What you need to know

Frames are screens

Each frame is one screen or state. Name them clearly, like 'Refund - error state'.

Components save time

Reusable buttons, inputs and headers keep screens consistent and quick to update.

Prototype links

Connect frames so a click moves to the next screen. Great for walking stakeholders through a flow.

Work with designers

Your wireframe explains the need. Designers turn it into the real design, often in the same file.

Save yourself the pain

Common mistakes

Oops

Spending hours picking colours and icons for a BA wireframe.

Do this instead

Stay grey and simple. Your job is flow and content, not visual design.

Oops

Editing the designer's final screens directly.

Do this instead

Work in your own page or file, and comment on theirs. Respect their ownership.

Your mission

Three clickable screens

~40 min

Quick check

You've copied the same 'Submit' button onto ten screens and now need to change its label. What would have made this a one-step change?

Go deeper

1Create a free Figma account and build a simple wireframe for a requirement.
2Practice leaving a specific, actionable comment on a design (not just 'looks good').
3Learn to use Figma's inspect mode to understand a design's spacing without asking a designer.