Figma sign up page examples

A sign up page asks a stranger for information before they have received anything, which makes every field a small negotiation. Name, email, password, company, team size, how did you hear about us: each one is a question someone can decide not to answer by closing the tab. The examples above are complete pages at 1,440px and 375px, so you can argue about that field list against a real layout instead of a wireframe.

Field count is the whole conversation

Nielsen Norman Group put it plainly in their form usability recommendations: cutting a field raises the completion rate. Everything your sales team wants to know can be asked after the account exists, inside onboarding, where the person is already invested.

The same research argues for a single column, because two columns break the vertical run down the form, and against placeholder text as a substitute for labels. State password rules next to the field before someone types, not in red after they have guessed wrong twice. And give every field an autocomplete value so browsers can fill it, which is what identifying the purpose of each input asks of you and what makes the mobile version bearable.

What social login actually costs you

Two of the layouts here are built around social login, one leading with the provider buttons before the email form and one setting them alongside it. Social buttons remove typing and remove a password you would otherwise have to reset for people later.

They also add a permanent dependency, and they quietly change who owns the account: a person who signed up with a work Google account and then leaves that company has a problem you inherit. Pick the providers your users already have, keep the email path visible next to them, and do not add a fourth button because a competitor has one.

When signing up takes more than one screen

Some products genuinely need more than one step, and the set covers that without pretending a long form is short. Three of the simple layouts carry a progress step indicator above the form, and two more move that progress into a sidebar, so the steps stay visible while the form stays single-column.

The file also includes email verification as its own component set: check your email, enter the code manually, and a success screen, each at 1,440px desktop and 375px mobile. The manual entry screen matters more than it looks. Magic links fail often enough, in corporate mail clients especially, that a code path is not optional, and it needs to accept a pasted code.

Layouts, breakpoints, and the second half of the screen

Beyond the simple and card layouts, the split versions give half the desktop canvas to an app mockup, a customer quote, a carousel, a full-bleed image background, or a quote and photo together. That half is your last chance to answer "why am I doing this", which is why a testimonial there outperforms an abstract gradient.

The mobile versions are drawn at 375px rather than scaled down from the desktop page, and because everything runs on Auto Layout, adding or removing a field reflows the card instead of breaking it. Every page ships in light and dark. If you only want the form block without the page around it, the sign up headers and verification headers are the same content on their own.

The coded equivalents are open source. Untitled UI React sign up pages are open source, built with Tailwind CSS and React Aria, with validation, focus management, and error announcement handled for you.