- 42
- 129 463
Average Design Dude
United Kingdom
Приєднався 22 кві 2023
Are you interested in design? You're in the right place! My channel is all about teaching you everything you need to know about design. Here's what you can expect:
UI/UX Design: Learn how to create designs that are easy to use and look great.
Product Design: Find out how to design products that people love.
Web Design: Get step-by-step tutorials on making amazing websites.
Animations: Discover how to design apps that users enjoy.
I also share tips and tricks for using popular design tools like Figma, Adobe XD, Framer, Sketch, and more. I make it easy to understand and use these tools to create your designs.
Sometimes, we talk about graphic design and the importance of paying attention to detail. These skills are important for making your designs the best they can be.
My goal is to teach you everything about design in a simple and fun way. Join me and start your journey to becoming a great designer!
UI/UX Design: Learn how to create designs that are easy to use and look great.
Product Design: Find out how to design products that people love.
Web Design: Get step-by-step tutorials on making amazing websites.
Animations: Discover how to design apps that users enjoy.
I also share tips and tricks for using popular design tools like Figma, Adobe XD, Framer, Sketch, and more. I make it easy to understand and use these tools to create your designs.
Sometimes, we talk about graphic design and the importance of paying attention to detail. These skills are important for making your designs the best they can be.
My goal is to teach you everything about design in a simple and fun way. Join me and start your journey to becoming a great designer!
Figma AI (All New Features Config 2024)
Figma just launched Figma AI at their Config 2024 event at San Fransico.
It came with all new features like Auto Layer Renaming, Auto Prototyping, AI actions, Auto Content Replacement, Search Similar using AI, Auto Renaming using AI, Figma native AI background remover, Generative Image generation using AI, Auto Language Translator and many more. In this video I go in depth of each of these features. I walkthrough step by step how Figma AI features can be used. I also talk about the examples and also a potential problem that might come up.
Topics of discussion in video:
Intro: 00:00:00
Creating Designs using Figma AI Actions: 00:00:23
Customizing, Themes, Fonts and more:00:00:58
Using AI to create designs in specific parts of page: 00:01:11
Figma AI policy about Content Training: 00:01:24
AI Search Similar, Search using AI in Figma: 00:02:07
Best AI features in Figma: 00:03:11
Auto Content Replacement: 00:03:26
Figma AI Image generation using AI: 00:03:59
New Native AI Image background Remover in Figma: 00:04:11
Auto Translate using Figma AI: 00:04:25
Auto Layer Renaming using Figma AI: 00:04:37
Auto Prototyping using Figma AI: 00:05:09
Figma AI Future Improvements and Pricing plans: 00:05:42
Outro: 00:06:42
If you have any questions leave in the comments sections and I will get back to you.
Source file link: framer.com/projects/new?duplicate=kp9U3V1t28PKFXEkwJ2f
Want to learn more about Framer? Subscribe to my channel.
youtube.com/@AverageDesignDude
Learn more tips and tricks on Framer on my Instagram channel below
averagedesigndude
It came with all new features like Auto Layer Renaming, Auto Prototyping, AI actions, Auto Content Replacement, Search Similar using AI, Auto Renaming using AI, Figma native AI background remover, Generative Image generation using AI, Auto Language Translator and many more. In this video I go in depth of each of these features. I walkthrough step by step how Figma AI features can be used. I also talk about the examples and also a potential problem that might come up.
Topics of discussion in video:
Intro: 00:00:00
Creating Designs using Figma AI Actions: 00:00:23
Customizing, Themes, Fonts and more:00:00:58
Using AI to create designs in specific parts of page: 00:01:11
Figma AI policy about Content Training: 00:01:24
AI Search Similar, Search using AI in Figma: 00:02:07
Best AI features in Figma: 00:03:11
Auto Content Replacement: 00:03:26
Figma AI Image generation using AI: 00:03:59
New Native AI Image background Remover in Figma: 00:04:11
Auto Translate using Figma AI: 00:04:25
Auto Layer Renaming using Figma AI: 00:04:37
Auto Prototyping using Figma AI: 00:05:09
Figma AI Future Improvements and Pricing plans: 00:05:42
Outro: 00:06:42
If you have any questions leave in the comments sections and I will get back to you.
Source file link: framer.com/projects/new?duplicate=kp9U3V1t28PKFXEkwJ2f
Want to learn more about Framer? Subscribe to my channel.
youtube.com/@AverageDesignDude
Learn more tips and tricks on Framer on my Instagram channel below
averagedesigndude
Переглядів: 335
Відео
Design Custom Native Forms in Framer (NEW UPDATE)
Переглядів 3073 місяці тому
New form builder has just been released inside framer natively. This allows users to create fully functional forms without the need of any third party integration. In this video I show case how to build or create a form, customize it and collect data submitted by the form by email and google sheets. Topics of discussion in video: Intro: 00:00:00 Adding a form and looking at the structure of lay...
Framer Text Animation Infinite loop
Переглядів 6583 місяці тому
This video is about creating a stunning Text animation in Framer step by step. This text animation style is used by many big brands like Apple and Google. In this video we learn about topics like components, interactions, animations and effects in Framer. If you have any questions please leave a comment and I will get back to you asap. Link to Framer remix file (Source file) : framer.com/projec...
Design 3D Animated Button in Figma
Переглядів 1684 місяці тому
Create an Animated 3D Button in Figma by following these step-by-step instructions. First, design the button, then incorporate interactions during the prototyping phase. Adding this animation to your portfolio can impress viewers, showcasing your expertise in UI design, smart animation, prototyping, interaction design, and motion design. Free Figma File (Please subscribe so I can keep creating ...
How to become a UI designer. (Must watch for Beginners)
Переглядів 774 місяці тому
In this video, I dive into the question: Can you be a UI designer without learning UX design? Timestamps and chapters of this video Intro: 00:00:00 Who is a UI and UX designer: 00:00:13 Explaining UX Designer with Example: 00:0:42 What are the roles of UI and UX designer: 00:01:15 Figma, Framer and other design tools tutorials: 00:01:40 Example of Good UI with Bad UX: 00:01:45 Intersection of U...
Design Animated Portfolio Website In Framer (just under 25 minutes)
Переглядів 3,2 тис.4 місяці тому
Designing an animated portfolio website has been a challenge for new designers. But not anymore. In this video I will walkthrough how create an amazing animated and interactive portfolio website in Framer in just few minutes. In this video we will see how can use our design in Figma and import it into framer. And then create components to Animations of buttons and add carousels and tickers in F...
6 UI Tricks to completely transform your design
Переглядів 7404 місяці тому
Hi, Average Design Dude here and in this video we will have a look at 6 UI trick or hacks if you want to call them, that will completely transform your ugly UI designs into modern and professional looking UI designs. These are the tricks I wished I knew as a beginner, it would have saved me ton of time and effort. All designers out there must learn these 6 steps to improve their design quality....
Figma Design Handoff - The Easy Way (No Plugin Required)
Переглядів 5195 місяців тому
Mastering Design Handoff in Figma: Simplifying the Process for Developers! In this video, I guide you through the art of seamlessly transitioning your completed designs from Figma to developers. Learn how to organize your screens into sections, add intuitive flows, and incorporate concise comments to enhance developer comprehension. Initially utilizing the Auto Flow plugin but because it is not...
Figma Advanced Color Variables for Design System
Переглядів 2085 місяців тому
Create this Animated Logo Splash screen in Figma. Step by step process of designing the logo and then adding the interactions in the prototyping. You can add this animation in your portfolio to impress your viewers. This demonstrates a good knowledge of UI design and concepts of smart animation, prototyping, interaction design and motion design. Topics of discussion in video: Intro: 00:00:00 Pr...
3D Hand Modeling and Animation in Blender (Under 15 minutes)
Переглядів 399Рік тому
🔥 Master 3D Hand Modeling and Animation in Blender 🔥 🎬 Welcome to my latest Blender tutorial where I dive into the fascinating world of 3D Hand Modeling and Animation! 🤖🖐️ Whether you're a beginner or an experienced artist, this step-by-step guide will have you creating lifelike hand models and captivating animations in under 15 minutes! 🎉 In this comprehensive tutorial, I'll cover: ✅ 3D Hand M...
Design 3D Gradient Backgrounds in Figma - 🎁 Figma files included
Переглядів 256Рік тому
Design 3D Gradient Backgrounds in Figma - 🎁 Figma files included
Design 3D Carousel in Figma (Free Files Included)
Переглядів 663Рік тому
Design 3D Carousel in Figma (Free Files Included)
Animated Mesh Gradient Button In Figma
Переглядів 2,6 тис.Рік тому
Animated Mesh Gradient Button In Figma
Design Liquid Loading Animation in Figma (Secret Trick)
Переглядів 1,8 тис.Рік тому
Design Liquid Loading Animation in Figma (Secret Trick)
Figma Auto Layouts Explained (Complete Guide)
Переглядів 143Рік тому
Figma Auto Layouts Explained (Complete Guide)
Variables in Figma: Design this Light and Dark Modes (NEW FEATURE)
Переглядів 601Рік тому
Variables in Figma: Design this Light and Dark Modes (NEW FEATURE)
Figma Auto Layout Wrap (Config 2023 New Feature)
Переглядів 1,9 тис.Рік тому
Figma Auto Layout Wrap (Config 2023 New Feature)
Component Properties in Figma explained (with an Example)
Переглядів 444Рік тому
Component Properties in Figma explained (with an Example)
Apple Vision Pro Netflix Design in Figma
Переглядів 16 тис.Рік тому
Apple Vision Pro Netflix Design in Figma
Light and Dark mode Animation in Figma (Under 3 Minutes)
Переглядів 1,5 тис.Рік тому
Light and Dark mode Animation in Figma (Under 3 Minutes)
Design Animated Logo Splash Screen in Figma
Переглядів 80 тис.Рік тому
Design Animated Logo Splash Screen in Figma
Add Icons to Team Library in Figma (7000 Free Icons)
Переглядів 2,5 тис.Рік тому
Add Icons to Team Library in Figma (7000 Free Icons)
Design this Button Animation in Figma (Under 3 minutes).
Переглядів 8 тис.Рік тому
Design this Button Animation in Figma (Under 3 minutes).
Design Button Toggle Animation in Figma (Under 5 Minutes)
Переглядів 1 тис.Рік тому
Design Button Toggle Animation in Figma (Under 5 Minutes)
Figma Animations in 10 Minute | Masking | Smart Animation | Prototyping
Переглядів 211Рік тому
Figma Animations in 10 Minute | Masking | Smart Animation | Prototyping
Figma Tutorial for Beginners (Wireframe to UI Design)
Переглядів 435Рік тому
Figma Tutorial for Beginners (Wireframe to UI Design)
Figma Auto Layouts | Components | Prototyping - UI UX Design Tutorial For Beginners
Переглядів 197Рік тому
Figma Auto Layouts | Components | Prototyping - UI UX Design Tutorial For Beginners
How to Use Figma (Basics) - UI UX Design Tutorial For Beginners
Переглядів 157Рік тому
How to Use Figma (Basics) - UI UX Design Tutorial For Beginners
UX Design Process - UI UX Design Tutorial For Beginners
Переглядів 207Рік тому
UX Design Process - UI UX Design Tutorial For Beginners
The best, thank you
Bro when i do it the animation is weird.
Thank you so much! :)
Your video is very nice, but the responsive part should have been done with a little more time. ❤❤❤
Thank you! you are the only one who helped me with this. The others are like "yoU hAVe tO uSe a tHirD paRtY weBsITe"
Thank you so much! Was struggling today on someone else video on same topic too! I finally able to make the animation I need. TvT
It's very helpful video for me thank you so much keep shere more videos framer releted tutorial
Hey! great tutorial! Quick question, how did you style the Location dropdown selection (Amsterdam, Barcelona)? I can't change it from white and blue ):
Hey bhai the quality of splash screen is too much down
i want the logo png
How does this work in the new Firma ?
Thank you a lot for the tutorial! I had so much fun and I really learned something :D
Great work!
Omg thank you, you've already helped me with the animations, please keep up the good work, you're the best
Thanks!! This was really helpful!
This really helped me a lot thank you for this ❤
Wow thanks so much. Was struggling today on someone elses' video on same topic. Your approach was way more precise and relayed all the steps I needed to make it work. Looking forward to more of your content. Now subscriber!
how do you know the dimensions of a frame? can you put a documentation like where dimensions are mentioned?
These are different for different screen size for example For Desktop we have all these frame sizes. 1920×1080, 1366×768, 1536×864, 1280×720, 1440×900 A quick google search help you see all the available screen sizes.
@@AverageDesignDude do we need to read ios design docmentation for dimensions, spaces etc?
I have problems changing the icon its sayinf error help
It probably is the issue with your icon library. Can you give me more detail maybe I can help.
Awesome!!! Thanks!!!
Good work MashAllah
thanks bro
Awesome video
❤
Good
Good
Nice
Good morning, Thank you for your clear and precise tutorial. However, I have two questions: When we go to the site, in the "price" section and in the "Mini" section I see that it says "Home and 404" in the "Web pages" category. What does that mean ? Is this an already predefined template? As with the free version, I imagine you can create as many pages as you want? (Otherwise it would obviously be incomprehensible) Secondly, for the “Mini” plan is it €5 for the first year?
Hi, yes Home and 404 will be template that Framer provides and rest you can still create as many pages as you want for Mini plan. And 5 euros is per month price for mini plan.
Really straight forward and concise. Thank you very much.
This was so easy to replicate. Amazing tutorial
Glad you think so!
Awesome video, thanks a lot. do you have LinkedIn
Thanks, I do have a LinkedIn but it’s a secret 🤫.
@@AverageDesignDude after practice i might mention you on LinkedIn that's why I asked.
Awesome! I’m really going to have to look into that Figma to Framer plugin. Keep up the great content!
Template of the century awarded for being the epitome of the most template- template ever created in the history of “copy and paste, monetized”
Hmmm interesting video I was always wondering how do people make such a complex designs and how do they decide to which elements to use I usually follows most of the rules from 1 to 4 but rest of them i had no idea thank you for showing the process. Hopefully it will make my boring designs looks more professional and fun.
Thanks a lot. It's very helpful.
absolutely amazing it works for the 1st try bro much respect to you i love this for sure 😎😎😎😎😎😎
Glad I could help
RESPECT & THANK YOU SO MUCH MY BROTHER! JESUS BLESS YOU!
good info man ,hopefully will learn ui soon
You can do it!
God bless you
Looks awesome. Do you have a template or something? ☺
how to use this animation in andorid studio?
Sorry for the delayed response I was away due to personal emergency. You can try using Lottie Files plugin to export this in JSON and use in Android Studio.
@@AverageDesignDude Thank you for replying me ... i Used this animation .. this is awsome .. keep it up broooo....
@@PiyushKumar-ey8ub hi can you able to export to the lottie files I cant able to do this can you help me
@@jackslifestyle4884 ok how can i share you ?
figma file?
This Figma file is not available. I want to teach people to do this stuff themselves rather than just use a prebuilt file.
@@AverageDesignDude i already make this bro . Thanks for replying me
I need to get an animated splash screen done. Contact me if you have time to do it.
Sorry buddy I am currently not available for new projects. Already quite busy with a few contracts up-till October 2024.
Really great vidéo, gonna help me a lot
Glad to hear it!
how to link vector and text into one frame?
Just select them together and right click and select Frame selection.
Do you need the pro version to be able to do this?
Sorry for the delayed response I was away due to personal emergency. No you don’t need pro version for this.
❤
THANK YOU!!!
Amazing work!! hey can i get this figma file?
Sorry for the delayed response I was away due to personal emergency. This file is not available for sharing just for the purpose of allowing people to try themselves. Otherwise people just use the file and don’t learn.
Please make a playlist of VR design tutorial. This video helped alot!
Sorry for the delayed response I was away due to personal emergency. I will definitely make a video about VR.
@@AverageDesignDude No worries. Thanks.