Introducing Doruk, a Framer Expert

Welcome! This article provides a synopsis of a Framer tutorial by Product Designer and Framer Expert, Doruk. Doruk demonstrates how to customize Framer's search component in simple steps. Be sure to head on over to the Framer website to follow along.

Understanding the Framer's Search Component

A casual glance at Framer's website reveals a search input bar responsive to all cursor movements while hovering the search input. However, by default, Framer only presents us with the search icon. The likelihood of customizing its default state from property controls is nonexistent. A conundrum, isn’t it? Well, thanks to Doruk’s expertise, the resolution is surprisingly simple.

Customizing the Search Function

To begin with, Doruk guides us to the insert panel where we type in 'search function' and simply drag and drop it into the custom styled search input, a process that every Framer Expert is well-versed in. However, this default icon lacks customizable properties. Moreover, on resizing, it refuses to stay left-aligned, instead opting to be center-aligned.

Hacking Through the Customization Process

Watching Doruk effortlessly navigate his way through this customization process is quite the sight. He demonstrates a nifty hack whereby clicking on the custom icon option and choosing an empty SVG allows an empty search component to be created. This search component only responds when hovering within its boundary. Changing the type from relative to absolute offers flexibility in size alteration. Resize it all you want, and the search icon never changes. It’s a relief to note that even with a change in size or content alteration, the search component never breaks.

The Importance of Order and Hover State

Order is imperative here. The search component needs to be at the top of all elements in the group. On clicking 'preview', it's evident that the search input bar is responsive to all cursor movements. To add a hover state, Doruk creates a component option, picks hover and pressed states, and changes its border color to black when moused-over. He spruces the pressed state up with a lighter gray fill color, a simple yet effective change visible on pressing the search input bar.

Wrapping Up

As the tutorial concludes, we're left with an efficiently functioning search component, a testament to Doruk's product design and Framer expertise. The steps to achieve this may seem technical at first, but frequent reference to Framer Tutorials will have you up to speed in no time. With the wealth of knowledge shared consistently by Framer experts, every hurdle in Framer navigation becomes a stepping stone to the next level of competence in this phenomenal design tool.

For more insightful learning, check out other FramerShowcases, enrich your skills with Framer Tutorials and experience the journey of others through FramerStories. You may also consider boosting your design process efficiency with FramerTemplates.