Custom Search Bar and Segmented Control

Search Bar Container

• Add a Stack H and rename it Search Bar Container
• In Settings, set the Gap to 4
• In Layout, set the Height to 104pt and paddings to 60, 16, 0, 16
• Set Pin To Top left

When we scroll the cards, we still want to keep the Search bar fixed at the top. To keep the Search over the cards, set Depth to 11.

• In Appearance, set the background Color to #17182B

Diamond Button

• Add a Stack V and rename it Diamond Button
• In Layout, set the Width and the Height to 44pt and paddings to 6
• Add a new Stack in the Stack and rename it Background
• In Layout, set the Width and the Height to 100%
• In Appearance, set a new background color; color White - 10%
• Add a Corner Radius 10
• Add Border 1pt, color white, opacity 10%
• In Transform, set the rotation Z to 45
• For the Icon, add a SF Symbol in the parent Stack
• In Settings, set the icon to “list.bullet”, Size to 15pt, Container Size to 32x32 and the Color to System Gray
• In Layout, set Pin To Center Center
• Make it into a component because we will be using this UI a lot

Search Bar

• Add a Stack H and rename it Search Bar
• In Settings, set the Alignment to Center and Distribution to Space Between
• In Layout, set the Width to 248pt, Height to 42pt, paddings to 10, 16, 10, 16
• In Appearance, set the background color to Gradient #22283E - #171827
• Set Corner Radius to 30
• Add a Border 1pt, color white, opacity 10%

The Search bar contains 3 elements, 2 icons and a text field. Add a SF Symbol.

• Set the icon to “magnifyingglass”, Size to 16pt, Container Size to 24x24 and the Color to System Gray
• Duplicate it and change the icon to “mic.fill”

Text Field

The Text field element is a really important UI that allows users to enter text into a UI. It is normally used in forms.

• Add a Text field
• In Settings, Placeholder Text to “Where To”
• Set Type to “Footnote - Bold”: Styles Bold and Size 13pt
• Set the Text in White, the Placeholder in System Gray and the Alignment Center
• In Layout, set the Width to Fill Width and the Height to 42pt

When you scroll, the Search Bar doesn’t stick to the top. To fix that, go to Layout and toggle Pin to Page. Also, don’t forget to turn the Search Bar into a component.