Getting the right data input from the user is challenging, especially in the right format with the right validations. Therefore, if these forms are designed appropriately, the overall experience and data quality can be significantly improved. Let's explore how Ethr Design System can help you with it.

Ethr Design System

Ethr is a design system which permeates use cases of fintech and traverses into multiple experiences. A scalable design system to supercharge your product design.It is a modern, dynamic, and innovative system which is focused on reusable component for fintech products. It is built on Figma Config 2022 updates.

 Form components in Ethr follow Figma’s June 2022 updates.

Components that make up a form:


• Radio Buttons

• Checkboxes

• Toggle Switches

• Text Fields

• Dropdowns

• Contact Input

• PIN Input

• Search Bars

Structure: Logical grouping and arrangement of input fields in any form

Input Fields: Include the component that allows user to enter or edit data

Input Labels: Describe the nature of data to be entered

Validation: Provides useful feedback to users, and help indentify next steps to them

Help Text: Additional info for the user to understand the input field better

Structure

The layout followed 8px grid for margins and spacing to bring visual hierarchy and consistency in interface. For atom level form components like Radio Button, Checkboxes, and Toggle Switches the structure have one level of hierarchy. 

For a the molecule level like input fields and search bar the structure was based on parent child hierarchy. Utilizing child components’ nested properties to customize the parent component.

Fintech Use Cases

In fintech products, forms can be used in a number of use cases:

• Transfering money

• Signup forms

• Generating invoices

• Linking card or bank account

• Buying and selling cryptocurrency

Interactive Components

Interactive states in inputs and selectors help inform users about the current status of fields. Input components in Ethr are prototyped to help users understand their working behavior.

We would love to hear from all of you who have tried Ethr. Please fill out the feedback form here

Get your copy now and start designing! https://www.figma.com/community/file/1134023223825957652