Skip to content
Frames For Figma

Forms

Build a form

Build a complete form in Figma from the Frames For Figma form components, with auto layout, labels, fields, choices and a submit button.

This guide puts the kit’s form components together into a complete form, such as a contact form, with auto layout so it resizes cleanly.

Build the form

Section titled “Build the form”

  1. Create a frame for the form and give it a vertical auto layout. Set the gap to a spacing variable, for example Desktop/D Space M.

  2. Drag a Text Input from the Assets panel into the frame. Set its Type, for example Text for a name, and its Style (Light or Dark) to match the background.

  3. Set the field’s width to Fill container, so it stretches with the form.

  4. Edit the label text and the placeholder, and turn Show Hint Text off if the field doesn’t need help text.

  5. Duplicate the field for each input you need (Cmd+D on a Mac, Ctrl+D on Windows) and change their Type: Email, Phone and so on.

  6. Add a Text Area Input for a message, and a Checkbox for consent, for example “I agree to the privacy policy”.

  7. Finish with a Button for submitting the form.

Good to know

Section titled “Good to know”
  • To put two fields side by side, for example first and last name, wrap them in a horizontal auto layout frame and set both to Fill container.
  • Mark required fields with the label’s Required asterisk, and optional ones with Optional.
  • For the mobile version, duplicate the form and set Device to Mobile on every component.