Weather App UI Design in Figma - Full course
ฝัง
- เผยแพร่เมื่อ 20 ส.ค. 2024
- Learn how to design a dark mode weather app with widgets using the glassmorphism and neumorphism styles
Resource
- Weather App Figma File: www.figma.com/...
- iOS 15 UI kit: www.figma.com/...
- 3D icon Set by PIQO: www.figma.com/...
- 3D Christmas Set: www.figma.com/...
- SF Symbols: developer.appl...
- Apple UI Kit: developer.appl...
🪄 Join this channel to watch the entire course on TH-cam
➡ / @designcodeteam
📺 Watch the complete UI Design Quick Apps in Figma course
➡ • UI Design Quick Apps i...
🚀 Follow this course on Design+Code's website
➡ designcode.io/...
Follow Me
🐦 Twitter: / aksonvady
📸 Instagram: / aksondesign
#figmadesign #uidesign
Designers dream, is often developers nightmare
It be like that sometimes...
Sounds like marriage
lol 😂
😂😂😂😂😂
Soon enough, automated tools will allow for the code behind designs like this to be generated by the click of a button. Keep at it!
Took 2 days to recreate this design!! Learned a lot along the way..!!! I wish you had explained a bit about the choice of properties.. Great Video!!
Thanks for the Tutorial. From Nigeria 🇳🇬!! I’m grateful.
You are so welcome!
Naija dey everywhere🔥
This came in handy ❤, I’m presently working on a mobile weather app and I ran out of ideas 😅. Came across your video and I’m good to go. Kudos to the team! 🎉
Awesome tutorial. I do both design and dev for my apps and I think that this awesome design could be really challenging to implement in SwiftUI.
What part exactly would make it difficult?
@@xannisan3903 All of it
@@yazanarmoush damn, even the sliding up component? I feel like that's a pretty normal div component, I will try it and see though, I might be wrong
Finally we are at 100k subs... next is road to 1M, Great content as usual, more people need o discover this channel
We're stoked. Thank you for recommending this channel!
@@DesignCodeTeam welcome
I really love your designs ❤ It's amazing you do this for free for us. Your explanations are clear and you give so many tips. Thank you!
when i heard "hey guys", i got the feeling i've heard this somewhere before....
TRIGGGGERED
Thank you fo the tutorial ! The courses was easy to follow and I learn a lot about figma.
Glad it was helpful!
Awesome work! As a senior mobile dev I wish I can download and use this app some day
Great as always
Thanks again!
Incrível! São tutoriais como estes que me incentivam ainda mais a ser uma profissional na área. Espero conseguir realizar este sonho. Parabéns, pessoal!
Também estou no mesmo caminho. Depois de passar 5 anos para ter a graduação em Engenharia Química lol
@@reijanecosta4551 Super entendo. Também estou em processo de transição de carreira!
I am so glad I found you... subscribed🎉
Thanks for subbing!
great tutorial, the effort you put into this thanks.keep posting figma tutorials like this
If you have finished the tutorial, could you tell me what happened to Ellipse 1 and Ellipse 2? Wondering what that was for?
You made the interfaces but the prototype applications ended up not being finalized anyway, your class was great, thank you! I'm following your tutorials, do a lot I'm out of money to take courses thanks!
yeah thinking about the same thing but bro i think if know how to prototype a little bit we can try to do it like she did in the start just for practice and who knows if it turns out good...just keep up the learning...
When you spent an hour on this tutorial but it's only been 11 minutes in the video, lmao
Thanks for the work!
Teşekkürler harika bir videoydu.Videonuza altyazı eklediğiniz için otomatik çeviri ile Türkçe altyazılı izleyebildim🎉
You are so talented 👏🏼
Thank you so much!!
This was so amazing. Learnt A LOT from this
Thanks! Happy to hear.
Thank you for this amazing tutorial ❤
Graet video..From Bangladesh 🇧🇩🇧🇩🇧🇩🇧🇩
Thank you!
Thanks for the tutorial. That so great
Thank You!
You should have mentioned how the color density was increased at 5:30 ... I really struggled a lot to figure that out. And Again the X position of bottom rectangle was wrong ,it will be 172 instead of 122...
and you should be more grateful!
@@karolpimentel4866 and you should be gratefull too for this coment because it helps alot of newbie
Good observation! I struggled with this too. How did you change the colour density?
@@jasondao8951 i don't remember exactly but i think you just need to drag the 2nd color of the linear fill to left and keep it somewhere beyond the center..
thats what i hate about this channel always skips important parts
This is a great tutorial. But would you explain what made you decide to choose the settings (like color, blur, opacity, roundness) like that? Did you just memorize it?
She is a god... Remember those color code!!
So good, thank you for your help!
A 37 minutes video took me three hours😪, nice work though - enjoyed every bit of it👌👍
Nice work, thanks a lot!
Thx for the sweet tutor sistah...🔥😍 I love it...
You’re welcome 😊
Hey, I learnt designing by creating projects you are helping create. And your approach of directly making project is best. Because it helps me learn while making UI designs.
I have a question in my mind, Can we use the project as our learning part in our resume or portfolio(With proper credits included) ?.
You can use the projects as part of the study, as long as you include proper credits. For your professional portfolio, it's recommended to add your own personal touch to make it truly yours.
@@DesignCodeTeam Thank You So Much, 100% will give proper credits and use only for study purpose, not for professional portfolio.
Great! Thanks!
Thank you so much for sharing ♥
very helpful
So informative, thanks a lot!
Glad it was helpful!
Cool design
Glad you like it
Nice tutorial. Thank you dear.
Amazing 😍
Awesome!
Thanks!
Great work 👌👌
always purple. i'd love to see a green dark mode
简洁大气，看起来舒服
Amazing
Thanks
Amazing UI. Would love to see code it in Swift UI.
Definitely, we're going to implement more designs like these in SwiftUI
Please can you do it with Flutter also
Hello, nice video but could the audio could be better, I keep going back every time to hear what she said and it’s stressful.
+1
I didn’t get the radial color, I’m lost 😭🤲🏽
this is helping me a lot, tks
You are welcome!
thanks, great tutorial. Can you make video how to make presentation like video started
Yes, we're working on videos that will show how to prototype in Figma
Gostei da apresentação vou fazer esse curso, obrigado ! " Like this is apresentation go make this is course, Thank You !
0:14 why adding a hover interaction when you can't use the mechanic on mobile ?
thank you
amazing. want such prototype tutorial too.
working on it!
Yes!!! Can’t wait for it!!!!
Did you upload it@@DesignCodeTeam
Hello ! Thanks from France!🇫🇷🇫🇷
it's a good job! 🤩. Is it possible to have access to this complete tutorial, up to prototyping?
voice is not clear , colors are messed up they don't match the ones you use
Can you please guide us how you make prototypes animations smoth in this app for preview
11.58 how did you give gradient horizontally to a line??
How did you bring the design image out at the last scene, is there a way to save our designs as image
Awesomw tutorial! Thanks so much!! I can't figure out how to degrees as you did in the tutorial when you wrote 19 degree. Please how can I write the degree symbol?
for windows its (alt+0176)
Good video but the everything is too zoomed out it makes it really difficult to read all the text.
Please how did you move your two lines when you added the linear gradient
hello great design @ 9;43 That ellipse procedure. kindly simply it here in words. I'm unable to find the points of the sphere and change the colors
Awesome, can I use this design for a free weather app and publish to store?
Thank you so much for your tutorial! I just have a small issue and have to stop following the tutorial at timeframe 8:00. All of the objects nested inside the Home frame are not displayed inside. For example, the Eclipse 1, half circle should be shown in the Home and the other half should be invisible but the whole circle is displayed. you have any suggestion of how to fix it? Thank. you!
Select the frame then go to the inspector, frame section, make sure to check the "clip content" box. Its create a mask for you.
@@DesignCodeTeam it worked. Thank you!!
@@andrewpham9009 wheres the inspector i cant find it
Pls I have an issue publishing the library... It keeps telling me 'unable to publish 22 changes to the Team Library '
Someone please help
First View
I tried doing that in css, the website looks good but the performance gets so bad that frames don't even get rendered properly after any event like a button press or something.
❤️
Tem como eu criar um projeto que de para digitar depois? Tipo criar um input text( área) um bloco branco que da pra digitar nele. Um bloco grande. Tipo criar um bloco de notas no figma,isso é possível?
It’d be better if you can addd the time stamp in the video
I'm in doubt, I don't know how to duplicate the time component object, I did everything as shown but when I change the value of the time object it doesn't triple, does anyone know?
good app design i m learn lots of things but i don't understand you used so many opacity and linear color and rectangles
When can i find the prototyping tutorial for this?
Lets see you code this.
I love this design. Hi. Can I use this design of your to create an application?
yes, but if you need a stronge application Study programming languages
I'm an Android application developer. I'm just asking for her permission@@charaf-yt6492
4:10 , how can I make my own custom pictures like that beautiful house in the mobile screen ?
One question, what program do you use for recording screens? @DesignCode
We use Descript.
Where's the prototyping.?
Me Before Seeing this App Design:
😒😒😒 Starting to Hate Andriod cuz almost all IOS apps even google versions just look and work well on my iPhone "Home WorkOut 😡" I am really considering making my iPhone my main phone
After seeing this:
I think there is still Hope for android apps after all
how do i put the whole created ui design to my website ? please help
Is there any difference between the website course and the youtube tutorials?
There is no difference, just different platform but unfortunately cannot pass over due to their system
I've reached that point where as much as I see, appreciate and done app designs myself, I am tired of designing them and would like see web design inspirations instead.
Thanks, we'll try to do more web-related videos!
@@DesignCodeTeam thanks so much. I know theres more work needed to design websites, so thanks
If I use diff icons and background will the code be the same ?
how did you go from pAGE 6 TO 3
Can someone explain how she added a 3rd color in Underline at 12:00 . When i changed to linear the color are showing in middle. How it went from middle to edges in video.
Also I am unable to publish the changes like shown in video. it just wont publish
how do you get the data to live update vs just typing in text yourself?
I am new in the world of ux design, do you think I will be good if I only want to deal with the computer and not with research and... as a freelancer
15:26
I don't know why, but I only see green screen on your video. I'm not sure if it is a problem from my laptop or the video.
On my computer and my iPhone, it's fine.
i have trouble at 17:39 .. it didn't work :( the other hours didn't shows up :(
Can anyone tell how I create a chatting app in figma and which is online
28:17 how can i avoid a mask for a topper object?
Wow great video.
You are great teacher.
Please can you share me
How to make a UI intro video in this video or have a your any video in this intro video tutorial.
Please please share us.
We're working on videos that will show how to prototype in Figma.
@@DesignCodeTeam Many Many thanks.
We are waiting for this❤️❤️❤️
how to make it functional how to integrate it with the Code written??
Hi can anyone tell me where she got that night background from which site I'm unable to find it
Hello, can i use this into my portofolio?? 🙏
@12:42
I'm unable to publish Library.
Please help.
It keeps telling me 'unable to publish 22 changes to the team library'
I'm stuck since I can't work without it
Please help. Thanks
I believe that is a paid feature, I wasn't able to publish SF pro fonts. Instead I copy-pasted texts from the "Components" page.
could someone please tell me, if after creating a layout in figma . can you export to wordpress to become a website? how does this work?
lmao no
why i dont see weather programms with this design?
I just don't understand how can a program be created without coding😶can sb tell me
They're just designing the app - not creating it.
can we use this ui in android studio for project
How can this be coded?
hi can i use this design for production