Figma log in page header examples

Almost nobody designs the log in screen twice. It gets made once during the first sprint, and then it quietly handles every expired session, every deep link out of an email, and every returning customer for the rest of the product's life.

The sixteen layouts here exist so the version you ship in week one is one you can still live with in year three.

The section, not the whole page

What sits above is the log in section itself: the form, its heading, and whatever fills the rest of the screen, drawn to fill a 1,440px desktop frame at 960px tall and a 375px mobile frame at 812px.

The log in page examples are the assembled version, where that same section sits under a navigation bar inside a complete screen. If you are choosing a look, start here. If you need a finished screen to hand over, start there.

Several compositions in this file already pair the section with a dropdown header navigation, 72px tall on desktop and 64px on mobile, which is the arrangement most marketing sites converge on anyway.

Where the social buttons go

Two of the types disagree on purpose. Simple social logins puts the provider buttons under the email and password fields; Simple social login leading puts them above, with the form below a divider.

That order is a real decision and it should follow your own numbers. If most accounts in your product were created with Google or Apple, leading buttons put the majority path first. If passwords still dominate, leading buttons train people to click the wrong thing and then discover they have two accounts. Whichever way you go, keep the provider order identical on log in and sign up, and put the option you actually recommend at the top.

The fields underneath still have to behave: web.dev's sign-in form guidance covers the autocomplete attributes that let a password manager fill this in one keystroke, and WCAG 2.2's accessible authentication criterion is why blocking paste in a password field is now a conformance failure rather than just an irritation.

Sixteen layouts in four families

The Type property falls into simple, card, split, and header navigation groups. Simple, Simple minimal, and Simple illustration are the centered form at three levels of decoration. Card separated and Card combined lift the form onto a surface, which is the variation that survives a photographic background.

The split layouts give the other half of the screen to something: an image, an app mockup, a customer quote, a quote over a photo in three treatments, or a carousel. Those last ones are worth being honest about. A testimonial beside a log in form is not doing conversion work, because the person typing their password has already bought.

Save the testimonial sections for sign up and give returning users a screen that loads fast and puts the cursor in the email field. Every type ships in light and dark, and each one has its own mobile drawing rather than a squeezed desktop, so you can see how a split screen collapses before you promise anyone it will.

Prototyping the flow around it

A log in screen is never one screen. A prototype anyone can learn from needs the failure path and the recovery path, which is why this file also carries the forgot password steps and why the verification screens sit one hop away.

Wire the submit button to a success frame and the same button to an error state, then use Figma's prototype flows to keep each path named separately so testers can be dropped in anywhere.

People in usability sessions will type the wrong password. Give them somewhere to land.

The same layouts are waiting for you in code. Untitled UI React log in pages are open source, built with Tailwind CSS and React Aria, with field labelling, focus order, and error announcements already wired up.