Figma template

Introduction

This Figma template file is designed to help you create and customize forms that can be converted into functional web forms using Figma Forms. It includes pre-designed components and layouts that you can easily modify to fit your needs.

The template is structured to align with the DÁP design system, using its components and layout guidelines.

Form Structure

Figma Forms was built for multi-page forms, so use the structure below when designing your forms.

Form

The collection of your form pages, represented by a Section.
The page order is determined by the order of the frames within this section.
When using the parser, pass the node ID of this Section to extract the form data.

Name the section as follows to give your form a name and a description:

# Format
{Form Title};{Form Description}
# Example
Customer Feedback Form;Please fill out this form to help us improve our services.

Form Page

The individual pages of your form, represented by Frames within the Form section.
Name the frames as follows to give your form pages a title and a description:

# Format
{Page Title};{Page Description}
# Example
Personal Information;Please provide your personal details.

Form Elements

The actual form fields and components, grouped within each Form Page frame.

Currently Figma doesn't have a React-like children feature (placing any component into another one), so some elements cannot be components, such as Radio/Checkbox groups or fieldsets. Generally, copy/pasting is the recommended way to go, but some elements are available also in the assets panel.