Search bar prototype in Figma
211 هزار بار بازدید -
2 سال پیش
-
Figma is free to use.
Figma is free to use. Sign up here: https://bit.ly/3msp0OV
Today we’re going to show you how to make an interactive search bar component in Figma.
1. Start with a search icon (24px x 24px) and a text layer (font size 12, opacity 30%) in the file.
2. Select both the icon and the text layer, and hit Shift + A to add auto layout
3. Change Space between items to 8px
4. Add a white fill to the auto layout layer
5. Change all 4 paddings to 8px by clicking on the on-canvas control while holding Shift + Opt (Ctrl for Windows users)
6. Change border-radius to 24px
7. Add drop shadow to the auto layout layer (#000, opacity 16%, blur 10).
8. Set Horizontal resizing to Fixed and its width to 250px
9. Turn on Clip content
10. Rename the auto layout frame, and turn it into a component
11. Add a new variant, change the property name to “state” and set the variants’ name to “default” and “active” respectively
12. Select the default variant and adjust the width of it so that it turns into a rounded circle and hides the text layer
13. Select the search icon layer and set its rotation to 90 degree
14. Switch to prototype mode
15. Connect the default variant to the active variant, and set the animation type to “smart animate”. Adjust the easing to “Ease out back” and set the animation duration to “500ms”
16. Connect the active variant back to the default variant, set the animation type to “smart animate”. Adjust the easing to “Ease in back’ and set the animation duration “500ms”
17. Place the default variant to the right side of a frame, and set its constraint to “Right”
18. Click the present button to check it out!
____________________________________________________
Find us on ⬇️
Twitter: Twitter: figmadesign
Instagram: Instagram: figma
LinkedIn: LinkedIn: figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #nothinggreatismadealone #design #shorts #tips #tipsandtricks
Today we’re going to show you how to make an interactive search bar component in Figma.
1. Start with a search icon (24px x 24px) and a text layer (font size 12, opacity 30%) in the file.
2. Select both the icon and the text layer, and hit Shift + A to add auto layout
3. Change Space between items to 8px
4. Add a white fill to the auto layout layer
5. Change all 4 paddings to 8px by clicking on the on-canvas control while holding Shift + Opt (Ctrl for Windows users)
6. Change border-radius to 24px
7. Add drop shadow to the auto layout layer (#000, opacity 16%, blur 10).
8. Set Horizontal resizing to Fixed and its width to 250px
9. Turn on Clip content
10. Rename the auto layout frame, and turn it into a component
11. Add a new variant, change the property name to “state” and set the variants’ name to “default” and “active” respectively
12. Select the default variant and adjust the width of it so that it turns into a rounded circle and hides the text layer
13. Select the search icon layer and set its rotation to 90 degree
14. Switch to prototype mode
15. Connect the default variant to the active variant, and set the animation type to “smart animate”. Adjust the easing to “Ease out back” and set the animation duration to “500ms”
16. Connect the active variant back to the default variant, set the animation type to “smart animate”. Adjust the easing to “Ease in back’ and set the animation duration “500ms”
17. Place the default variant to the right side of a frame, and set its constraint to “Right”
18. Click the present button to check it out!
____________________________________________________
Find us on ⬇️
Twitter: Twitter: figmadesign
Instagram: Instagram: figma
LinkedIn: LinkedIn: figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #nothinggreatismadealone #design #shorts #tips #tipsandtricks
2 سال پیش
در تاریخ 1401/05/04 منتشر شده
است.
211,017
بـار بازدید شده