O'Reilly logo

UX Design for Mobile by Pau Giner, Pablo Perea

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 = ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required