Modern registration form UI for Figma with name, email and password fields and social sign-up buttons

This registration form UI is a ready-made sign-up card for SaaS products and web apps. It asks for the four things most products need and keeps the layout calm, so people can finish it quickly.

Sign-up forms lose people when they feel long or confusing. This layout keeps each field on its own row with a clear label above it, so nobody has to guess what to type. The social buttons give a faster route for users who do not want to fill in a form. Use it as a base for a trial page, a waitlist or a full account creation step.

What you get

  • A white card on a soft blue gradient, inside a desktop frame
  • The heading "Create Your Account" with one line of supporting text
  • Full Name, Email Address, Password and Confirm Password fields
  • Show-password icons on both password fields
  • A blue Create Account button and an "OR" divider
  • Google, Facebook and Apple buttons, plus a link for returning users

How to use it in Figma

Use the copy button, then paste into Figma with Ctrl or Cmd + V. The form comes in as editable layers. Rename the labels, change the helper text and set your own brand colour on the button.

Best for

  • Onboarding flows for new accounts
  • Free trial and waitlist pages
  • Case studies about reducing form friction
  • Quick mockups for client approval

Customisation tips

  • Cut the Confirm Password field if your product uses a show-password toggle instead.
  • Add a short password rule under the field to prevent errors.
  • Build the other half of the flow with the modern login UI component, and browse more patterns in Forms and Inputs.

More like this

FAQ

Frequently asked questions

What does the registration form include?

A sign-up form with input fields, password visibility toggles, pre-styled Google, Facebook and Apple buttons and a clear Already have an account link. The hierarchy is designed to keep the primary action obvious.

Can developers use it as a reference?

Yes. Shapes are vector based and layers are named and grouped, so developers can inspect spacing and styles and use it as a high-fidelity reference when they build the front end.

How do I customise colors and type?

Edit Figma's native variables. The component uses global styles for primary color and typography, so changing the variable updates every instance of it across the whole form in one step.

This one is for Pro members

Go Pro for unlimited copies of every component, new ones included.

Continue to checkout

Pay with Razorpay or PayPal. Cancel any time from My account.

Already have an account? Log in  ·  New here? Sign up