UIX Nikunj
UIX Nikunj
  • 43
  • 55 092
Full Page Scrolling Animation Website in Figma | Episode-3 | Figma Tutorial
Full Page Scrolling Animation Website in Figma | Episode-3 | Figma Tutorial
Hello creatives 👋🏻
Welcome to the Final Episode of our Scrolling Animation Website Series! 🎉
In this episode, we’ll complete the remaining sections and finalize the full scrolling animation design in Figma. 🚀
💡 What you’ll learn in this video:
Designing the remaining sections step-by-step.
Adding smooth scrolling animations to bring your website to life.
This marks the end of our series, but there’s more exciting content coming soon!
Let me know in the comments how this series has helped you and what tutorials you'd like to see next. 😊
📌 Watch Previous Episodes Here:
Episode 1: ua-cam.com/video/ePQgH9g0Y6k/v-deo.htmlsi=3EWEe3Rd7axOWLRi
Episode 2: ua-cam.com/video/c7UjvOkY2yE/v-deo.htmlsi=Ts74DBLgxXFqwebR
Explore more:
Animated button in figma: ua-cam.com/video/pOJD1zxojYI/v-deo.htmlsi=utAqJuU0XZQuhAY2
Text Animation in figma: ua-cam.com/video/rztBOOxE7FE/v-deo.htmlsi=ZfJwxprHjqjb2-74
Interactive image carousel in figma: ua-cam.com/video/adAe__bq628/v-deo.htmlsi=F-jVBcvfRMZ0DSHZ
👉 Don’t forget to like, share, and subscribe for more tutorials on UI/UX design and animations in Figma.
Stay creative, and see you in the next tutorial! 🎨
#fullpagescroll #scrollinganimation #uixnikunj #figmatutorial #uiuxdesign #figmadesign #webdesign #figmaanimation
Переглядів: 396

Відео

Full Page Scrolling Animation in Figma - About us & Projects | Episode 2 | Figma Tutorial
Переглядів 22412 годин тому
Full Page Scrolling Animation in Figma - About us & Projects | Episode 2 | Figma Tutorial Hello Creatives 👋 Welcome to Episode 2 of our Scrolling Animation Website Series! 🎥 In this tutorial, we’ll design and animate the remaining sections of our website, continuing from where we left off in Episode 1. You’ll learn: How to create seamless scrolling animations. Designing key sections like 'About...
Full Page Scrolling Website animation in Figma - Episode 1 | Figma Tutorial
Переглядів 53819 годин тому
Full Page Scrolling Website animation in Figma - Episode 1 | Figma Tutorial Hello Designers 👋🏻 The wait is over! Learn how to create a stunning full-page scrolling website design with animations in Figma! 🚀 This is Episode 1 of our Full Page Scrolling Landing Page Design and Animation Series, where we’ll focus on designing and animating the Hero Section. From smooth scrolling effects to dynamic...
Animated Glowing Button in Figma | UIXNikunj | Figma Tutorial
Переглядів 20714 днів тому
Animated Glowing Button in Figma | UIXNikunj | Figma Tutorial Hello Creatives 👋 In this video, I’ll show you how to design and prototype an animated glowing button in Figma, featuring a stunning gradient border animation with a glowing effect. This tutorial is perfect for beginners and experienced designers looking to add a modern, eye-catching touch to their designs. What you’ll learn in this ...
Top 5 UI/UX Design Portfolio Inspiration Website 2024
Переглядів 18521 день тому
Top 5 UI/UX Design Portfolio Inspiration Websites 2024 Hello Creatives, Discover this five creative portfolio website designs perfect for UI/UX designers looking for inspiration. From clean layouts to bold typography, these portfolios showcase modern trends that can help you design your own stunning website. Stay inspired and level up your design skills! 💡 Check out other tutorials: Infinite sc...
Text Hover Animation in Figma | Figma Tutorial
Переглядів 72521 день тому
Text Hover Animation in Figma | Figma Tutorial Hello Creatives 👋 In this video I will show you that how to do bouncy text animation in figma 😊 Learn how to create a sleek and interactive text hover animation in Figma with this step-by-step tutorial! Perfect for enhancing your UI designs, this guide will walk you through the entire process of adding dynamic hover effects to your text elements. 👉...
Interactive Image Carousel in Figma | Figma Tutorial
Переглядів 26028 днів тому
Interactive Image Carousel in Figma | Figma Tutorial Hello Creative Designers 👋🏻 Hope you are doing well. ❤️ Learn this how to create a amazing image carousel animation in Figma with this step-by-step tutorial! 🚗💨 In this video, I’ll show you how to design an interactive carousel image slider for a car gallery using sleek porsche car images. 🔧 What You'll Learn: How to design a creative carouse...
Animated Text Scroll Animation in Figma | Horizontal Text Scrolling Tutorial
Переглядів 363Місяць тому
Animated Text Scroll Animation in Figma | Horizontal Text Scrolling Tutorial Hello Creatives 👋🏻 Unlock the magic of animated text scrolling in Figma! 🚀 In this video, I’ll guide you through creating smooth horizontal text auto-scroll animations, perfect for making your designs dynamic and engaging. Learn step-by-step techniques to elevate your UI/UX projects with this modern animation effect. 🔗...
Animated Landing Page in Figma | Episode-3 | Figma Tutorial
Переглядів 842Місяць тому
Animated Landing Page in Figma | Episode-3 | Figma Tutorial
Top 5 Design Portfolio Inspirations for UI/UX Designers
Переглядів 7 тис.2 місяці тому
Top 5 Design Portfolio Inspirations for UI/UX Designers
Animated Landing Page in Figma - Episode 2 | Figma Tutorial
Переглядів 1,3 тис.2 місяці тому
Animated Landing Page in Figma - Episode 2 | Figma Tutorial
Modern Animated Website in Figma | UI Design | Figma
Переглядів 6553 місяці тому
Modern Animated Website in Figma | UI Design | Figma
Responsive Card Design in Figma | Auto Layout in figma
Переглядів 1,5 тис.3 місяці тому
Responsive Card Design in Figma | Auto Layout in figma
Crypto Mobile App Design in Figma | Figma Tutorial
Переглядів 7793 місяці тому
Crypto Mobile App Design in Figma | Figma Tutorial
Full Page Scrolling Animation in Figma | Figma Prototype
Переглядів 2 тис.3 місяці тому
Full Page Scrolling Animation in Figma | Figma Prototype
Animated 3D Landing Page in Figma | Figma Prototype
Переглядів 2,2 тис.4 місяці тому
Animated 3D Landing Page in Figma | Figma Prototype
How to Create an Animated Hero Section in Figma | Figma Tutorial | Figma Prototype
Переглядів 1,3 тис.4 місяці тому
How to Create an Animated Hero Section in Figma | Figma Tutorial | Figma Prototype
Text Animation in Figma | Figma Prototype Tutorial - 2024
Переглядів 7 тис.4 місяці тому
Text Animation in Figma | Figma Prototype Tutorial - 2024
Animated Landing Page in Figma | Figma Prototype | 3D Animation
Переглядів 3,5 тис.4 місяці тому
Animated Landing Page in Figma | Figma Prototype | 3D Animation
Interactive Button Hover Effect in Figma | Tutorial 2024
Переглядів 4184 місяці тому
Interactive Button Hover Effect in Figma | Tutorial 2024
Convert Text into Neon Light using Figma & Adobe Firefly
Переглядів 2624 місяці тому
Convert Text into Neon Light using Figma & Adobe Firefly

КОМЕНТАРІ

  • @hafsa-farooqi
    @hafsa-farooqi День тому

    Thank you for this video series! Watching you create the design and seeing the animations come together was so insightful. I learned a lot just by following along, and I’m excited to apply this to my own Figma projects!

    • @uixnikunj
      @uixnikunj 23 години тому

      @@hafsa-farooqi Sure, You can learn and apply it to your projects. Thank you for appreciation. I care for all creatives and posting amazing content that can help you guys. Stay tuned. More tutorials are on the way. 🤍

  • @uzairdar6920
    @uzairdar6920 2 дні тому

    Amazing. Thank you for the video

    • @uixnikunj
      @uixnikunj 2 дні тому

      @@uzairdar6920 Yeah, many more are on the way for you guys 🤍

  • @HANDLE_MISSING
    @HANDLE_MISSING 2 дні тому

    I bet coding that in css would be painfull.

    • @uixnikunj
      @uixnikunj 2 дні тому

      @@HANDLE_MISSING Yes, maybe 😅

  • @anshujoshi777
    @anshujoshi777 2 дні тому

    This is so wholesome! Thank you Nikunj sir for sharing this wonderful project! 😍😍😍🤗🤗💐💐

    • @uixnikunj
      @uixnikunj 2 дні тому

      @@anshujoshi777 Glad you watched and appreciated. It means a lot. Many more on the way for all creatives out there 🤍

  • @praneethyeddula4780
    @praneethyeddula4780 3 дні тому

    Is that a MacBook pro ?

    • @uixnikunj
      @uixnikunj 3 дні тому

      It's Air M3!

    • @Nazwatonazwa
      @Nazwatonazwa 3 дні тому

      Awww helll nah bro 💀😭​@@uixnikunj

    • @uixnikunj
      @uixnikunj 3 дні тому

      @Nazwatonazwa oh why it’s like that?

  • @HarshBilogs
    @HarshBilogs 5 днів тому

    Great bro really Impressive ❤

    • @uixnikunj
      @uixnikunj 5 днів тому

      @@HarshBilogs Thank you! Means a lot 🤍

  • @Nakul_Upadhyay_0303
    @Nakul_Upadhyay_0303 6 днів тому

    Hey Nikunj! Please make a separate video showing what a UI/UX designer's resume should look like.

    • @uixnikunj
      @uixnikunj 5 днів тому

      Sure! Will upload the full tutorial on how to make UI/UX Designer's portfolio & Resumes. stay tuned! 🤍🤍

    • @lcat8744
      @lcat8744 2 дні тому

      Yes sir, please make a vedio

    • @uixnikunj
      @uixnikunj 2 дні тому

      @ Will do that in upcoming videos

  •  8 днів тому

    Great ❤

  • @_nikunj7
    @_nikunj7 8 днів тому

    Loved it. ❤

    • @uixnikunj
      @uixnikunj 8 днів тому

      @@_nikunj7 Thanks 🤍

  • @anshujoshi777
    @anshujoshi777 8 днів тому

    Wonderful attention to details! Loved this one!! 😍😍😍

    • @uixnikunj
      @uixnikunj 8 днів тому

      @@anshujoshi777 Thank you, more inspiration techniques are on the way. Stay tuned for the next episode 🤍

  • @ioulios12
    @ioulios12 10 днів тому

    You should show the mobile view also...

    • @uixnikunj
      @uixnikunj 10 днів тому

      @@ioulios12 Sure, next time will also have that one.

  • @klutsetony2812
    @klutsetony2812 12 днів тому

    But you didn't show us the prototype

    • @uixnikunj
      @uixnikunj 12 днів тому

      @@klutsetony2812 Watch it again brother, I think you have not watched properly.

  • @bluespiritmusic
    @bluespiritmusic 13 днів тому

    I want to know about interactive 3d model. I can see them in figma community but can’t make it interactive like yours

    • @uixnikunj
      @uixnikunj 13 днів тому

      Will upload the full tutorial on this weekend. Then you will learn how to make that all interactions. Stay tuned!

    • @bluespiritmusic
      @bluespiritmusic 13 днів тому

      @ the tutorial will be based on spline - figma - anima?

    • @uixnikunj
      @uixnikunj 13 днів тому

      Totally in figma only! You don’t need any other ones.

    • @bluespiritmusic
      @bluespiritmusic 12 днів тому

      @ looking forward to it.

  • @mdarbaj-yn2mo
    @mdarbaj-yn2mo 13 днів тому

    awesome

    • @uixnikunj
      @uixnikunj 13 днів тому

      @@mdarbaj-yn2mo Thank you!

  • @tidehunter4082
    @tidehunter4082 14 днів тому

    This looks pretty rough man.

  • @tidehunter4082
    @tidehunter4082 15 днів тому

    This is way to hard to read, the legibility is poor. Cool design though, definitely needs some work

    • @uixnikunj
      @uixnikunj 14 днів тому

      @@tidehunter4082 This layout is showcase, you can find out whole design file in future. Now back to its readability, it is highly maintained from my end in origional layout, you should check that out. Appreciate your attention to detail. Keep it up 🤍

  • @anshujoshi777
    @anshujoshi777 16 днів тому

    That's magical 😻❤

    • @uixnikunj
      @uixnikunj 16 днів тому

      @@anshujoshi777 yesss

  • @kaushikrathod4050
    @kaushikrathod4050 16 днів тому

    Wonderfully explained. Keep it up 👍

  • @kaushikrathod4050
    @kaushikrathod4050 16 днів тому

    😍😍😍

    • @uixnikunj
      @uixnikunj 16 днів тому

      @@kaushikrathod4050 Thank you! ❤️

  • @kaushikrathod4050
    @kaushikrathod4050 16 днів тому

    Great portfolios ❤❤❤

    • @uixnikunj
      @uixnikunj 16 днів тому

      @@kaushikrathod4050 Thank you! 🤍

  • @abcuu99
    @abcuu99 18 днів тому

    Its not working for me can u plz help

    • @uixnikunj
      @uixnikunj 17 днів тому

      @@abcuu99 Sure I can. Let me know what issue you are facing?

    • @abcuu99
      @abcuu99 15 днів тому

      @@uixnikunj when i run prototype the animation is not working

    • @uixnikunj
      @uixnikunj 15 днів тому

      @ Do the same as showing in the video. If you still having issue just let me know. Will figure it out. Thanks 🤍

    • @abcuu99
      @abcuu99 15 днів тому

      @uixnikunj okay 😊 thanks

    • @uixnikunj
      @uixnikunj 15 днів тому

      @@abcuu99 Anytime 😊🤍

  • @NikunjRathod7
    @NikunjRathod7 21 день тому

    Amazing inspirations! ❤

  • @NikunjRathod7
    @NikunjRathod7 24 дні тому

    ❤❤❤❤❤

  • @NikunjRathod7
    @NikunjRathod7 24 дні тому

  • @NikunjRathod7
    @NikunjRathod7 24 дні тому

  • @mouradrzan
    @mouradrzan 24 дні тому

    💯🎯🍁🌱❤top figma💥👌🧰💎☕🎁

    • @uixnikunj
      @uixnikunj 24 дні тому

      @@mouradrzan Thank you 🤍

  • @KowshikJobie
    @KowshikJobie 25 днів тому

    great video thank you

    • @uixnikunj
      @uixnikunj 25 днів тому

      @@KowshikJobie Thank you 🙏

  • @anshujoshi777
    @anshujoshi777 28 днів тому

    Wonderful tutorial sir 😍😍😍

    • @uixnikunj
      @uixnikunj 28 днів тому

      @@anshujoshi777 Thank you so much anshu 🤍

    • @anshujoshi777
      @anshujoshi777 27 днів тому

      @@uixnikunj

  • @AndreiBelCristian
    @AndreiBelCristian 28 днів тому

    Looks awesome. What font did you use?

  • @Pj9956
    @Pj9956 28 днів тому

    ❤❤

    • @uixnikunj
      @uixnikunj 28 днів тому

      Thanks buddy! It's Clash Display ❤️

  • @Nirperetz9
    @Nirperetz9 Місяць тому

    Hey, So i did exactly what you did but when i pull the corner down and right the bottom right object doesn't go down, it stick to the left but not to the right. I also can't find the Constraints..

    • @uixnikunj
      @uixnikunj Місяць тому

      @@Nirperetz9 Hi 👋 just make sure the image is in fill container, from width and height. Select an image: set it width: Fill Height: Fill and here you go.

    • @Nirperetz9
      @Nirperetz9 Місяць тому

      @@uixnikunj Thanks, the image is Fill&Fill, The bottom right button and the left button rating doesn't stick down, only to their sides when i pull the corner to check the responsiveness

    • @Nirperetz9
      @Nirperetz9 Місяць тому

      @@uixnikunj Ok did it again and it worked! thanks a lot please keep making videos!

    • @uixnikunj
      @uixnikunj Місяць тому

      @@Nirperetz9 Yay. You got it. That’s my motto for every designers. Sure I’ll upload more tutorials like this. Keep learning 🤍

  • @ZaraMajeed-n3x
    @ZaraMajeed-n3x Місяць тому

    can you plz give a tutorial on it kindly

    • @uixnikunj
      @uixnikunj Місяць тому

      @@ZaraMajeed-n3x sure, i will upload the full tutorial-soon. Stay tuned! 🤍

    • @uixnikunj
      @uixnikunj 8 днів тому

      The tutorial is out! Watch here: ua-cam.com/video/ePQgH9g0Y6k/v-deo.htmlsi=T53Wlxxg8DXdPcRn

  • @bint_e_arshad
    @bint_e_arshad Місяць тому

    Please tell me

    • @uixnikunj
      @uixnikunj Місяць тому

      @@bint_e_arshad Add 3D PNGs or 3D Gifs into your figma designs, that’s it. No anything needed. It’s easy!

  • @bint_e_arshad
    @bint_e_arshad Місяць тому

    Bro how to make this 3d animation in figma ??

    • @uixnikunj
      @uixnikunj Місяць тому

      @@bint_e_arshad Hey, you can’t do 3D animation in figma, just try the 3D GIF that’s it! 🤍

  • @gariklaw
    @gariklaw Місяць тому

    Hahaha a lot of these are actually pretty bad. Having a "click to enter" is the biggest red flag 🚫. "Learn more" is another offender🧐. Having field labels disappear when you enter info is a major no-no😤. Layout shifts on load--ummmm 😵. Hidden nav😆. Unclear menu button 🙄. Custom cursors 🤮

    • @uixnikunj
      @uixnikunj Місяць тому

      @@gariklaw I appreciate your detailed vision but these portfolios showcase fresh, bold design choices that break away from traditional layouts! Embracing complexity in navigation and visuals is what modern brands are looking for today. Maybe it’s time to explore beyond the old-school design mindset! 😉✨

    • @attaboy8422
      @attaboy8422 19 днів тому

      @@uixnikunj You mean "part of" the modern brands. Majority of clients stays with what is working well and thats because there is no reason to reinvent the wheel. Modern brands is such a small % of clients out there in a mass of different fields world wide. 90% of brands/companies do not go for this kind of stuff. Construction companies, health care, insurance you name it. They dont go for the fancy shiny stuff but rather want their websites to look thrustworthy. You should mention that properly when you make such a video and explicitly say WHO this kind of portfolio will get you because that is literally a niche.

    • @uixnikunj
      @uixnikunj 19 днів тому

      @ Thanks for the words buddy. I know some companies or brands don’t go with this layouts, but I have already mentioned that this portfolios are only for designers who want to showcase their creativity, I think you still need to checkout more website portfolios. I have worked with clients who want same kind of design layouts for their brands. I am not talking about the brands like constructions, healthcare etc, It’s only about digital design agencies, front-end devs, UI/UX Designers, who want to showcase some creative work or skills through unique tastes. 🤍

  • @olaadel5627
    @olaadel5627 Місяць тому

    figma wow ❤

  • @SnapticsCreativeCreators
    @SnapticsCreativeCreators Місяць тому

    can share the file

    • @uixnikunj
      @uixnikunj Місяць тому

      @@SnapticsCreativeCreators The full tutorial is coming soon, and i will share the figma file.

    • @uixnikunj
      @uixnikunj 8 днів тому

      The full tutorial is out! Watch here: ua-cam.com/video/ePQgH9g0Y6k/v-deo.htmlsi=T53Wlxxg8DXdPcRn

  •  Місяць тому

    Great work. I am tuned for the upcoming tutorial. When?

    • @uixnikunj
      @uixnikunj Місяць тому

      Sure. It will coming on next weekend.

    •  7 днів тому

      @@uixnikunj when? ❤

    • @uixnikunj
      @uixnikunj 7 днів тому

      Yes, I know it’s been a month. Due some issues i am not able to upload the tutorial. But don’t worry, will upload after our scrolling website animation series. Stay tuned. 🤍

  • @shankarsaud1718
    @shankarsaud1718 2 місяці тому

    Figma

    • @uixnikunj
      @uixnikunj 2 місяці тому

      www.figma.com/design/k4EgKqRCjfT7Fb1aD29pIt/Modern-Landing-Page---UIXNikunj?node-id=0-1&t=C3WhEmYMiuRExovv-1

  • @mahmudajhumur.official
    @mahmudajhumur.official 2 місяці тому

    Why do you think this is Best? What is the reason behind?

    • @uixnikunj
      @uixnikunj 2 місяці тому

      @@mahmudajhumur.official Because they have kept minimalism layout and focused points in their sites. I know there are other sites as well but I thought this one are really good.

  • @anshujoshi777
    @anshujoshi777 2 місяці тому

    Fantastic tutorial sir!! 😍😍😍💐

    • @uixnikunj
      @uixnikunj 2 місяці тому

      @@anshujoshi777 Thank you ☺️

  • @_nikunj7
    @_nikunj7 2 місяці тому

  • @_nikunj7
    @_nikunj7 2 місяці тому

    😍

  • @NikunjRathod7
    @NikunjRathod7 2 місяці тому

  • @nidhimehta4720
    @nidhimehta4720 2 місяці тому

    I am not able to downlaod these gifs...they get downloaded as .webp and do not get imported in figma as a video :((

    • @uixnikunj
      @uixnikunj 2 місяці тому

      it is a png image, just add an prototype.

  • @cirens777
    @cirens777 2 місяці тому

    Amazing!

    • @uixnikunj
      @uixnikunj 2 місяці тому

      @@cirens777 Thank you 🤍

  • @motivationalline4061
    @motivationalline4061 2 місяці тому

    "Can you please provide this tutorial for us?" 😊

    • @uixnikunj
      @uixnikunj 2 місяці тому

      @@motivationalline4061 Tutorial on how to make this kind of portfolios, right?