No video

Advanced Typewriter Animation in Figma

In this video, I'm going to show you how to create a typewriter effect in Figma using interactive components.
Try Figma for free:
bit.ly/3LiRVEF
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/45KHoKJ
📸 Instagram: uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.

Пікірлер: 65

  • @jimeeroquai
    @jimeeroquai10 ай бұрын

    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

    10 ай бұрын

    Thanks. That's a good idea.

  • @evelynsouza4617
    @evelynsouza4617 Жыл бұрын

    Thanks, Arash! Your demo and hands-on helped me a lot!

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    No problem. Glad it helped.

  • @cslandcsland
    @cslandcsland11 ай бұрын

    There is a plug-in that create typing effect called typeff

  • @trendingadobe

    @trendingadobe

    11 ай бұрын

    How to use this???please mention

  • @jameralist
    @jameralist Жыл бұрын

    thank you for the tutorial, Arash. It really shows how components works

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    You're welcome!

  • @doncecone
    @doncecone Жыл бұрын

    Helpful as always, thanks!

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thanks.

  • @sansthitaborbora8845
    @sansthitaborbora8845 Жыл бұрын

    Thank you! That was really helpful

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    No problem. Glad it was helpful.

  • @ddemontabert
    @ddemontabertАй бұрын

    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 !

  • @ozgurilkimen263
    @ozgurilkimen263 Жыл бұрын

    you explained it like it was easy thanks!

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thank you so much.

  • @fr._.1602
    @fr._.160223 күн бұрын

    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!!

  • @euginrobinson
    @euginrobinson3 ай бұрын

    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
    @disha98768 ай бұрын

    I donot see the same options to set the time in my figma version, i'm sure its the latest that got downloaded

  • @basuki094
    @basuki0943 ай бұрын

    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.

  • @nithishkumar6808
    @nithishkumar6808 Жыл бұрын

    Awesome brother thank you so much 🎉

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    No problem.

  • @iceWallowNut
    @iceWallowNut7 ай бұрын

    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

  • @mostafaazzouz591
    @mostafaazzouz5916 ай бұрын

    Lovely i need more animations ❤

  • @DesignWithArash

    @DesignWithArash

    6 ай бұрын

    Thanks.

  • @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.

  • @Almacky
    @Almacky10 ай бұрын

    Thank you Arash 😊

  • @DesignWithArash

    @DesignWithArash

    10 ай бұрын

    No problem.

  • @SweSwe-pq8bt
    @SweSwe-pq8bt17 күн бұрын

    Thank you so much, bro.

  • @DesignWithArash

    @DesignWithArash

    11 күн бұрын

    No problem.

  • @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! 👍

  • @tusharsinha1301
    @tusharsinha1301 Жыл бұрын

    My man is doing great 👍🏻

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thanks a lot.

  • @Mohammadrichlifestyle
    @Mohammadrichlifestyle Жыл бұрын

    so helpful

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Glad it was helpful!

  • @loomonda18
    @loomonda1810 ай бұрын

    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-

    10 ай бұрын

    same here,but i fixed it, just watch the video closely and follow all the instructions

  • @loomonda18

    @loomonda18

    10 ай бұрын

    I did it so many times haha - I think pressing auto layout helped tho@@bugIO-

  • @bugIO-

    @bugIO-

    9 ай бұрын

    surely bro @@loomonda18

  • @obyafam

    @obyafam

    9 ай бұрын

    the contraints on the texts should be set to the left, it'll keep in place.

  • @loomonda18

    @loomonda18

    9 ай бұрын

    @@obyafam thank you!

  • @nehasalma9083
    @nehasalma90834 ай бұрын

    thanks for this detail video plz make more animations video for Figma

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    No problem. Sure.

  • @vmartme
    @vmartme5 ай бұрын

    Nice thank you so much! It's there any way to make whole paragraph not just one line of text?

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    No problem. You can do that but it would be too time-consuming and it's not practical.

  • @raphaelobasijnr1458
    @raphaelobasijnr1458 Жыл бұрын

    Great 👍

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    Thank you 👍

  • @ArminmoTV
    @ArminmoTV Жыл бұрын

    آرش جان عالی هستی بیشتر ویدیو انیمیشن بده 🤩

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    ممنونم. حتما.

  • @user-pv7wp3cl4e
    @user-pv7wp3cl4e Жыл бұрын

    I did only cursor part exactly same but my cursor is not bllinking what could have gone wrong

  • @olwehzun9684

    @olwehzun9684

    8 ай бұрын

    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

  • @user-yo1be6nb7j
    @user-yo1be6nb7j10 ай бұрын

    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

    10 ай бұрын

    It's a bit complicated to recreate it using variables but I will create a tutorial about it.

  • @mahmoudrezamohammadnejad8286
    @mahmoudrezamohammadnejad8286 Жыл бұрын

    سلام سال نو مبارک باد ، در خصوص اتو لی اوت خیلی مشکل دارم شما ویدیو آموزشی در این خصوص ندارید ؟ سپاس

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    سلام. ممنونم. سال نو شما هم مبارک باشه. بله براتون توی کامنت قبلیتون یک لینک گذاشتم. توی چنل هست یک ویدیو اختصاصی در این باره.

  • @wolvy77
    @wolvy776 ай бұрын

    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

    6 ай бұрын

    Please make sure you followed all the steps. The order of steps matters.

  • @payalsharma5408
    @payalsharma5408 Жыл бұрын

    Do we need the knowledge of photoshop or illustrator or FIGMa will do everything

  • @DesignWithArash

    @DesignWithArash

    Жыл бұрын

    No, Figma is sufficient.

  • @aminaashfaq778
    @aminaashfaq7785 ай бұрын

    I don't know where i'm doing wrong 😢 but when i'm moving cursor, all the my words going right side 😢

  • @innaoliynik6113
    @innaoliynik61133 ай бұрын

    красава

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Thanks.

  • @arshiaranjbar7063
    @arshiaranjbar70632 ай бұрын

    dadashhh , such a disaster

Келесі