- 43
- 55 092
UIX Nikunj
India
Приєднався 28 лип 2024
Hello there! I'm Nikunj, a self-taught UI/UX designer. Crafting digital experiences through user interfaces, user experiences, and visual animations.
On this channel, I share my expertise by creating UI/UX design videos, UI animation tutorials, and how-to guides for web design and interaction prototyping. I primarily use no-code tools like Figma and Framer to bring these designs to life.
Join me as we explore the world of design and bring ideas to reality! Let's make something DOPE together!
On this channel, I share my expertise by creating UI/UX design videos, UI animation tutorials, and how-to guides for web design and interaction prototyping. I primarily use no-code tools like Figma and Framer to bring these designs to life.
Join me as we explore the world of design and bring ideas to reality! Let's make something DOPE together!
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
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
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!
@@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. 🤍
Amazing. Thank you for the video
@@uzairdar6920 Yeah, many more are on the way for you guys 🤍
I bet coding that in css would be painfull.
@@HANDLE_MISSING Yes, maybe 😅
This is so wholesome! Thank you Nikunj sir for sharing this wonderful project! 😍😍😍🤗🤗💐💐
@@anshujoshi777 Glad you watched and appreciated. It means a lot. Many more on the way for all creatives out there 🤍
Is that a MacBook pro ?
It's Air M3!
Awww helll nah bro 💀😭@@uixnikunj
@Nazwatonazwa oh why it’s like that?
Great bro really Impressive ❤
@@HarshBilogs Thank you! Means a lot 🤍
Hey Nikunj! Please make a separate video showing what a UI/UX designer's resume should look like.
Sure! Will upload the full tutorial on how to make UI/UX Designer's portfolio & Resumes. stay tuned! 🤍🤍
Yes sir, please make a vedio
@ Will do that in upcoming videos
Great ❤
Loved it. ❤
@@_nikunj7 Thanks 🤍
Wonderful attention to details! Loved this one!! 😍😍😍
@@anshujoshi777 Thank you, more inspiration techniques are on the way. Stay tuned for the next episode 🤍
You should show the mobile view also...
@@ioulios12 Sure, next time will also have that one.
But you didn't show us the prototype
@@klutsetony2812 Watch it again brother, I think you have not watched properly.
I want to know about interactive 3d model. I can see them in figma community but can’t make it interactive like yours
Will upload the full tutorial on this weekend. Then you will learn how to make that all interactions. Stay tuned!
@ the tutorial will be based on spline - figma - anima?
Totally in figma only! You don’t need any other ones.
@ looking forward to it.
awesome
@@mdarbaj-yn2mo Thank you!
This looks pretty rough man.
This is way to hard to read, the legibility is poor. Cool design though, definitely needs some work
@@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 🤍
That's magical 😻❤
@@anshujoshi777 yesss
Wonderfully explained. Keep it up 👍
😍😍😍
@@kaushikrathod4050 Thank you! ❤️
Great portfolios ❤❤❤
@@kaushikrathod4050 Thank you! 🤍
Its not working for me can u plz help
@@abcuu99 Sure I can. Let me know what issue you are facing?
@@uixnikunj when i run prototype the animation is not working
@ Do the same as showing in the video. If you still having issue just let me know. Will figure it out. Thanks 🤍
@uixnikunj okay 😊 thanks
@@abcuu99 Anytime 😊🤍
Amazing inspirations! ❤
❤❤❤❤❤
❤
❤
💯🎯🍁🌱❤top figma💥👌🧰💎☕🎁
@@mouradrzan Thank you 🤍
great video thank you
@@KowshikJobie Thank you 🙏
Wonderful tutorial sir 😍😍😍
@@anshujoshi777 Thank you so much anshu 🤍
@@uixnikunj
Looks awesome. What font did you use?
❤❤
Thanks buddy! It's Clash Display ❤️
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..
@@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.
@@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
@@uixnikunj Ok did it again and it worked! thanks a lot please keep making videos!
@@Nirperetz9 Yay. You got it. That’s my motto for every designers. Sure I’ll upload more tutorials like this. Keep learning 🤍
can you plz give a tutorial on it kindly
@@ZaraMajeed-n3x sure, i will upload the full tutorial-soon. Stay tuned! 🤍
The tutorial is out! Watch here: ua-cam.com/video/ePQgH9g0Y6k/v-deo.htmlsi=T53Wlxxg8DXdPcRn
Please tell me
@@bint_e_arshad Add 3D PNGs or 3D Gifs into your figma designs, that’s it. No anything needed. It’s easy!
Bro how to make this 3d animation in figma ??
@@bint_e_arshad Hey, you can’t do 3D animation in figma, just try the 3D GIF that’s it! 🤍
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 🤮
@@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! 😉✨
@@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.
@ 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. 🤍
figma wow ❤
can share the file
@@SnapticsCreativeCreators The full tutorial is coming soon, and i will share the figma file.
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?
Sure. It will coming on next weekend.
@@uixnikunj when? ❤
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. 🤍
Figma
www.figma.com/design/k4EgKqRCjfT7Fb1aD29pIt/Modern-Landing-Page---UIXNikunj?node-id=0-1&t=C3WhEmYMiuRExovv-1
Why do you think this is Best? What is the reason behind?
@@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.
Fantastic tutorial sir!! 😍😍😍💐
@@anshujoshi777 Thank you ☺️
❤
😍
I am not able to downlaod these gifs...they get downloaded as .webp and do not get imported in figma as a video :((
it is a png image, just add an prototype.
Amazing!
@@cirens777 Thank you 🤍
"Can you please provide this tutorial for us?" 😊
@@motivationalline4061 Tutorial on how to make this kind of portfolios, right?