Тёмный

Advanced Typewriter Animation in Figma 

DesignWithArash
Подписаться 134 тыс.
Просмотров 64 тыс.
50% 1

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

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 71   
@cslandcsland
@cslandcsland Год назад
There is a plug-in that create typing effect called typeff
@trendingadobe
@trendingadobe Год назад
How to use this???please mention
@djashawe88923
@djashawe88923 Год назад
Thanks for the great tutorials as always. Instead of hiding the fill, we can also reduce the opacity of the Layer or Fill to 0 as well, right? I'm always in doubt whether it's best to turn the opacity down to 0 or reduce the opacity of the Fill to 0 although the result looks exactly the same.
@DesignWithArash
@DesignWithArash Год назад
No problem. If you have only one Fill then there is no difference but if you have multiple Fills it's better to turn the layer's opacity down.
@djashawe88923
@djashawe88923 Год назад
@@DesignWithArash Thanks for the clear answer! Keep up the good work! Your tutorials are gold! 👍
@jimeeroquai
@jimeeroquai Год назад
Love your tutorials, and this is no exception! I changed the after delay rate with every interaction so it feels more "random" and like a human is actually typing, to great effect ;)
@DesignWithArash
@DesignWithArash Год назад
Thanks. That's a good idea.
@mobman5375
@mobman5375 Год назад
everythin is perfect!! but i have a question like why didnt you used rectangle tool or maybe "|" to make the carrot
@DesignWithArash
@DesignWithArash Год назад
I always prefer a Frame because it offers more flexibility. In many cases it doesn't make any difference but in some cases it's so beneficial.
@Dziamero
@Dziamero 2 месяца назад
Fine! But at the end you made a minor mistake for Figma. In interactions you haven't made changes to connect the next variant. The fact that with this action you turn off the animation. So in general everything is OK! At the end I wanted to look your FREE UI/UX Design e-book, but didn't receive any messages from you. What is the problem?
@euginrobinson
@euginrobinson 6 месяцев назад
HI Arash, what an amazing video! But when I tried to make it work, the caret is not sticking to the right side of the frame as i resized the parent frame to mask the letters, despite having gone by what you have shown in the video, thats, I have used the clip content for the parent frame and then had the caret stick to the right of the frame by checking the Right and Top in the constraints menu.... but then when I reduced the size of the parent frame to mask the letters, even the caret is getting masked. Am I missing something in this? Please comment if you can, as I am doing an animation for a website at the moment. Thanks so much for your time and the video.
@disha9876
@disha9876 11 месяцев назад
I donot see the same options to set the time in my figma version, i'm sure its the latest that got downloaded
@0001-exe
@0001-exe 3 дня назад
Thank you so much for this!
@leoulouchlamperz1055
@leoulouchlamperz1055 2 месяца назад
very lengthy process for a simple operation
@PritiGurudasani
@PritiGurudasani Год назад
I did only cursor part exactly same but my cursor is not bllinking what could have gone wrong
@olwehzun9684
@olwehzun9684 11 месяцев назад
i am also experiencing the same problem even after using a plugin, it still doesn't do what needs to be done to the pots
@loomonda18
@loomonda18 Год назад
Great tutorial - thank you! I looped it back to the first element as well, so it continues to play. Question though, is there a way to keep the text from moving when you resize/adjust the frame size (when hiding/showing the letters). When I first did it, all of the letters inside the frame started moving/shifting, rather than staying static and me revealing one-by-one. Somehow, later on, it became static like your video, but I have no clue how...is there a way to do this? I tried holding Command, but when I did that, the cursor also went away, so it wasn't exactly like your video.
@bugIO-
@bugIO- Год назад
same here,but i fixed it, just watch the video closely and follow all the instructions
@loomonda18
@loomonda18 Год назад
I did it so many times haha - I think pressing auto layout helped tho@@bugIO-
@bugIO-
@bugIO- Год назад
surely bro @@loomonda18
@obyafam
@obyafam Год назад
the contraints on the texts should be set to the left, it'll keep in place.
@loomonda18
@loomonda18 Год назад
@@obyafam thank you!
@fr._.1602
@fr._.1602 3 месяца назад
Hi, found this on June 13th 2024 here. I'd say your tutorial is the best so far compared to others on this particular topic. But I wonder if the typing is in front instead, that would've mess with my entire sentences positions. Any ideas to do that? Many thanks!!
@ibrahimsoukak437
@ibrahimsoukak437 Месяц назад
That was a crazily helpful tutorial. Thanks a lot for sharing. However, I'm interested in applying the same effect for a really large text, and wondering if there's even an easier way to achieve that without creating all those variants.
@ddemontabert
@ddemontabert 3 месяца назад
Hi ! This video is so helpful in creating these typewriting variants, thank you so much ! Is there any way we can export the frame in which the typewriter variant is added? I found that LottieFiles does not seem to allow this. Thanks again !
@arshiaranjbar7063
@arshiaranjbar7063 5 месяцев назад
dadashhh , such a disaster
@aminaashfaq778
@aminaashfaq778 8 месяцев назад
I don't know where i'm doing wrong 😢 but when i'm moving cursor, all the my words going right side 😢
@basuki094
@basuki094 6 месяцев назад
Is there any new and efficient way to do it using variables? I want to use it for the search field for the quick commerce grocery app.
@ibrahimsoukak437
@ibrahimsoukak437 Месяц назад
wow! 👏copying and pasting the connection was sort of new to me.
@iceWallowNut
@iceWallowNut 10 месяцев назад
can you teach us how to export this text animation ? when i try to export it to lottieAnimations it does not appear the same as when i preview it on Figma
@wolvy77
@wolvy77 9 месяцев назад
Not sure what I'm doing wrong but I tried it several times but when it comes to the part where I change the word, it wont change at all. It keeps defaulting to the same main word used. Anybody have an idea why is this happening?
@DesignWithArash
@DesignWithArash 8 месяцев назад
Please make sure you followed all the steps. The order of steps matters.
@vmartme
@vmartme 8 месяцев назад
Nice thank you so much! It's there any way to make whole paragraph not just one line of text?
@DesignWithArash
@DesignWithArash 7 месяцев назад
No problem. You can do that but it would be too time-consuming and it's not practical.
@payalsharma5408
@payalsharma5408 Год назад
Do we need the knowledge of photoshop or illustrator or FIGMa will do everything
@DesignWithArash
@DesignWithArash Год назад
No, Figma is sufficient.
@NargessShabani
@NargessShabani Год назад
I tried to do this with variables and bind it to width but I was unsuccessful I can't loop it. It just goes three letters forward
@DesignWithArash
@DesignWithArash Год назад
It's a bit complicated to recreate it using variables but I will create a tutorial about it.
@nehasalma9083
@nehasalma9083 7 месяцев назад
thanks for this detail video plz make more animations video for Figma
@DesignWithArash
@DesignWithArash 7 месяцев назад
No problem. Sure.
@xinyueyang1962
@xinyueyang1962 2 месяца назад
thank you
@mahmoudrezamohammadnejad8286
سلام سال نو مبارک باد ، در خصوص اتو لی اوت خیلی مشکل دارم شما ویدیو آموزشی در این خصوص ندارید ؟ سپاس
@DesignWithArash
@DesignWithArash Год назад
سلام. ممنونم. سال نو شما هم مبارک باشه. بله براتون توی کامنت قبلیتون یک لینک گذاشتم. توی چنل هست یک ویدیو اختصاصی در این باره.
@innaoliynik6113
@innaoliynik6113 6 месяцев назад
красава
@DesignWithArash
@DesignWithArash 5 месяцев назад
Thanks.
@ArminmoTV
@ArminmoTV Год назад
آرش جان عالی هستی بیشتر ویدیو انیمیشن بده 🤩
@DesignWithArash
@DesignWithArash Год назад
ممنونم. حتما.
@SweSwe-pq8bt
@SweSwe-pq8bt 3 месяца назад
Thank you so much, bro.
@DesignWithArash
@DesignWithArash 3 месяца назад
No problem.
@mostafaazzouz591
@mostafaazzouz591 9 месяцев назад
Lovely i need more animations ❤
@DesignWithArash
@DesignWithArash 8 месяцев назад
Thanks.
@nithishkumar6808
@nithishkumar6808 Год назад
Awesome brother thank you so much 🎉
@DesignWithArash
@DesignWithArash Год назад
No problem.
@unstablejamil
@unstablejamil Год назад
thank you for the tutorial, Arash. It really shows how components works
@DesignWithArash
@DesignWithArash Год назад
You're welcome!
@ozgurilkimen263
@ozgurilkimen263 Год назад
you explained it like it was easy thanks!
@DesignWithArash
@DesignWithArash Год назад
Thank you so much.
@sansthitaborbora8845
@sansthitaborbora8845 Год назад
Thank you! That was really helpful
@DesignWithArash
@DesignWithArash Год назад
No problem. Glad it was helpful.
@evelynsouza4617
@evelynsouza4617 Год назад
Thanks, Arash! Your demo and hands-on helped me a lot!
@DesignWithArash
@DesignWithArash Год назад
No problem. Glad it helped.
@tusharsinha1301
@tusharsinha1301 Год назад
My man is doing great 👍🏻
@DesignWithArash
@DesignWithArash Год назад
Thanks a lot.
@doncecone
@doncecone Год назад
Helpful as always, thanks!
@DesignWithArash
@DesignWithArash Год назад
Thanks.
@Almacky
@Almacky Год назад
Thank you Arash 😊
@DesignWithArash
@DesignWithArash Год назад
No problem.
@Mohammadrichlifestyle
@Mohammadrichlifestyle Год назад
so helpful
@DesignWithArash
@DesignWithArash Год назад
Glad it was helpful!
@raphaelobasijnr1458
@raphaelobasijnr1458 Год назад
Great 👍
@DesignWithArash
@DesignWithArash Год назад
Thank you 👍
Далее
Best Mockup Tools for UI/UX Designers (2024)
2:57
Просмотров 108 тыс.
Bearwolf - GODZILLA Пародия Beatrise
00:33
Просмотров 221 тыс.
Website Animations Using ONLY Figma
15:21
Просмотров 285 тыс.
Creating Text Animations in Figma: Tutorial & Tips
9:24
Scroll Animations in Figma! (Without scroll support)
22:56
AirPods Pro Animation in Figma | Beginner Tutorial
11:21
Menu Animation in Figma
4:52
Просмотров 650 тыс.
If I started UI/UX Design in 2024, I'd Do This!
8:22
Просмотров 235 тыс.
How To Recreate AMAZING Text Animations in Figma
8:51
Bearwolf - GODZILLA Пародия Beatrise
00:33
Просмотров 221 тыс.