Figma Forms

Preview

Figma Forms

Figma Form Blocks

Form blocks are a website layout that gathers visitor information using Inputs, Dropdowns, and Selects. Examples include login, authentication, payments, lead capture, newsletter signup, and settings forms.

Form blocks are part of the Figma Website Builder. This component allows you to quickly assemble websites with Figma Sites.

How to use Forms in Figma

Form blocks are fully responsive and take advantage of Figma Sites Breakpoints. To make sure your forms are as user-friendly and effective as possible, you can stick to these bite-sized UX best practices:

Place labels above fields for better readability;
Remove unnecessary fields to improve completion rates;
Mark required fields with an asterisk (*) or other indicators;
Use single-column form layouts for faster completion and higher completion rate
Display human-readable error messages next to relevant fields;
Write form-specific button text (e.g., "New Account" instead of "Submit");
Break long forms into logical steps;
Show clear success messages and next steps labels;
Provide keyboard navigation where possible;
Enable forms autofill where possible.

Forms Anatomy

Set	Variants	Properties
Forms	36	Layout 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12Size Desktop, Tablet, Mobile

Form blocks are one set of 36 variants — twelve layouts, 01 to 12, each in Desktop, Tablet and Mobile sizes — covering login, authentication, payment, lead capture, newsletter and settings forms, built from the kit's form fields for Figma Sites breakpoints.

Forms AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build twelve form page blocks in Figma, each in Desktop, Tablet and Mobile widths. 01 Login: email and password fields, a remember-me checkbox, a Forgot password link and a Sign in button with social sign-in buttons below a divider. 02 Sign up: name, email, password with a strength meter and a terms checkbox. 03 Two-factor: a six-box OTP input with a resend link. 04 Password reset: one email field and a confirmation state. 05 Contact: name, email, subject select and a message textarea. 06 Lead capture: a split block with a value proposition on the left and a short form on the right. 07 Newsletter: an inline email and button strip. 08 Payment: card fields, billing address and a pay button with the total. 09 Settings: grouped inputs with Save and Cancel. 10 Multi-step: a stepper above a form with Back and Next. 11 Survey: radio and checkbox groups with a progress bar. 12 Feedback: a rating scale and a comment box. Labels sit above fields, required fields carry an asterisk, errors show inline, and every field is a nested kit instance.

Source