- 84
- 533 513
DS CODE
United States
เข้าร่วมเมื่อ 9 ต.ค. 2020
Hi, Welcome to the DS Code youtube channel. All my best viewers thank you to visit my channel. I will give you to about Website designing, web development, programming, UI UX design, tech news, tech tutorials, and creating Mobile applications. Please subscribe to our channel to get new videos.
Creating an Animated Mobile App Navigation Menu Bar: UI/UX Design & Prototyping (App Sidebar)
Hi everyone! In this Figma prototyping tutorial We're diving into a delightful journey of Figma design, crafting an effective and visually captivating animated mobile sidebar with interactive components.
Figma is free to use-Sign up now! (+ free files 🎁)
👉 psxid.figma.com/dkbklpwripx3
Plan your design ideas with FigJam AI-Try it now!
👉 psxid.figma.com/zj0gos3g3prm-7v0ro9
Unlock advanced features with Figma Pro!
👉 psxid.figma.com/7mhteo1pff9i-ouafk
Got questions or suggestions? Drop them in the comments below.
Want to Collaborate on a Project? Let's chat!
📩 Contact me: smartcode200@gmail.com
More design tutorials:
Loading Animation in Figma: th-cam.com/video/x2C9ksYKk3Y/w-d-xo.html
Fashion website design in figma: th-cam.com/video/fQc0hJfkYUQ/w-d-xo.html
Functional Calendar UI Design: th-cam.com/video/CyqevLzBgJA/w-d-xo.html
Food Order Mobile App Design in Figma: th-cam.com/video/Yf00MKUfcIY/w-d-xo.html
Home Buying Website Landing Page Design: th-cam.com/video/fYLwNmy8FBE/w-d-xo.html
FREE resource file mentioned in this video (Mobile App Navigation Side Menu Bar UI template)
👉 bit.ly/24UITemplate
Enjoyed this Tutorial? Hit the Like Button and Subscribe for More!
Don't miss out on future UX/UI, app design, and web design tutorials.
SUBSCRIBE to our channel: th-cam.com/users/dscodetech
🔔 Stay Connected:
Facebook - bit.ly/36KsK8X
Instagram - bit.ly/3xGDbXR
*This page contains affiliate links. Your support helps us continue creating valuable content!
-------------------------
#MenuBar #AppDesign #NavigationBar #FigmaTutorial #FigmaAnimation #Prototyping
Figma is free to use-Sign up now! (+ free files 🎁)
👉 psxid.figma.com/dkbklpwripx3
Plan your design ideas with FigJam AI-Try it now!
👉 psxid.figma.com/zj0gos3g3prm-7v0ro9
Unlock advanced features with Figma Pro!
👉 psxid.figma.com/7mhteo1pff9i-ouafk
Got questions or suggestions? Drop them in the comments below.
Want to Collaborate on a Project? Let's chat!
📩 Contact me: smartcode200@gmail.com
More design tutorials:
Loading Animation in Figma: th-cam.com/video/x2C9ksYKk3Y/w-d-xo.html
Fashion website design in figma: th-cam.com/video/fQc0hJfkYUQ/w-d-xo.html
Functional Calendar UI Design: th-cam.com/video/CyqevLzBgJA/w-d-xo.html
Food Order Mobile App Design in Figma: th-cam.com/video/Yf00MKUfcIY/w-d-xo.html
Home Buying Website Landing Page Design: th-cam.com/video/fYLwNmy8FBE/w-d-xo.html
FREE resource file mentioned in this video (Mobile App Navigation Side Menu Bar UI template)
👉 bit.ly/24UITemplate
Enjoyed this Tutorial? Hit the Like Button and Subscribe for More!
Don't miss out on future UX/UI, app design, and web design tutorials.
SUBSCRIBE to our channel: th-cam.com/users/dscodetech
🔔 Stay Connected:
Facebook - bit.ly/36KsK8X
Instagram - bit.ly/3xGDbXR
*This page contains affiliate links. Your support helps us continue creating valuable content!
-------------------------
#MenuBar #AppDesign #NavigationBar #FigmaTutorial #FigmaAnimation #Prototyping
มุมมอง: 1 493
วีดีโอ
Stunning Home Buying Website Landing Page Design | Figma Tutorial & UI/UX Design
มุมมอง 1.7Kหลายเดือนก่อน
Are you ready to design a stunning landing page for a home buying website? In this Figma tutorial We're diving into a delightful journey of Figma design, crafting an effective and visually captivating landing page that will engage audience and drive conversions. Figma is free to use-Sign up now! ( free files 🎁) 👉 psxid.figma.com/dkbklpwripx3 Plan your design ideas with FigJam AI-Try it now! 👉 p...
Loading Animation in Figma (Spinner)
มุมมอง 6403 หลายเดือนก่อน
Hi there! In this prototyping tutorial, we'll explore the process of creating a Loading Animation with figma interactive components. We're diving into a delightful journey of Figma design prototypes, crafting a visually stunning loading spinner. Figma is free to use-Sign up now! ( free files 🎁) 👉 psxid.figma.com/dkbklpwripx3 Plan your design ideas with FigJam AI-Try it now! 👉 psxid.figma.com/zj...
E-Learning App UI/UX Design in Figma (Wireframe & Prototype)
มุมมอง 5K3 หลายเดือนก่อน
Design an immersive and user-centric E-Learning app interface from scratch with our comprehensive tutorial in Figma! We're diving into a delightful journey of Figma design, crafting a visually stunning and interactive e-learning app. Figma is free to use-Sign up now! ( free files 🎁) 👉 psxid.figma.com/dkbklpwripx3 Plan your design ideas with FigJam AI-Try it now! 👉 psxid.figma.com/zj0gos3g3prm-7...
Animated Mobile Navigation Menu Bar Design in Figma | Bottom Navbar Animation
มุมมอง 2.2K4 หลายเดือนก่อน
Hi everyone! In this video, we'll explore the process of creating an Animated mobile navigation menu bar with liquid animation using Figma. We're diving into a delightful journey of Figma design, crafting a visually stunning and interactive mobile navigation bar. Figma is free to use-Sign up now! ( free files 🎁) 👉 psxid.figma.com/dkbklpwripx3 Plan your design ideas with FigJam AI-Try it now! 👉 ...
Figma Ice Cream Slider with Carousel Animation | Landing Page UI Design
มุมมอง 2K5 หลายเดือนก่อน
Create an Ice Cream slider with Carousel Animation using Figma's powerful Smart Animate feature. We're diving into a delightful journey of Figma design, crafting a visually stunning and interactive Ice Cream Slider. Figma is free to use-Sign up now! ( free files 🎁) 👉 psxid.figma.com/dkbklpwripx3 Plan your design ideas with FigJam AI-Try it now! 👉 psxid.figma.com/zj0gos3g3prm-7v0ro9 FigJam is a ...
Forgot Password UI/UX Design and Prototyping in Figma
มุมมอง 2.8K5 หลายเดือนก่อน
Hi everyone! In this video, we'll explore the process of creating a secure and user-friendly password recovery experience using Figma's powerful design and prototyping features. Whether you're a seasoned Figma enthusiast or just getting started, this tutorial is designed to empower you with the skills needed to craft an intuitive and secure forgot password flow. Use Figma to design this UI/UX-S...
How to Transform Figma Designs into Real Webflow Websites with Adaptable | Figma to Webflow
มุมมอง 6326 หลายเดือนก่อน
Hi everyone! In this tutorial, Learn how to turn your figma designs into real webflow websites with Adaptable. If you're looking for a B2B service that elevates your Webflow development game-Adaptable is the game-changer you've been waiting for. Learn, Create, and Elevate Your Webflow Development Game with Adaptable! Get started Adaptable for free: www.adaptableco.com Timestamps: 00:00 - Intro ...
Figma Web Design: Modern Interior Design Website (+ free files 🎁)
มุมมอง 7K7 หลายเดือนก่อน
Hi there! In this video, we'll dive into the world of web design and create a modern and luxurious Interior Design website from scratch. Figma website design for Interior Services. Let's bring your interior design dreams to life with Figma! Get started Figma for free-Sign up now! 👉 psxid.figma.com/dkbklpwripx3 Use FigJam AI to brainstorm your design ideas-Try it now! 👉 psxid.figma.com/zj0gos3g3...
How to Add a Chatbot For Your Ecommerce Website | Integrate a Chatbot
มุมมอง 2937 หลายเดือนก่อน
Start for free and get 20 % Off the Tidio Premium Chatbot: www.tidio.com/get/dscode Hi everyone! In this comprehensive tutorial, learn how to integrate a chatbot for your ecommerce website using Tidio. Chatbots are a game-changer for boosting sales, capturing leads, and delivering top-notch customer service, and we'll show you how to do it step by step. By integrating a pre-made chatbot, you're...
OTP Verification App Screen UI/UX Design And Prototype | Figma Tutorial
มุมมอง 4.1K8 หลายเดือนก่อน
Create seamless UI/UX for an OTP Verification app screen using figma from a simple sketch to a fully interactive prototype with Figma Smart animate. we'll cover OTP Verification, Verification Code input, and the Verification Success screens. Watch how we connect them with Figma's prototyping for a flawless user experience. Got questions or suggestions? Drop them in the comments below ⬇ Want to ...
Code 10x Faster Using ChatGPT | Learn How to Create a Functioning Sign-Up Form With Ai
มุมมอง 1.2K8 หลายเดือนก่อน
In this tutorial, learn how to create a Sin-Up form using DevAssistant, a powerful AI tool designed to supercharge your coding skills. You'll discover how AI can streamline your coding experience, making it more efficient and productive. We'll guide you through the step-by-step process of building a functioning Sign-Up form from scratch and seamlessly integrating it with your backend. Discover ...
Figma Tutorial: Animated Image Carousel Slider
มุมมอง 7K9 หลายเดือนก่อน
Hi there! Learn how to create animated Image Carousel Slider for your landing page using figma Components and Smart animate. I'll walk you through all the steps to create this slider from a simple sketch to a fully-prototyped, eye-catching carousel slider. Image sliders are all the rage in modern web design, and we'll show you how to craft one that not only captures attention but keeps your aud...
Mobile App Design in Figma (UX/UI Design, Prototype, Export)
มุมมอง 26K9 หลายเดือนก่อน
In this video, we are going to learn how to design a mobile app for a travel agency in Figma from creating stunning UX/UI designs to prototyping and exporting assets for development. Have questions about figma or prototyping? Drop them in the comments below ⬇ Want to Collaborate on a Project? Let's Connect! 📩 Contact me: smartcode200@gmail.com 🎁 FREE resource file mentioned in this video (Mobil...
Animated Arc Text in Figma With Interactive Components | Figma Animations
มุมมอง 42910 หลายเดือนก่อน
Learn to create an animated arc text in figma with figma interactive components from scratch to complete animating (rotating) text with prototyping. Rotating text animation in figma. We'll animate the text by prototyping after we create the circular text. Have questions about Figma? Drop them in the comments below ⬇️ 🎁 FREE file mentioned in this video (Animated Text UI template): www.figma.com...
Website Design For a Restaurant in Figma (UX/UI Design)
มุมมอง 3.4K10 หลายเดือนก่อน
Website Design For a Restaurant in Figma (UX/UI Design)
Create a Modal Popup Using HTML, CSS and JavaScript | Animated Dialog box (Popup window)
มุมมอง 56910 หลายเดือนก่อน
Create a Modal Popup Using HTML, CSS and JavaScript | Animated Dialog box (Popup window)
Functional Calendar (Date picker) UI Design in Figma | Interactive Components
มุมมอง 34K10 หลายเดือนก่อน
Functional Calendar (Date picker) UI Design in Figma | Interactive Components
Travel Mobile App Design in Figma (UI/UX, Prototype)
มุมมอง 10K11 หลายเดือนก่อน
Travel Mobile App Design in Figma (UI/UX, Prototype)
Creative Loading animation | Figma Interactive Components
มุมมอง 27K11 หลายเดือนก่อน
Creative Loading animation | Figma Interactive Components
Landing Page Ui Design in Figma - 3D Carousel Slider
มุมมอง 33K11 หลายเดือนก่อน
Landing Page Ui Design in Figma - 3D Carousel Slider
Fashion Website Design in Figma | Ecommerce Website
มุมมอง 47K11 หลายเดือนก่อน
Fashion Website Design in Figma | Ecommerce Website
How To Make A Website With Login And Signup | HTML CSS & Javascript
มุมมอง 906ปีที่แล้ว
How To Make A Website With Login And Signup | HTML CSS & Javascript
Food Ordering Mobile App Design in Figma | UI/UX (Wireframe, Prototype) Figma tutorial
มุมมอง 78Kปีที่แล้ว
Food Ordering Mobile App Design in Figma | UI/UX (Wireframe, Prototype) Figma tutorial
UI/UX Design and Prototyping an E-commerce Shoe App in Figma | From Sketch to App
มุมมอง 23Kปีที่แล้ว
UI/UX Design and Prototyping an E-commerce Shoe App in Figma | From Sketch to App
Amazing Ecommerce Website ui Design in figma | Online Shop Website Design
มุมมอง 67Kปีที่แล้ว
Amazing Ecommerce Website ui Design in figma | Online Shop Website Design
CSS Gradient Button Animation Effects using Html & CSS | CSS Button Hover Effects
มุมมอง 952ปีที่แล้ว
CSS Gradient Button Animation Effects using Html & CSS | CSS Button Hover Effects
Cake Ordering Mobile App Design in Figma | Figma Tutorial
มุมมอง 16Kปีที่แล้ว
Cake Ordering Mobile App Design in Figma | Figma Tutorial
Coffee Ordering Mobile App Design in Figma
มุมมอง 8K2 ปีที่แล้ว
Coffee Ordering Mobile App Design in Figma
can you help me to get file design as i couldn't download it from github
Thank you 🙏🏼 nice work brother/sister 💯 it is really helpful
My pleasure ❤️
Hello! I love the work you do. I want to ask a question, how can I make a high-quality screen recording of the prototype I designed?
It's not possible in Figma but instead you can use screen recording app
@@DSCodetech thanks and which app you use sir?
How to get image plz😢
Get our free files, check the description
43:44 Great job, but I think it would be more effective if the CTA button were in red rather than black. as the red color is associated with excitement and urgency, which can encourage consumers to make a purchase decisions
Great idea!
kindly provide the link for these assests
check description
Code milega kya
It's an UI design
Is this a proper way of design? What about autolayout?
We didn't use Autolayout in this design
Which is the best plugin to download these kind of images
You can just use free image websites
sir ye Ui DESIGN hai OR Ux DESIGN i am very Congused....... ????
Yes, it is
Amazing
Thank you! Cheers!
where did you get that all image
From free image websites
How to make heart red on click to add to favorites. I use overlay and another page but it doesnt work
Add red color to the Fill on the right side bar or do the same as you see in the video
Thanks this helped me a lot 😅😅😅
I'm glad!
Classy and clean layout! Great work
Thank you very much!
how did you put the elipse under the burger image? whwnever i try to do it it just pushes the elipse to the back of the image. i don't understand
Instead use layers bar on the left side of the screen
@@DSCodetech i got my image from the internet, so when i put the elipse under the image it just disappears behind the image as if i put 'send backwards' so I'm really confused
You can use the layers panel to adjust the position of the eclipse
great work, but you cant assign a hovering effect on a mobile phone, it works well on a pc due to the cursor but on mobile its all about tapping
Correct, we use the hovering effect in prototypes instead of clicks. A hover indicates a tap on a mobile phone
great work sir
Thanks
Hello. I don't understand how to get icons for my designs. I use pictures from google so I cant find a way to color them like you do . Please help. Thank you
You can get free icons on websites by just searching on Google
kindly guide me how to make the border of the page
Use the Stroke feature on the right sidebar
👍. Weldone. Please, can u explain while u design instead of using background music. Beginners would want to be verbally instructed while they learn. Thanks for your contributions
We use Figma to design and prototype And it's free to use! :) Sign up here: psxid.figma.com/dkbklpwripx3
Hello! Can I use it in my portfolio?
you can use it for education purposes
@@DSCodetech Oh ok! Thanks!
can you give us the your final figma ui design , so we can see and create the app by our self
Of course you can get the free files, check description
I just looking your work. So neat & clean, very fresh design. Really very nice app design boss. Best of luck
Thanks and welcome
how do you put the color blocks at the top of the frames? and what template do you use for the icons please?
Use the Fill option on the left sidebar. You can find icons on figma community
Ok brother, how do I program the project?
you can use app development tool
Let's a bulid a phone app on Figma
let's do it
How do you do this with plugins tell me
Don't need plugins to design this app
provide figma design link
Check the description
trying to replicate this design but having serious problems anyway you can be of help anyone please😮💨😮💨😮💨😮💨
Get the free file and give it a try
Avesome ❤
Thanks ❤️
TH-cam clone ui/ux design create
Coming soon
@@DSCodetech same TH-cam alternative app possible
Its responsive?
We can make it responsive
@@DSCodetech how
wonderful
Thank you! Cheers!
It's doesn't work for me
Try rotating what's inside the variant, don't rotate the variant
Where did you get the icon set from?
From our free icon pack
Thank you! And I'd like to say thank you for your hard work. I've learned a lot form your tutorials. Your designs are outstanding and visually appealing !
Some all the button texts are same, did you notice that? 😂 make sure to edit them while you designing
How will be add auto list order ?
To add Auto layout to a list - you can find the auto layout option in the right side tab
@@DSCodetech Nor sir .. I'm asking how to stores user filed data in database😊
Can you provide this layout link live demo
You can get it from the free files
Pls, always speak instead of bf music. It is not pleasant atal. Not everyone learn with music. Good job though
Thanks, we'll try next time
Cant you talk why producing the tutorials? The bg music is disturbing
hey! for people who say the prototype doesn't work :) I had the same problem, until I noticed that when creating variants, I was rotating the whole variants by 90 degrees, instead of what is in the inside of the variants - which is our circle :)
Thanks for sharing! Rotate what is inside the variant
I follow your solution and it's work! don't rotate whole variants rotating only 'group of circle'
omg thank youuu i was doing the exact same thing
i'm glad I could help 🥰
Not getting the linear option in progress bar while doing the prototype
Try refreshing the prototype, make sure to prototype as exactly as in the video
Impressive. Good work 👍
Thanks 👍
Thanks 🙏👍
Welcome 👍
Very helpful. Thank you and keep on :'))))
Thank you! Will do!
Bro how covert it to html and css
code it
You can use a figma to html plugin or you can code it
Could you then make this map available please?
What do you mean? We can make this app for use