Тёмный
Design League
Design League
Design League
Подписаться
Hi👋 Welcome to our channel dedicated to all things web design, UI/UX design, and digital products!
Our goal is to provide you with insightful and informative content that will help you improve your skills and stay up-to-date with the latest design trends and best practices.

From tutorials and tips to product reviews and industry news, we cover it all. Whether you're a seasoned pro or just starting out, we've got something for everyone.

Join our community of designers 🚀 and creatives and let's explore the world of web design, UI/UX design, and digital products together. Don't forget to subscribe and hit the notification bell so you never miss a video!

Join our Design Community Today! 🤗
Music Player App Design | Figma Tutorial
9:48
3 месяца назад
Hero Section Design Layout in Figma Tutorial
12:55
3 месяца назад
How to Create Toggle Button in Figma
7:49
3 месяца назад
Tesla Cybertruck Design Inspiration
18:40
9 месяцев назад
Комментарии
@63nni39
@63nni39 28 дней назад
This video confused me
@designleague
@designleague 28 дней назад
Thanks for your comment. Please let me know if i can help you with anything that isn't clear for you.
@vamboo8918
@vamboo8918 Месяц назад
Good
@designleague
@designleague Месяц назад
Glad it was helpful!
@ebtehals6374
@ebtehals6374 Месяц назад
your voice not clear at all 😩😫
@designleague
@designleague Месяц назад
Try the other video i've done, the concept and the techniques are pretty similar ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_gBeB3BM-dc.html and let me know if you have any questions.
@user-kt7ud6cd7f
@user-kt7ud6cd7f 2 месяца назад
Hey tbh do the voiceovers. It really adds a personal brand to your channel. Who cares if people care about how you talk and also you will even get better the more you do it.
@designleague
@designleague 2 месяца назад
Thanks for taking the time and write this comment yes, this is a great advice and im working on it now, sometimes my voiceovers aren’t great, so i add music instead! Thanks for sharing your thoughts and ideas this helps me to improve my content.
@user-kt7ud6cd7f
@user-kt7ud6cd7f 2 месяца назад
@@designleague you’re welcome homie. Thank you for these helpful videos
@SigmaSigma-yo2wm
@SigmaSigma-yo2wm 2 месяца назад
Great video helps a lot ❤
@designleague
@designleague 2 месяца назад
Thanks for your comment 🤩
@govalaputra4503
@govalaputra4503 3 месяца назад
Nice tutorial!, and don't forget to drink more water bro!
@designleague
@designleague 3 месяца назад
Thanks for your comment, happy to help! Yes, you are right i do need to drink more water. 💦 probably have to set reminders 😀
@doyinsovohunu1268
@doyinsovohunu1268 3 месяца назад
But why is the last frame at edge dragging?
@designleague
@designleague 3 месяца назад
Thanks for your comment. We resize the frame at the end because we want the elements to stay within the frame size. Additionally, this is how Figma does horizontal scrolling. You can avoid the frame resize, but then you have to go to the prototype tab and set the frame - > to horizontal scrolling :)
@SigmaSigma-yo2wm
@SigmaSigma-yo2wm 3 месяца назад
Just amazing!!!!!!! speechless!
@designleague
@designleague 3 месяца назад
Thank you, glad it was useful for you, let me know if you have any questions.
@SigmaSigma-yo2wm
@SigmaSigma-yo2wm 3 месяца назад
With all due respect I just want to know what kind of designs are in demand and where should I upload my work, if you don't mind telling 😊
@aots3scenes853
@aots3scenes853 3 месяца назад
@@SigmaSigma-yo2wmthanks for your reply, good articles about UX you can find on Medium, and video content is RU-vid. Regarding where you can upload your work I would suggest Figma community, it’s free and you can get other community members feedback. Which is valuable.
@designleague
@designleague 3 месяца назад
@@SigmaSigma-yo2wm Thank you for your comment. If you enjoy reading, you might want to check out articles on Medium. If you prefer video format, I recommend watching tutorials on RU-vid, like this one :) As for where to upload designs, I suggest looking into Figma Community. It's free, and you can receive valuable feedback from the community.
@SigmaSigma-yo2wm
@SigmaSigma-yo2wm 3 месяца назад
@@designleague thanks a lot, appreciate it!
@soul_xplore
@soul_xplore 3 месяца назад
Thank you!
@designleague
@designleague 3 месяца назад
Thanks for your comment, glad it was helpful to you! Let me know if you have any questions on this topic :)
@emflit
@emflit 3 месяца назад
Thank you for the video! Up until the 1440 pixels screen, everything was clear, but my project uses different screen sizes. Could you please guide me on the formula used to calculate grid parameters? I have screens sized 1024 pixels, 768 pixels. I would be grateful for any answers and guidance :)
@emflit
@emflit 3 месяца назад
I guess I got it! For 1024px: Count: 8 Width: 64 Count: 1 Width: 296 For 768 px: Count: 6 Width: 64 Count: 1 Width: 216
@designleague
@designleague 3 месяца назад
Thanks for your comment. The calculations depend on the initial grid system used, such as Bootstrap, MUI, etc. The grid may differ based on this. If you are using the 8-pixel grid system, the general gird system could be: > 1024px. Columns (count): 12 Type: Stretch Width: Auto Margine: 48 Gutter: 24 > 768px. Columns (count): 8 Type: Stretch Width: Auto Margine: 32 Gutter: 24 > 375px. Columns (count): 4 Type: Stretch Width: Auto Margine: 16 Gutter: 16 Detailed guidelines can be found on the Material Design - Responsive layout grid: m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins Important: This is not advice; it is just my opinion. Values might be different for you, so please check the correct values before applying.
@kingsleyezedike7647
@kingsleyezedike7647 3 месяца назад
where did you get the map pin icon please ??
@designleague
@designleague 3 месяца назад
Thanks for your comment. In the video description, you will find the link to the Figma file where you can access/export all the assets in vector format.
@kingsleyezedike7647
@kingsleyezedike7647 3 месяца назад
@@designleague thank you man
@designleague
@designleague 3 месяца назад
@@kingsleyezedike7647 happy to help!
@emflit
@emflit 3 месяца назад
Thank you soooo much for this amazing video! Finally, I got it! Good job :)
@designleague
@designleague 3 месяца назад
Thanks for your comment, glad it helped you let me know if you have any questions!
@hojayfahassan5032
@hojayfahassan5032 4 месяца назад
where from you get these images
@designleague
@designleague 4 месяца назад
I used Unsplash Figma plugin, run the plugin search for Nike shoes 😀
@ElMountaserBAbbas
@ElMountaserBAbbas 4 месяца назад
To group auto layout click shift-A , this is my first video in figma and I used to use ctrl G usual to Group but its not the same I noticed , so I found this SHIFT A
@designleague
@designleague 4 месяца назад
Thanks for watching and sharing your experience with the shortcut keys!
@christina9898979
@christina9898979 5 месяцев назад
Thankyou for the tutorial :)
@designleague
@designleague 5 месяцев назад
Thanks for commenting, i hope it was helpful to you
@christina9898979
@christina9898979 5 месяцев назад
It is helpful :)
@user-uw4rm6bn1q
@user-uw4rm6bn1q 5 месяцев назад
thanks for your tuto
@designleague
@designleague 5 месяцев назад
Thanks for your comment 😉
@SomeOne-ri1ng
@SomeOne-ri1ng 6 месяцев назад
good tutorial ,but accent and pronocment could be beter
@designleague
@designleague 6 месяцев назад
Thanks for your comment, valid point, I’m working to improve it hopefully it will get better over time. 👍
@dheerajsingh6255
@dheerajsingh6255 6 месяцев назад
Can you tell me which plugin is this?
@designleague
@designleague 6 месяцев назад
The plugin is called: Export GIF you can find it in community tab. Export a GIF 1. Select a frame or composition with a GIF in it 2. Run the "Export GIF" plugin command 3. Click Export
@ameenah4pool
@ameenah4pool 6 месяцев назад
Thanks for this
@designleague
@designleague 6 месяцев назад
Thanks for taking the time and posting this comment. Let me know if you have any questions.
@cahit7270
@cahit7270 6 месяцев назад
Hi, good aproach, but how can we check, whether it is responsive?
@designleague
@designleague 6 месяцев назад
Thanks for your comment, ideally it you select the header nav component (left or right) and move it you should be able to adjust it to specific screen size, when you add a mockup e.g. 1440px, try to specify header constraints (left/right/top) this should adjust it accordingly. I will create a step by step tutorial for you on this topic in a next few tutorials and will break it down into more details, would be happy to hear your feedback if it worked. Also subscribe not to miss it. 👋
@tspice11
@tspice11 6 месяцев назад
Where did you get the telltales from?
@tspice11
@tspice11 6 месяцев назад
Is there a way to say at a particular MPH have a pop up message. So if the cluster gets to 50mph a message triggers. How do I do that
@designleague
@designleague 6 месяцев назад
Thank you for your comment, yes you can do that through "after delay" you have to create cluster components and then create variants, and set conditional variants. Then you can calculate the time the cluster will get to e.g. 50mph and trigger the desired message through "after delay". This is complicated, but technically should work :) I suggest an alternative approach to solving the task: I would try to use: Motion - UI and Games animation plugin see the link here: www.figma.com/community/file/966913921712314277 you can add the animation (points) this will hopefully help you and will be less time consuming. I will create the tutorial and try to cover this task and hopefully will be helpful for you, but until then you can try this method, and would appreciate hearing your feedback. Thanks 🙂
@tspice11
@tspice11 6 месяцев назад
@designleague thank you that would be great
@tspice11
@tspice11 6 месяцев назад
I am really trying to save my auto company money from paying an outside company to do this. I have a star button, want it to wake up the cluster, I made an accelerator button want to press it and have speed increase, release it and car slows as if it had one pedal then show regeneration bar move....once I learn that I can configure the whole cluster. If you could demo any of that it would be great. I can donate no worries
@tspice11
@tspice11 6 месяцев назад
Thank you so much. Subbed
@rishabhgoel1444
@rishabhgoel1444 6 месяцев назад
Hi Design League, First of all great video content. I saw your GitHub repository for this particular design where you have also used Qt Design Studio. I have 2 questions regarding this if you do not mind answering them. 1. Did you use a plugin such as Qt Bridge to import Figma files to Qt Design Studio? If not, what did you use? 2. Have you implemented your Qt QML design on hardware? If so, what hardware (MCU and TFT display) did you choose and why? Thank you for answering these questions.
@designleague
@designleague 6 месяцев назад
Thanks for your comment, not sure I used any of the plugins you’ve mentioned.
@artenman
@artenman 6 месяцев назад
This guy sounds like he's falling asleep
@designleague
@designleague 6 месяцев назад
Nice comment, i hope the tutorial was helpful for you! 😁
@futbalbase5790
@futbalbase5790 7 месяцев назад
Please how do I fi for seconds, hours and days
@designleague
@designleague 7 месяцев назад
Thanks for your comment, try to follow the steps i’ve done for seconds countdown then duplicate the comment and rename it to hours (don’t forget to add more delay time e.g 8000ms)and repeat the process for minutes and so on. I will create a video for you where i will animate all the elements. 👍 Let me know if you have any other questions.
@iamhellenmo8054
@iamhellenmo8054 8 месяцев назад
Good tips 🔝🔝🔝
@designleague
@designleague 8 месяцев назад
Thank you 🙌
@atotiten
@atotiten 8 месяцев назад
What software is this
@designleague
@designleague 8 месяцев назад
Thanks for your comment, this software is Figma you can try it for free > psxid.figma.com/sbx42zn5nd3m
@iamhellenmo8054
@iamhellenmo8054 8 месяцев назад
That’s great 🎉
@roastbeefy0weefy
@roastbeefy0weefy 8 месяцев назад
thanks g
@designleague
@designleague 8 месяцев назад
Happy it was helpful to you 👍
@RckDtar
@RckDtar 8 месяцев назад
this dude talks like my dentist
@designleague
@designleague 8 месяцев назад
🤣🤣🤣 I hope you like your dentist 🦷 thanks for your comment. 👍
@bethechange2024
@bethechange2024 9 месяцев назад
Fantastic! Thank you for bringing viewers'/users' attemtion to th is plugin. I have been looking for one to help with creating an ease of design for flow and this fits the bill. Were one to want to unlock all options in a pro-version, it is only a one-time purchase too of US$8, well worth it for me.
@designleague
@designleague 9 месяцев назад
Thanks for your comment, I'm glad the video was helpful for you, check the other videos on the channel, and if you have any questions please let me know!
@marckobuendicho3883
@marckobuendicho3883 9 месяцев назад
bro, thank you really. I subscribe, you fcking made it work for me. Godbless. I hope you continue making videos, especially for a whole landing page design process.
@designleague
@designleague 9 месяцев назад
Thank you for your comment, im happy it was helpful for you. I will definitely create the landing page process thanks for suggesting it’s important for me to create the content that you guys want! 👍
@chakaravarthy1977
@chakaravarthy1977 9 месяцев назад
Bro ur voice sounds like Saul Goodman in quite manner
@designleague
@designleague 9 месяцев назад
Never thought about that i actually searched Saul Goodman to listen it 🤣🤣🤣 thanks for your comment, appreciate it 👍
@pollux8132
@pollux8132 9 месяцев назад
❤❤❤ nice 👍
@iamhellenmo8054
@iamhellenmo8054 10 месяцев назад
❤❤❤
@Grimmmmn
@Grimmmmn 10 месяцев назад
figma balls
@jimsmith5562
@jimsmith5562 10 месяцев назад
Great video on Autolayout #config23, however there is a discrepancy between what you are saying and what you typing in Figma in the video. Also if you could increase the size of your Figma screen and annotate the steps in words than this will dramatically improve the quality of your video, best of luck with your 10K Target.
@designleague
@designleague 10 месяцев назад
Thank you so much for your feedback this is very important for me. I will take into consideration the points you’ve made in my next video. Also here is very similar tutorial for you maybe it will be helpfull. Thanks Jim ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-97FCF8Qz2uE.htmlsi=bQV4GhZijDKqFLtO
@aots3scenes853
@aots3scenes853 10 месяцев назад
❤❤❤❤
@noelxlk
@noelxlk 10 месяцев назад
sticking out your gyatt for the rizzlrr
@Mr.XAingel
@Mr.XAingel 10 месяцев назад
​@lxtteXXroyalFricking come here
@tsiroukismichael9606
@tsiroukismichael9606 11 месяцев назад
Hi, i have an issue on creating an instance of the head navigator (@ 13:20 ). It produces only 1 of the 3 head navigators each time i copy and paste them over the frames (desktop, tablet and mobile). I cannot change the properties of the navigator header (S, M , L). I have followed the steps multiple times , but without luck. Is there any solution for that ?
@designleague
@designleague 11 месяцев назад
I will create a video, on this topic how to do it step by step. Please subscribe the video will be published on monday.
@designleague
@designleague 11 месяцев назад
Hi here is the new video that I have explained step by step ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zyraRIgHU_w.html please let me know if I answered your question. thanks
@Paris_objects
@Paris_objects 3 месяца назад
@@designleague why I cant find this video anymore?! :(
@designleague
@designleague 3 месяца назад
@@Paris_objects Hi Paris, thanks for your comment, I am not sure here is the URL: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TSs1Bx4go90.html let me know if you have any questions, happy to help :)
@iamhellenmo8054
@iamhellenmo8054 11 месяцев назад
Nice work
@designleague
@designleague 11 месяцев назад
Thank you! Cheers!
@enxcrypted18
@enxcrypted18 11 месяцев назад
Ligma
@mtjloves1324
@mtjloves1324 11 месяцев назад
I don't even know how to use this top but thanks nevertheless 😂🎉
@designleague
@designleague 11 месяцев назад
I will make a video how to use the top widgets bar
@mtjloves1324
@mtjloves1324 11 месяцев назад
@@designleague Oh, that'd be great, appreciations in advance:)
@VardhanPatil-u4s
@VardhanPatil-u4s 11 месяцев назад
thanks for the link
@designleague
@designleague 11 месяцев назад
You're welcome!
@lari7094
@lari7094 11 месяцев назад
Thank you so much for the video!
@designleague
@designleague 11 месяцев назад
You are so welcome!
@sawerasarwar1823
@sawerasarwar1823 Год назад
Mjy to Kuch samjh nhi aai agr bol kr bataya jata to zayada acha tha 😫
@designleague
@designleague 11 месяцев назад
I will create a video for you with step by step tutorial.
@sawerasarwar1823
@sawerasarwar1823 11 месяцев назад
Thank you 🥲
@iamhellenmo8054
@iamhellenmo8054 Год назад
I like the monkey, this is meme of the day 😅
@iamhellenmo8054
@iamhellenmo8054 Год назад
😂😂😂
@aots3scenes853
@aots3scenes853 Год назад
Nice one
@designleague
@designleague Год назад
Thanks 🔥