Figma sign up page header examples

A sign up form is a bill presented before the meal. Everything you ask for is paid now against a benefit that has only been promised, which is why the gap between four fields and seven usually shows up in the funnel rather than in the design review. The twenty-one layouts here run from a plain centered form to multi-step onboarding with a progress sidebar, so the shape of the form can follow how much you genuinely need to collect.

The section, not the whole page

This is the sign up section: form, heading, and supporting content, drawn to fill a 1,440px desktop frame at 960px tall and a 375px mobile frame at 812px. Complete screens live in the sign up page examples, where the same section is combined with navigation and everything else a page needs. Compositions in this file show it under a dropdown header navigation at 72px on desktop and 64px on mobile, which is the pairing a marketing site normally ends up wanting.

Progress, and the case for splitting a form

Five of the layouts exist for multi-step sign up. Simple progress 01, 02, and 03 run the indicator across the top of the form; Sidebar progress 01 and 02 run it down the left of the screen with room for step names.

Splitting is worth doing when the steps are genuinely different, account then workspace then invites, and worth avoiding when it only spreads six fields across three screens. If you do split, carry the answers forward: WCAG 2.2's redundant entry criterion asks that anything already provided be auto-populated or offered back rather than typed again, and the billing step is where most onboarding flows break it.

The sidebar version has one practical edge over the top bar: it can show every step name at once, so people see what they are agreeing to before they start. The progress steps components cover the indicator on its own if you need it elsewhere.

The password field is most of the conversion problem

Sign up is where a password gets created, and creating one is harder than typing a known one. Nielsen Norman Group's research on password creation is blunt about the fix: show the requirements before anyone types, let people unmask what they typed, and use a strength meter instead of a list of rejections.

Rules hidden until failure turn account creation into a guessing game with the rulebook face down. Then look at the rules themselves, because NIST's digital identity guidelines advise against forced character-type mixes and set the floor at eight characters, which makes a good share of production password policies pure friction. The input field components carry the hint, helper, and error slots these layouts hang all of that on.

Social proof, and when it actually earns its half of the screen

Unlike a log in section, sign up is a page where a testimonial does real work, because the reader has not decided yet. Split quote carousel, Split quote image 01 and 02, Split mockup quote, and Split app mockup all hand half the screen to that job.

Use a named customer, a real photograph, and a quote about the thing being signed up for; a generic five-star sentence beside a form reads as wallpaper. Placeholder faces and company marks are free at avatars and logos while the real ones are being chased through marketing.

If you want the pattern at full width instead of beside the form, the social proof sections cover logo walls and rating rows. Everything here ships in light and dark, and each type is drawn separately at both breakpoints.

The same sections are already written in code. Untitled UI React sign up pages are open source, built with Tailwind CSS and React Aria, with validation states and focus management handled for you.