UX Design for Mobile

Input field search functionality

We will add the search functionality to our prototype by adding an HTML input. As this is a quick prototype, we do not need to actually search through a set of elements or a database; it will be enough to simulate its behavior by showing some fixed results. Framer allows us to add layers that contain code written in HTML by assigning value to the html property of a layer.

For this example, we will include some inline CSS in the HTML tag so that we can set the size, the font, and some visual adjustments to make it invisible. As the visual design is already included in the Sketch design, the input field can be hidden in the HTML tag. Here's the code:

# SEARCH FUNCTIONALITY# Add Input FieldinputSearchField = ...