Recreating UI Series | Booking.com search bar

I challenged myself to recreate UI elements of well-known websites to fine-tune my UI skills in Figma. For this project, I recreated Booking.com search bar following industry's best practices. Something I found extremely useful was to set up my icons before I started designing any other components. I turned icons into components to use instances of them across my designs. To do this, I named my icons as “Icon/" followed by the name of the icon to ensure they were all part of the same nesting hierarchy in the Asset Panel. Doing this helped me find and easily swap icons in my design, speeding up my workflow substantially.

I also structured components and frames using Auto Layouts, so that their content would adapt to the size of the container, making the design responsive. I used padding and spacing between items to ensure the alignment was consistent throughout.

With thanks to Prodigy School and Bor Kolar for his mentorship :)