Web / Desktop App UI Design in Figma - Full Course
ฝัง
- เผยแพร่เมื่อ 7 มิ.ย. 2022
- Design a Web app design inspired by Discord and Slack in the Figma design tool.
Sponsored by rive.app - create beautiful animated assets for apps, sites and games.
🪄 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/quick-apps-figma
Resources
🎨 Figma File: www.figma.com/community/file/...
🎨 Apple UI Kit: developer.apple.com/design/re...
🎨 Unsplash Image: unsplash.com
🎨 Futuristic Stroke Patterns: www.figma.com/community/file/...
🎨 Diamond Icons: www.figma.com/community/file/...
🎨 Metaverse 3D Icon Set: www.figma.com/community/file/...
📱 SF Symbols: developer.apple.com/sf-symbols
📱 Dynamic Type: developer.apple.com/design/hu...
🍔 Illustrations: shape.so
🤳 Phone Mockups: angle.sh
Learn UI Design
🖌 UI Design quick apps in Figma: designcode.io/quick-apps-figma
🖌 UI Design for developers: designcode.io/ui-design
🌈 Design system in Figma: designcode.io/figma
🎨 Figma Handbook: designcode.io/figma-handbook
📱 iOS Design Handbook: designcode.io/ios-design-hand...
Learn SwiftUI
📱 Build an app for iOS 15: designcode.io/swiftui-ios15
📱 Build quick apps with SwiftUI: designcode.io/quick-apps-swiftui
🛠 SwiftUI Handbook: designcode.io/swiftui-handbook
Follow Me
🐦 Twitter: / aksonvady
📸 Instagram: / aksondesign
#figma #figmadesign #webdesign
*Please make a separate tutorial with that cool animation at the beginning.*
would love to know that as well
It is done with after effect I think
@@the.officialjosh that is very time consuming to do the mouseover effect, i dont think so
@@iamtrazed yea
@@the.officialjosh They said they use spline for that animation. Spline is much easier than after effects. We only need some guidance on how they did that.
This is amazing! I repeated the whole lesson and added some of my own. Learned a lot. Thank you! Please continue
Ed Ed
I am a unity ui/ux designer for 6 years
And hell a beauty herz ❤
Amazing work !
This is a great tutorial. Thank you for taking the time to create this. It's beautiful work. I am new to Figma and this is really helpful.
I am now a subscriber :)
Amazing combination of colors, looks really clean
Thank you! Cheers!
My man's dedication is over the top!
Amazing Design! Thanks for this tutorial! I'm going to continue this design and make some more screens so I can use it on my portfolio. Thanks for the inspiration, I really love it
Hey did u make the portfolio? Any tips for the beginners?
Loved this, I'm learning UI UX and this is amazing, new subscriber
Awesome! Thank you!
Extremely like the video, man. Very helpful and informative. Thank you very much. It is presented so well too. Great, positive work.
I am from Bangladesh. You write as well as you talk which is a great video for me. I think I can learn something good from your videos. thank you.
Wow, This is the turorial I really wanted. THank you.
i'm amature ui/ux designer and it's a great project, thank you
Incredible, fantastic job
Cool work!) I am now developing my project called the Hive, with a similar functionality) Not as futuristic as yours, but similar in philosophy, and draw it in Neomorphism. Your work is amazing)
)
Hi, how do you do the smart guide? Is it alt option and key? I can't understand. Please help : ) thank you
I'm a back end dev. This was anazing, so I thought but then I get to work, Oh the task is never ending doing backend on these figma template. Sometimes simplicity that actually do the work is far more effective that a bunch of pointless fancy design. But I admire the the creativity.
This is sooooo coooool! Thank you for sharing.
These designs are inspiring. I consider myself to be a full stack dev, working with all levels. I might use some of this design as inspiration for a new site I'm working on. Its a pretty complex game site and I'm making solo, and im doing the same level of work as a team of 10 people.. I like browsing for stuff like this for inspiration. Innovation should happen at all levels, not just the backend or frontend. Its partly why Twitch became so successful. Not as much on the UI front, but definitely the UX and backend portions.
keep going and do update :) I just begin web development and it's no easy task. I wish you complete it :) Will like to connect :)
Can you involve me? What kind of tech stack that you use?
Hey :) when you create projects for clients from client briefs how do you know where to find other solutions from competitors or similar services to figure out which UI components and patterns you need in what screen of your future product? For example where did you find inspiration for seats in the movie theater app you designed few weeks ago?
Thanks for the lesson! 🔥
This reminds me of the old days, going back to the late 1990s and very early 2000s when UI design was a popular thing in web development. You had these console-looking webpage fronts with nice transitions in color and animations, but not scalable or changeable. Pretty static stuff!
We definitely have a love relationship with 2000s designs (PS, flash, skeuomorphism). But I can promise that this is scalable and changeable. :)
I got into web design when I was 13yrs old back in 2002/2003. Freewebs had a page designer. I made a pretty slick website for my runescape (game) clan. Then I got into more advanced stuff with php. Made a lycos account and made some runescape forums with a slick design. It had a couple thousand members, which was a lot back then. Then I got into php nuke and other forum softwares, and got into doing separate standalone websites with php.
I know nothing about UI Design, but this Video relaxed me 😌
Beautiful piece of work
Thank you!
I am glad that I've found this channel
Happy to hear that!
@@DesignCodeTeam just don't forget us when you reach millions of subscribers ❤️ best of luck
Thanks a lot for this content i will always be grateful to you 🙂🖤
My pleasure 😊
It's so clean, beautiful design, very eye catching. I don't have enough knowledge yet in programming. If I became a designer, I'll go back in this video.
Awesome, let us know how that journey goes!
Eye-mesmerizing!
love this so much, thank you!
No problem 😊
Im definitely going to download this app
wowwww love it 🙌🏼
thank you!
Very nice video, Loved
The developer is crying right now XD
Lamafo😂
If my ux team created smth like this I would just quit hahah
Could you briefly explain why? (I’m am total noob in app development)
@@dma-eb9zd web dev here.
Basically the more UI/UX you tack on top of the design the more work for the dev.
Devs have to break down these UIs into pieces and then make em work with different browsers, and screens, and while we have great tools we still have a lot of limits to making those things happen.
those wavy boxes are a pain in the ass to make in CSS with little contribution to the experience, I'd reduce those hard to pull off parts and analyze if they are worth it in the next iteration
Thankyou for this video!! Can you please please make a video about making a custom phone theme with icons and stuff?🙏🏾🧡
This is amazing 😍
Wow. Can't believe I made it through all that. I'm proud
Thank you!
awesome tutorial
Awesome Work, Keep it up friend!
অসাধারণ
ভালোলাগে আপনাদের প্রতিটি ভিডিও ❤️❤️❤️
Thank you!
What program do you use to prepare this wonderful video that you present to showcase your design?
I would use this 24/7
thanx alooooooooot ,
so beautiful, tutorial
please keep going
Thank you, I will
Nice, thank you. Learned A lot!
Glad it was helpful!
@@DesignCodeTeam this isn't an ai voice right? I want to start up my channel but no voice ai I can find that works well....
awesome! It is something I will definitely click on dribbble.
Fantastic thanks for the knwlage
Amazing 😻
Thanks 😆
wow nice tutorial !
can you please make a video of adding animation of app ui in portfolio case study
Beautiful
thank you!!
1 question? Does the app exist? Because it's amazing, it has everything. I would give up on Twitter entirely if the app existed. Please tell me yes or at least you are working on it to make it happen. I'm in love right now😍
I'm learning html and css right now, so this is both amazing and painful at the same time.
Same feelings bro🙂💔
Why painful?
i completed this, loved the tutorial. It turned out so pretty! thankyou I got to learn a lot.I am a cs student, can you tell to showcase this in my resume, should I add figma links?
great thank you !!!!!!!!!!!!!!!!!!!!!!!!!
You’re welcome!
Wow! What a intro music! 🤩🤩🤩🥰🥰🥰😘😘😘😘
Glad you like it!
so beautiful
Thank you! 😊
It looks so beautiful. I'm trying to repeat this design in figma (following this tut). Can it be realized in real life *code*?
Good day @designcode, What's the function of this design, is it a podcast website cos I wanna continue on other pages so I'm trying to get the idea and know how to go about it. Thanks. Will be expecting a feedback
very cool💎
Awesome!
Thanks!
Please make more tutorials of the intro with basics.
Very nice video, can you make a series on figma for landing pages and apps for complete begginers
Yes, definitely
yes please full landing page design
love with it😇
its ossam
Accessibility has left the room
Awesome.
Thank you! Cheers!
I like to design and code, deffo want to try and code this out in React. Not sure how I would build the liquid navbar.
this is better than windows 11 or linux company design but the interesting thing we are just lean to make the design and the button and we are gonna give for every button a task its so complex but its so interesting
Thanks
Hey, I'm really curious how the animation at the beginning of the video was done, thanks! :)
It's coming in the next tutorial.
Super cool
thank you!
Amazing design. :) Please tell what is the intro and background music. Thank you.
Wow Thanks!!!!
You are welcome!
Hello
After we make the designer, how to connect the front end with the back end? (Especially the backend if it is with C# or C++ languages)
Please make a tutorial in this field?
what's keyboard do you use? Sound is very nice.
super
真专业！
Thank you!
Great
nice
Really nice. I would really like to code this Design. I am a Front end Dev student.
Would love the see the results!
thanks
You're welcome!
What is the difference between a Desktop App and a Web App in UI?
I mean the screen size, fonts, colors, the size of the bar at the top where the icon is closed and minimized, and so on
i love it
Thank you
ຊື່ມ່ວນເນາະ ຄືຄົນລາວເລີຍ 😊😊😊
tq
How do you send these design files to the developer? And one more thing you used different colors for side bar and then added blur so it took the background color (due to glassmorphism effect) so what color will you send the developer? Will you ask the developer to use glassmorphism or will you snd him the color of the final product???
In Figma, you can share any file and they get the handoff / inspect features. The blurred layer is supported in both CSS and SwiftUI. For most developers, this is fairly straightforward.
I would pay a lot to have a music program with this exuberant interface
That means a lot, ty!
Very godd!
What app do you use for animation and 3D?
Hola, Sr. xxx, soy su fan, he estado siguiendo sus videos durante mucho tiempo y me he suscrito a sus videos. En sus videos, obtuve mucha inspiración, pero tengo algunas ideas nuevas, podemos comunicarse entre sí Discutir, por favor respóndame😊
it's just a bomb!
bangers lodies.
Умничка!)
Cool designs but why are you not using component-based designs and autolayouts for scalability and maintenance.
The components and auto layout are applied later in the video.
How did u hide the daccord while still the side bar is visible ?
When I hide the daccord, my side bar is also getting hidden, & a dot appears next to it
Nothing beats the looks of Windows Vista
It will be helpful if you can help with the logos you used.
Huh, I thought I was already subscribed.
hope you are now :)
XIN CHAO ANH
I'm looking for the icon you used please what is the name?
Hi there, how do you remember all the color hex code?
🧐🧐