Figma log in page examples

The log in page gets more traffic than anything else you ship and less design time than almost anything else you ship. Every part of it is load bearing: where the forgot password link sits, whether the email field remembers what was typed after a failed attempt, what the error says, whether a password manager can fill it at all.

The examples above are whole pages rather than a form floating in space, so those calls are already made in a real 1,440px context.

Simple, card, or split

The layouts sort into three families. Simple centers the form on the page, with variants for a stripped-back minimal version, an illustration, a version sitting under a header navigation, and two social login treatments, one of which leads with the provider buttons before the email field rather than burying them under a divider.

Card layouts lift the form onto a surface, either separated from the background or combined with it. Split layouts hand half the desktop canvas to something else: an app mockup, a customer quote, an image, a carousel, or a quote paired with a photo.

That second half is the part most teams waste. Someone signing in for the hundredth time will never read it, but someone who arrived from your pricing page and is one tab away from creating an account might.

What the form owes the browser

Two rules decide whether your log in page works for people who do not type passwords from memory. Fields need autocomplete values so browsers and password managers can fill them, which is the point of identifying the purpose of each input.

And nothing in the flow may block pasting or autofill. WCAG's accessible authentication criterion treats remembering a site-specific password as a cognitive function test, and it is explicit that a verification code must at least be pasteable. Blocking paste on a six-digit field is the most common way products fail it, usually in the name of security.

Error copy is the rest of the job: say the email or password is incorrect without saying which, and never clear the email field on a failed attempt.

Recovery is part of the log in design

The same file carries the forgot password flow as its own component set: request a reset, check your email, set a new password, and a success screen, plus a sidebar version, each drawn at 1,440px desktop and 375px mobile.

Designing only the happy path is how you end up with a reset screen that looks like it came from a different company, which is exactly the moment a user is squinting at a link that arrived by email and wondering whether it is real. Matching the reset screens to the log in page is a trust decision as much as a visual one.

Turning a page into a prototype

Because breakpoint is a variant property on the component, moving a log in page between its 1,440px and 375px versions is a property change on the instance, not a second design.

Wire the primary button to your first app screen, the forgot password link to step one of the recovery set, and the account link to a sign up page; Figma's prototyping guide covers the triggers and navigate actions.

Every page exists in light and dark, so the dark version of your auth flow is already drawn rather than promised. If you only need the form block itself, the log in headers and forgot password headers are the same content without the page around it.

These pages have already been built once, 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 announcement already handled.