Welcome back.
Let's handle the search box by copy pasting this bit of text from the existing design, give the type
tool and paste it in design freebies made with love free for commercial use.
Awesome center the text both in terms of positioning, but also from this place here.
This is already in all caps, so let's adjust the size.
Let's go with pop in there.
But I want something a bit softer.
Both basically means that you're making a strong statement, but we don't really want that much attention
to this side, though, so a lighter style may work better.
And indeed, light seems OK.
Please leave about 40 pixels from the main menu.
This isn't written in stone, by the way, for deep pixels, but we want to hit that sweet spot between
having a compact design and leaving enough room to breathe.
Now, to make sure you have on the right track, hold the all key and hover over the main menu, then
use your arrow keys with or without shift.
OK, now for the search box, let's start out with our text.
Type in search for the freebie and this is going to be a hint that's inside the box, even though most
people know how to use a search box.
This hint makes it look a bit better for the styling.
Let's take it down quite a lot, I would say.
Maybe Poppins regular 13 pixels, no, all caps treatment that should be simple and straightforward.
Please remember to open up this panel to disable that setting the all caps setting.
You do that by clicking on this minor symbol.
OK, we're going to choose a color after we add the background for this region head shift to enable
all the layout.
We could have used the simple frame, but this is slightly better enable of bill by clicking here.
Pure the white is totally fine.
OK, now let's resize it.
Do something about maybe 500 pixels, four to five hundred something along those lines.
Now why 500 pixels?
Because the button is going to be placed inside it, and there is nothing really else that's important
in this area.
Something now, though, like three hundred pixels wouldn't occupied the space correctly.
It would look odd, you know, just way too small.
But something over the 750 would be a massive exaggeration.
In case you want to work with precision.
Go to the W field here and type in five fifty or whatever the value suits you.
But the height remember, the main menu was 60 pixels.
Six zero.
Let's use the same value here, though you might notice the field is gray now that may happen to you.
That's because of one setting here from constraints and resizing.
But let's keep going.
Let's keep it simple.
Go here and drag this downward.
Now the edge field, the height field is unlocked because Figma understands when trying to do something
here, the text isn't centered anymore, but open up the padding setting from this place.
The default setting is top left.
I'm looking for this one.
OK?
Some people like to center it like so.
But because the search button is going to be inside it, I think I'm going to leave it like that.
OK, square edges are a bit 2005, so let's round them out all five pixels.
And because we have here in this panel, let's center it inside this big frame now.
Great looking good so far in relation to the headline leave 20 pixels between them.
Some text layers have this bounding box that's a bit bigger than the actual text, so the measurement
may not be 100 percent accurate.
But if you stay consistent and use the same measuring dual, then that's all that matters.
So trust the measurements shown by Figma and you'll be good to go.
Now it's time to set up the button, the type tool and write out search.
Now you might notice something a bit odd here, but no worries.
I'm going to explain it.
Remember how we did the main menu, where the menu items would get placed right next to each other when
we hit control?
That's all the layout and action.
Now let me delete that.
In this case, here we need to do the following.
Select the frame and in the padding pop up window.
We have this dropdown here that you might have missed.
Right now, it says backed change it.
The space between.
So from back, the space between and there you go.
And while we're here, let's edit the batting on the left edge to see 20 pixels.
OK, the next bit should be straightforward.
Select the search, text and head shift they or right click and choose.
Add the little layout.
Done next.
Add the file to it.
And of course, this should be orange.
You'll note.
As we didn't set up the or colors styles just yet.
And that's because so far there is no need for it.
Plus, this is going to be a very small project, so it's not really needed now.
Change the text white and round out the coordinates with a five pixel value to make this button healthier.
Change of the batting, then it's fine for the top and bottom 40 should give you a decent sized button.
Now I know we have a different gap with the search box, but that's intentional.
I feel it looks better that way because we have the same distance all around this button, and that's
10 pixels.
OK, now backing off, this is all search box.
We still have some details to sort out, but let me show you why we used all the layout.
Grab any edge and resize it.
You'll notice it still makes sense no matter the way you drag from.
Let's pause right now so you can rewind the video and work with me.
I'll see you in a minute.