How to Prototype in Figma: A Beginner’s Walkthrough

TL;DR: What You Will Learn

• A prototype is a clickable, interactive version of your static screens that simulates how the real product behaves.
• The core steps are: link your frames, add triggers and transitions, preview in Present mode, then share a live link for feedback.
• This guide suits aspiring UX/UI designers, product managers, and founders who want stakeholders to click through an idea instead of imagining it.
• I assume you have already wireframed your screens and know your way around the basics. If not, start with our step-by-step Figma tutorial for beginners first.

Below is exactly what we will cover, so you can jump straight to what you need.

Why Prototyping Matters Before You Write A Single Line Of Code

When people ask me how to use Figma prototyping, I usually flip the question first: why bother at all when you could just start building? The short answer is that a prototype lets real users click through your product before a single developer touches it, and that saves you money, time, and a lot of awkward conversations later.

A Figma prototype is a clickable version of your design where screens are linked together, so tapping a button actually moves you to the next screen. It behaves like the real thing without any working code behind it, as Figma’s own prototyping fundamentals guide confirms.

Prototypes vs Static Wireframes

A static wireframe is a picture. You can look at it, but you cannot use it, so people nod along and say it looks fine even when the flow makes no sense to them.

A prototype forces the moment of truth: the user has to actually complete a task, like placing an order or finding a setting. That is where confusion shows up, because a real person gets stuck instead of politely approving a screenshot.

Think of a wireframe as the blueprint and a prototype as the show flat you can walk through. One tells you the layout; the other tells you whether it actually works for a human.

How Early Testing Reduces Costly Rework

Here’s a hypothetical scenario that captures the pattern well. Say a Singapore SME is building a food delivery app aimed at hawker vendors and their regulars.

Instead of paying a development team to build a full checkout first, the team could build a clickable Figma prototype and sit down with a few hawker vendors to test it. It’s easy to imagine a vendor tapping the wrong button because the “confirm order” and “add more items” steps look almost identical.

That kind of confusing checkout gets caught for the price of an afternoon, not a costly rebuild after launch. Fixing a link in Figma takes a minute; fixing shipped code, retesting, and redeploying can burn weeks and real budget.

This lines up with decades of usability research, not just one team’s luck. Jakob Nielsen, co-founder of the Nielsen Norman Group and one of the most cited figures in usability, points to forty years of software engineering evidence showing that a fix made before any code exists is roughly 100 times cheaper than the same fix made after a product ships (nngroup.com). A vendor mixing up two lookalike buttons in a prototype is a five-minute edit; the same mix-up discovered in a live app becomes a support backlog, a rushed patch, and a far bigger invoice.

Catching problems this early is what de-risks a project. You validate the idea with actual users before committing money you cannot easily get back.

Where Prototyping Fits in the Design Process

Prototyping is the bridge between designing something and knowing it works. It sits after your research and wireframes, but before any development.

A typical flow looks like this:

1. Research who your users are and what they need.
2. Sketch low-fidelity wireframes to map the screens.
3. Build a clickable prototype in Figma.
4. Test it with real people and fix what breaks.
5. Hand off to developers to build with confidence.

If you want a wider view of how these tools slot into a team, I have written more on what Figma is used for in design teams and real projects.

The takeaway is simple: prototype first, so you validate cheaply before you build expensively.

Getting Into Prototype Mode And Preparing Your Frames

Before you connect a single screen, you need to know where how to use figma prototyping actually lives inside the tool. The good news is that it is one click away, and once you find it, the whole process starts to make sense.

A quick note: Figma updates its interface fairly often, so small details like icon shapes or menu labels may shift after this was written. The core workflow link frames, set triggers, preview, share has stayed stable for years, even as the surface details evolve.

The Design Tab Versus The Prototype Tab

Look at the right-hand panel in Figma. At the top, you will see two tabs: Design and Prototype.

The Design tab is where you have been living so far, adjusting colours, fonts, spacing, and layout. The Prototype tab is where you tell Figma how those screens link together and how they behave when someone taps or clicks a workflow Figma documents in its prototyping fundamentals guide.

When you switch to the Prototype tab, notice what changes on screen. The property fields for colour and typography disappear, and instead you get options for interactions, device frames, and a starting screen.

You will also see a small plus (+) icon appear on the edge of your selected element when you hover over it. That icon is how you drag connections from one frame to another, which we will do shortly.

Naming And Organising Frames For A Logical Flow

Here is where the wireframing prep you did earlier pays off. If you have not gone through those fundamentals yet, it is worth revisiting the Figma design basics every beginner should master so your frames are clean before you start linking.

Imagine you are building a prototype for a Singapore mobile banking app. Rather than leaving your frames named “Frame 1”, “Frame 2”, and “Frame 3”, rename them to describe what they are:

• Login: The sign-in screen where the user enters their credentials
• Dashboard: The home view showing account balances after login
• Transfer: The screen for sending money to another account

Double-click a frame’s name in the left-hand Layers panel to rename it. Clear names mean that when your flow grows to fifteen screens, you can still find “Transfer” instantly instead of hunting through a list of identical labels.

Well-named frames also make your prototype easier for teammates to review, which matters if a product owner or compliance colleague needs to check the flow.

Setting The Right Device Frame And Starting Screen

With the Prototype tab open and nothing selected, look for the device dropdown in the prototype settings. Choose a phone size like iPhone or a generic Android device so your banking app previews at realistic mobile dimensions rather than filling a huge desktop window.

Separately, set your starting point: right-click your first frame and choose “Add starting point” (Figma will also do this automatically the first time you draw a connection). This tells Figma which frame appears first when you hit Play. For our example, you would set the starting point on Login, since that is what a real user sees when they open the app.

That is it. You are now ready to draw your first connection.

Linking Frames To Build A Clickable Flow

Here is where your static screens start to feel like a real app. Once you switch to how to use figma prototyping mode, every frame becomes a step, and your job is to connect them in the order a user would actually move through them.

I always tell my students to picture the journey first. Imagine a shopper on a local e-commerce store like a homegrown skincare brand: they land on a product page, tap Add to Cart, review the cart, then pay with PayNow. Each of those taps is one connection you will draw.

Creating Your First Connection With The Drag Node

Switch to the Prototype tab in the right-hand panel, then hover over your Add to Cart button. A small plus (+) icon appears on the edge of that element. That is your connection point. Click and drag from that icon across the canvas to your cart frame, then release. Figma draws a blue arrow between the two, and a small interaction card pops up letting you set the trigger (On Click) and the animation.

Repeat the same drag from the cart frame’s Checkout button to your PayNow payment screen. In under a minute, you have built a three-step happy path that a stakeholder can actually click through.

Choosing What A User Clicks: Hotspots

The element you drag from is your hotspot, meaning the thing a user taps or clicks to move forward. Buttons and icons are the obvious choices, but any layer can be a hotspot: a product image, a text link, or a menu icon. Figma’s interaction details documentation covers how hotspots and connections work in more depth.

Be deliberate here. If you connect the whole frame instead of the button, the user can tap anywhere to advance, which hides usability problems you actually want to catch in testing.

For a clean flow, link only the elements a real shopper would use:

• A primary button such as Add to Cart or Pay Now
• A navigation icon like the cart or back arrow
• A tappable product card or thumbnail

If you are starting from a pre-built kit, the best Figma templates to kickstart your designs often come with buttons already set up as components, which makes them easy to grab as hotspots.

Editing And Deleting Connections Cleanly

Wired something to the wrong screen? Click the blue arrow to select it, then drag its endpoint to a different frame, or press Delete to remove it entirely.

I recommend mapping the whole happy path before you fuss over details. Get your shopper from product page to PayNow confirmation first, then go back and refine each transition, animation, and micro-interaction.

Working this way keeps you focused on the journey rather than the polish. A messy web of arrows usually means the flow itself needs rethinking, so treat your connections as a quick sketch of the user’s route before you commit to the fine-tuning.

Understanding Interactions And Triggers

When I first started prototyping, I kept wiring up connections and wondering why nothing happened when I pressed Play. The missing piece was almost always the trigger.

Here is the core idea: when you are learning how to use Figma prototyping, every connection needs a trigger to fire and an action to carry out. The trigger is the thing the user does. The action is what your prototype does in response. For the full list of trigger types and how each behaves, see Figma’s official prototype triggers reference.

Think of a clinic appointment app. The trigger might be a tap on the “Book Now” button. The action is navigating to the appointment calendar screen. Beginners often merge the two in their heads, but keeping them separate will save you hours of debugging.

Tap And Click Triggers For Buttons

On Tap (called On Click when you set the prototype to a desktop device) is the trigger you will use most. It fires the moment a user taps or clicks a layer.

For that clinic app, I would attach an On Tap trigger to the “Book Now” button so tapping it opens the calendar. This is the bread and butter of mobile flows, and it maps directly to how patients actually use a phone.

While pressing is a close cousin. It holds the action only for as long as the finger or mouse stays down, which suits a “hold to confirm” delete button or a press-and-reveal card.

Hover And Drag Triggers For Richer Web Interactions

Some triggers only make sense on the web because they rely on a mouse. While Hovering, Mouse Enter, and Mouse Leave all respond to the cursor, they are useless on a touchscreen.

I use these for web experiences like a food delivery site where hovering over a menu item reveals a description, or a navigation bar that expands on Mouse Enter and collapses on Mouse Leave.

On Drag is the one that shines on mobile. It powers swipeable carousels, pull-to-dismiss sheets, and slide-to-unlock patterns.

Here are the triggers worth memorising early:

• On Tap or On Click: Primary buttons and navigation
• While Pressing: Hold to confirm actions
• While Hovering: Web tooltips and previews
• Mouse Enter or Mouse Leave: Expanding web menus
• On Drag: Swipe cards and pull gestures
• After Delay: Automatic transitions with no user input

Timed Triggers With After Delay

After Delay is different because the user does nothing. The action fires automatically once a set time passes.

This is perfect for a splash screen that shows your clinic logo, then auto-advances to the login screen after a short delay. It is also how I fake loading spinners and onboarding sequences that step through themselves.

Just remember: After Delay lives on a frame, not a button, because there is no user action to attach it to. Once that distinction clicks, choosing the right trigger becomes second nature.

Bringing Screens To Life With Transitions And Animations

Once your screens are connected, the fun begins. This is where you decide not just where a tap sends someone, but how it feels to get there.

Navigation Actions Versus Overlays

When you draw a connection in prototype mode, Figma asks what the interaction should do. The most common action is Navigate to, which swaps the current frame for another one.

But not everything deserves a full-screen change. Say you are designing a food delivery app and a user taps a filter icon. Instead of jumping to a new page, you use Open overlay to float a filter panel over the current menu, keeping context intact.

Two other actions round out the basics. Back returns the user to the previous frame, handy for close buttons, and Scroll to jumps them to a specific point within a long frame, like scrolling to the reviews section on a product page. Figma details every action type, including Back and Scroll to, in its prototype actions reference, and covers overlay-specific behaviour in Create overlays in your prototypes.

Picking The Right Animation And Duration

Every action can carry a transition. Figma gives you a handful of animation types, and each one sends a different message about how screens relate to one another.

• Instant: No animation; the screen simply cuts. Good for tab switches where speed matters more than polish.
• Dissolve: One screen fades into the next, useful for a soft, subtle change.
• Move In and Move Out: The new screen slides over or off the current one, suggesting layers.
• Push: The incoming screen shoves the old one aside, great for a next-step flow like a checkout.
• Smart Animate: Matches elements between frames and animates the difference, which we will cover below.

Alongside the type, you set an easing curve and a duration. Easing controls acceleration, and something like Ease Out feels natural because motion starts fast and settles gently.

Keep durations short. A transition somewhere in the region of a couple of hundred milliseconds usually feels crisp, while anything much longer starts to feel sluggish.

Using Smart Animate For Seamless Motion

Smart Animate is the feature that makes prototypes look professional. It looks for layers with the same name across two frames and tweens their position, size, and opacity automatically, as explained in Figma’s Smart Animate documentation.

Picture a ride-hailing app used across Singapore. On the map screen, a small card shows the estimated fare. When the user taps it, Smart Animate expands that same card smoothly into a full trip-details screen, so the card appears to grow rather than the screen simply flipping.

The trick is consistent layer naming between frames. If Figma cannot match the layers, the effect breaks. Figma’s own guidance confirms it will fall back to a default dissolve transition when layers or properties don’t line up. Tools that assist with layer organisation are part of the wider set of Figma AI features that speed up design work.

One warning for beginners: do not over-animate. Motion should guide attention and clarify relationships, not decorate. Keep every transition purposeful and fast, and your prototype will feel far more credible to stakeholders and testers alike.

Previewing And Testing Your Flow

You have wired up your frames, but a prototype only earns its keep when you actually click through it. This is where I catch the small mistakes that would embarrass me in front of stakeholders.

Entering And Navigating Present Mode

Hit the Present button (the play icon in the top right corner) to launch your prototype in a new tab, per Figma’s guide to presenting designs and prototypes. Now you are no longer a designer; you are the user.

Click through the journey exactly as a member of the public would. Do not just admire the happy path where everything works. Deliberately poke at every button, back link, and secondary option.

Say I am building a SingPass-style login flow for a government e-service. I start at the landing page, tap “Log in”, enter a mock NRIC, hit the OTP screen, and then expect to land on my dashboard.

Use the device preview options in the right panel to test on a mobile frame, since most Singaporeans access these forms on their phones. You can also restart the whole flow at any point using the restart control, which is handy when you want to replay the journey from the top with fresh eyes.

Troubleshooting Dead Clicks And Missing Connections

Here is where reality bites. In my SingPass example, I key in the OTP, press “Verify”, and nothing happens. The click feels dead.

That is almost always a missing connection between the OTP frame and the dashboard frame. I forgot to draw the interaction, so Figma has nothing to respond to.

To confirm, use the shortcut to reveal hotspots. In Present mode, press the letter that flashes all clickable areas, or hold your cursor still and Figma will briefly highlight where the interactive zones are.

If the button lights up blue, the hotspot exists but points nowhere useful. If it stays flat, you never connected it at all. Jump back to the canvas, select the OTP button, and drag the interaction node to the dashboard frame.

A Quick Self-Run Usability Check Before Sharing

Before I send anything to a client or a colleague, I run the whole thing myself at least twice. Once slowly to check every screen, and once quickly to see if the flow feels natural at real speed.

Try to break your own prototype. Tap the back button, abandon the form halfway, enter the OTP screen twice. Real users rarely behave as neatly as we hope.

A prototype you have not clicked through yourself is not ready to share. Ten minutes of self-testing saves you a very awkward moment when a stakeholder hits that dead OTP button in front of the room.

Sharing Your Prototype And Collecting Feedback

Once your prototype clicks through smoothly, the next step in learning how to use Figma prototyping is getting it in front of real people. This is where a design stops being your private draft and starts earning feedback.

Share Settings And Permission Levels

The blue Share button sits in the top right corner of every Figma file. Click it, and you decide who can open the file and what they can do once inside, as laid out in Figma’s official guide to sharing files and prototypes.

You will see two permission levels: can view and can edit. For most stakeholders, you want “can view” only, so they cannot accidentally drag a frame or delete a component.

Picture a small fintech startup preparing to pitch a hypothetical, but one that maps to a workflow I see often. The founder might copy the view link and send it to their Enterprise Singapore mentor and a couple of angel investors.

Those reviewers could then open the link in a browser, hit the play icon, and click through the prototype exactly as an end user would, no Figma account required for viewing if the link is set to “anyone with the link”.

Collecting Comments And Organising Feedback

Reviewers do not need to reply by email. Inside Figma, anyone with access can pick up the comment tool (the speech bubble icon) and drop a pinned note directly on the screen they are reacting to, exactly as described in Figma’s comments guide.

That means feedback lands exactly where the problem is, not in a vague message that says “the second screen felt off”. You can reply in the same thread, tag a teammate, and tick comments as resolved once you have acted on them.

To keep this useful, ask for structured feedback rather than opinions. I usually give reviewers three prompts: Was anything confusing to tap? Did the flow match what you expected? What would stop you from completing this task?

That framing pulls out actionable notes instead of “I like the colours”. If a comment is really about layout versus flow, it helps to know UI vs. UX: what’s the difference, so you can route it to the right fix.

Protecting Sensitive Data With Dummy Content

Here is the part beginners forget. A realistic prototype often contains realistic-looking fields: full names, NRIC-style numbers, mobile numbers, addresses, and email addresses.

Under Singapore’s PDPA, personal data should not be floating around in files you send outside your organisation. Before you copy that share link, swap any real details for obvious dummy content.

• Use placeholder names like “Tan Ah Kow” or “Jane Doe”
• Replace real NRIC and phone numbers with clearly fake sequences
• Use test emails such as test@example.com

For our fintech founder sharing with investors, this matters twice over: you protect people’s data, and you look more professional. Nobody wants a mentor spotting a genuine customer record inside a demo screen.

Sanitise first, share second, and your feedback loop stays both fast and compliant.

Common Beginner Mistakes And How To Avoid Them

Everyone breaks their first few prototypes. When I learned how to use Figma prototyping, I clicked through my own flows a dozen times and still hit dead ends, so treat these slip-ups as normal stops on the road, not signs that you are bad at this.

Let me walk you through the ones I see most often, and the quick fixes that save you real embarrassment.

Flow And Connection Errors

The most common one is forgetting to set a starting frame. If you hit play and Figma opens on some random screen halfway through your flow, right-click the correct frame and set it as the flow starting point.

Next comes linking to the wrong destination. It is easy to drag a connection to a lookalike frame, so always click through the actual prototype, not just the noodles on the canvas.

Then there are orphan frames: screens with no incoming or outgoing connections. I keep an eye out for frames that never appear when I test, because they usually mean a broken step or a button I forgot to wire up.

I once watched a bootcamp learner present a SkillsFuture-funded portfolio prototype in an interview. She tapped a primary button; it froze on a dead link, and the panel moved on. A two-minute check would have caught it, and it is exactly the kind of detail that feeds into why most UX designer job applications get rejected.

Motion And Usability Missteps

Over-animating is the next trap. When every transition slides, dissolves, and springs, your interviewer waits half a second per screen and starts to feel the friction.

Keep motion purposeful: use Smart Animate for meaningful state changes, and a quick Instant or short Dissolve for ordinary navigation.

The other big miss is testing only the happy path. You demo the perfect sign-up, but nobody checks what happens when a field is empty, or the user taps Back.

Click the wrong things on purpose. Tap outside buttons, hit Back twice, and see where your prototype leaves the user stranded.

A Reusable Pre-Handover Checklist

Before you share any prototype, whether for a client or a job interview, run through the same short list every time.

• Is the correct starting frame set?
• Does every button lead somewhere, with no dead ends?
• Are there any orphan frames left unconnected?
• Is the motion subtle and consistent?
• Have you clicked at least one wrong path?

Build this checklist into your routine, and most demo-day disasters simply stop happening. Mistakes are part of learning, and catching them early is a skill you will use in every project ahead.

Levelling Up Your Prototyping Skills

Once you can link frames and add basic transitions, the fun really begins. This is where you move from static clickthroughs to prototypes that behave like real, living products.

The gap between a beginner and a hireable prototyper is not more screens; it is smarter interactions.

Interactive Components and Variables

Interactive components let you build a single element, say a toggle switch or a form field, that changes state on hover, tap, or focus without you duplicating frames.

Variables and conditional logic take this further. You can store a value, like whether a user is logged in, and show different flows based on it.

Imagine prototyping an e-commerce checkout for a local retailer. With variables, you can update a live cart total as items are added, so stakeholders test something that feels genuinely functional rather than faked.

AI-Assisted Prototyping

Figma has been rolling out AI features that speed up the tedious parts of the job. These can help you generate placeholder copy, rename layers in bulk, or draft a first-pass layout you then refine.

Treat AI as a fast intern, not a designer. It removes busywork so you can spend your energy on the interaction logic and user flow that actually demonstrate your thinking.

Building a Portfolio-Ready Case Study

Learning how to use Figma prototyping matters most when it lands you work, and Singapore’s UX/UI job market keeps growing across banks, government agencies, and product startups.

I once mentored a career-switcher from an admin role who had no design background. She rebuilt a clunky HDB appointment-booking flow as a Figma prototype, wrote up her research and decisions as a case study, and used that single project to land her first UX interview.

Recruiters here want to see your process, not just pretty screens. A strong case study should include:

• The problem and who you were designing for
• Your research or assumptions and how they shaped the design
• The interactive prototype itself, ideally with a shareable link
• What you would improve next, showing self-awareness

If you are weighing whether the switch is worth it, the UX designer salary figures in Singapore give a realistic picture of where these skills can take you.

Self-teaching gets you surprisingly far, but structured training gives you feedback, credibility, and a portfolio you can defend in an interview. Many UX courses in Singapore are SkillsFuture-funded, so you can offset the cost using your SkillsFuture Credit while building the confidence to call yourself a designer.

Conclusion

Remember where we started: you shared a flat mockup, and the feedback that came back was vague and unhelpful. Comments like “it feels off” or “I can’t picture the flow” left you guessing.

Now you have the tools to change that. You know how to use Figma prototyping to link frames, add triggers like On Click and On Drag, choose transitions such as Smart Animate, preview a real user flow, and share a live link for feedback.

That single shift, from static screens to clickable experiences, is what pulls sharper input from stakeholders. When your manager or client can actually tap through a checkout flow or a booking journey, their comments stop being abstract and start being specific.

My honest advice: pick one small, real project and build it end to end. Prototype a three-screen sign-up flow, a food delivery cart, or an appointment booking page for a local clinic. Keep it tiny so you finish it, then iterate based on what you notice while clicking through.

Every professional designer I know got fluent by doing exactly this, one flow at a time, not by reading one more tutorial.

When you are ready to move beyond the basics and build a portfolio that hiring managers take seriously, structured training makes a real difference. It gives you feedback, a proper design process, and the confidence to defend your decisions.

If that sounds like your next step, consider enrolling in the WSQ User Experience & User Interface (UX-UI) Design Essentials course, which is SkillsFuture eligible and designed to take you from clicking prototypes to shipping thoughtful, user-centred designs with real professional confidence.