Тёмный

Search Bar Animation Figma tutorial | Interactive Components Prototyping 

Yariv BE
Подписаться 4,1 тыс.
Просмотров 13 тыс.
50% 1

In this great Figma tutorial we will create a search bar animation which simulates autocomplete action.
The Figma features that we will use in this tutorial:
Auto layout
Components & Variants
Interactive Components
Animation and Prototyping
Smart animate
So, if search bar animation is what you are after - this is definitely the one for you!
To download the file of this tutorial, go here -
drive.google.c...
If you are not familiar with Auto layout, i strongly suggest to checkout these tutorial:
Understanding Auto layout
• Figma tutoria: Auto La...
For better knowledge and understanding Components and Variants to components, see these tutorials:
• Figma tutorial: compon... (part 1)
• Figma tutorial: compon... (part 2)
For animation and prototyping there are quite a few more tutorials that you can definitely check out in this channel :)
#yarivbe #figmatutorial #figmacomponents #interactivecomponents #smartanimate #figmavariants

Опубликовано:

 

14 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 25   
@am-ee5nh
@am-ee5nh Год назад
Thank you!!!!!! Just finished my search bar animation, and I thought it would be impossible. Thank you!!!
@YarivBE
@YarivBE Год назад
Thank you so much for your great feedback! I highly appreciate it! Very happy to know it helped you to achieve the design you needed 🙂⚡
@zainulabideen5500
@zainulabideen5500 4 месяца назад
how would I connect this seach option with another screen?
@YarivBE
@YarivBE 4 месяца назад
Hi there :) You can any of the option that are being opened to other screens. You can also make this an interactive component and change the text options to fit the screen you are placing it on (assuming i understood the question properly - let me know if i didnt).
@gabriellebyczek5192
@gabriellebyczek5192 Год назад
Is important if showing if users need to close
@YarivBE
@YarivBE Год назад
Hi Gabrielle. Can you please explain better what you mean? Not sure i fully get it... Thanks!
@smylmvv
@smylmvv Год назад
Hello, Is it possible to write anything on the search bar on Figma, too or it needs it to edit in html5/css/js?
@YarivBE
@YarivBE Год назад
Hi there :) Not really, its a "live" input field, but to be honest, its not really necessary for demonstrating the behavior of it on the screen and the functional states of it. It would be nice if it would, but for the UX and the UI of it, not really. Thanks for your question 🙂 Fell free to ask further if needed.
@fadihaddob
@fadihaddob Год назад
Great
@YarivBE
@YarivBE Год назад
Thanks a lot for the great feedback! I highly appreciate it 🙂🔥
@thiago_uxui_dev
@thiago_uxui_dev Год назад
Thanks 🙏🏻❤
@YarivBE
@YarivBE Год назад
You most welcome Thiago! Thanks a lot for the feedback ❤️ I appreciate it!
@KT-User
@KT-User 11 месяцев назад
nice
@YarivBE
@YarivBE 11 месяцев назад
Thanks a lot for the feedback! It's well appreciated 🔥
@jpcfjose
@jpcfjose Год назад
Hey! Thank for the tutorial, awesome, do have any corse so we could buy?
@YarivBE
@YarivBE Год назад
Thank you so much for the great feedback Jose! I highly appreciate it 🙂🔥 About the course - not yet - thinking about it and definitely could be ✌️ Just to be more precise - would you mean a Figma course or a UX UI course that of course combines Figma in it? Thanks again!
@peterdaniel7039
@peterdaniel7039 Год назад
Could you perhaps drop the link to the file?
@YarivBE
@YarivBE Год назад
Hi Peter. Sure, i added a link to download the file in the description. Thanks for liking it! 🙂
@peterdaniel7039
@peterdaniel7039 Год назад
Amazing! Thanks!
@peterdaniel7039
@peterdaniel7039 Год назад
If you don't mind, but the file is in a drive on Google, not the file link making it hard to access on a laptop, any idea how to bypass this?
@YarivBE
@YarivBE Год назад
@@peterdaniel7039 Download the file to you computer and use the "import" button on your figma home page to import it to figma 🙂 tell me if it went through ok...
@peterdaniel7039
@peterdaniel7039 Год назад
It worked! Thank you so much
@ilaydadeniz981
@ilaydadeniz981 9 месяцев назад
you changed your mind quite often so it was a bit confusing to follow.
@YarivBE
@YarivBE 9 месяцев назад
Thanks a lot for your feedback - i really appreciate it! Sorry to know that you found the tutorial hard to follow. When i show how i work on something, anything, i also show when i have doubts or when thing not going super smooth, and that perfectly ok to me :) Again, sorry if because of that it was a bit difficult for you to follow. Thanks!
Далее
Qora Gelik
00:26
Просмотров 489 тыс.
The UI/UX of Designing Effective Search Bars
22:09
Просмотров 21 тыс.
How to Design a Search Bar Typing Animation in Figma
13:15
Cool Search Bar Blinking Animation using Figma (2022)
10:53