Form-like interactions in Figma - Step-by-Step Guide

Introduction

Form-like interactions let you create screens where users can enter or select data, like filling out a survey or inputting details. This helps you design interactive dashboards or reports that feel like real forms.

When you want users to input filter criteria on a dashboard, like choosing a date range or category.

When creating a prototype of a data entry form for feedback or data collection.

When you want to simulate user input in a report to show how data changes.

When designing a survey or questionnaire interface inside your BI tool mockup.

When you want to test how users interact with input fields before building the real dashboard.

Steps

Step 1: Create a new frame

- Figma canvas

A blank frame appears where you will build your form-like interface

💡 Use a size that matches your target device or dashboard

Step 2: Add input fields

- Insert menu → Text or Rectangle tool

Text boxes or shapes appear on the frame representing input areas

💡 Use rectangles with a border and a placeholder text to simulate input boxes

Step 3: Add text labels

- Text tool on the toolbar

Labels appear next to input fields explaining what data to enter

💡 Keep labels short and clear, like 'Name' or 'Date'

Step 4: Create interactive components

- Right-click input field → Create Component

Input fields become reusable components for consistent interaction

💡 Use components to manage states like default, focused, or filled

Step 5: Add interaction

- Prototype tab → Select input component → Add interaction

Clicking the input field changes its state to focused or shows a cursor

💡 Use 'On Click' trigger and 'Change To' action to simulate typing

Step 6: Preview the prototype

- Click Present button in the top-right corner

The form-like interface is interactive and users can click inputs to see changes

💡 Test all input fields to ensure interactions work smoothly

Before vs After

Before

Frame shows static rectangles and text labels with no interaction

After

Frame allows clicking input fields to change their appearance simulating typing

Settings Reference

Interaction trigger

📍 Prototype tab

Defines what user action starts the interaction

Default: On Click

Interaction action

📍 Prototype tab

Defines what happens after the trigger, like changing component state

Default: Navigate To

Component states

📍 Assets panel → Components

Defines different visual appearances for input fields

Default: Default

Common Mistakes

Not creating components for input fields

Without components, you cannot easily manage different input states or reuse fields

Convert input fields into components and create variants for each state

Using navigation instead of state change for input interaction

Navigation moves to a new screen instead of simulating typing in the same form

Use 'Change To' action to switch component states within the same frame

Summary

Form-like interactions let you simulate user input in dashboards or reports.

Use components with variants to create input fields with different states.

Add prototype interactions to switch states on user clicks for realistic behavior.