How to Prototype a Real Signup Flow in Minutes

Sometimes you want to leverage your beta users to shape how you build your product. You want them to use it with their own data as if it was released already, but building a signup page can be a daunting task. Well, I gotchu and I'm here for you.

What will we do?

In this guided tutorial I will show how to navigate and connect two of my favorite low-code tools

to create a Sign-Up Page and a Login Page for your prototypes, so you can give your

testers a real app they can use and personalize with their own tasks, music playlists,

shopping wishlist or whatever it is you are working on.

Tools

Framer is one of the most powerful prototyping tools out there. If you know a bit of programming, its capabilities are virtually unlimited because it’s based on web technologies. You also have the flexibility to use the design tool to do cosmetic changes on the fly without touching the style code.

<br />

Supabase is an approachable database for people without database experience,

aka me. It can handle user authentication (login/logout) so we don’t have to deal

with user’s passwords ourselves.

<br />

How to Connect Supabase with Framer

Step 1 - Initial Setup

You are gonna need a Supabase account, go ahead and sign up and create an organization.

Step 2 - Create a Database

Create a project on the supabase account, and find the API section under Project Settings. Keep this tap open since we are gonna need it in a minute.

Step 3 - Framer Setup

Create an account with Framer and duplicate my Create Account Framer file, it has everything you need to connect to your recently created database. If you inspect this file around you can see that I've set up the sign up flow for you already, but everything is editable with the design tools, allowing you to have full design control.

Step 4 - Plug & Play

On the left lower panel where the component section is, there is dropdown for a hidden code section. There is a file called initSupabase, here is where you going to paste your database info.

Go back to your Supabase Project and get the anon key and URL and paste it on the Framer File from the API section we were on earlier.

Step 5 - Prototyping Settings

Now we want to make our database easy to work with during the prototyping phase, so we will turn off Email Confirmations, this will allow us to test and iterate quickly without checking verifying our email every time we have to login. These settings are not recommended for production.

Step 6 - Preview

Go ahead and preview the Loading Page. There is where the magic happens. We are making an API call to the database and checking if the user is logged in or not. Framer allows to expose Events to the canvas, which allow designer to connect Screens based on different events. If the user is not logged in, it will send them to the Create Account Page.

Now you can test your sign up flow. If you create an account you should see that email on the Supabase accounts table.