Web / Desktop App UI Design in Figma

Web / Desktop App UI Design in Figma - Full Course

Рет қаралды 1,342,464

2 жыл бұрын

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 KZfaq
➡ / @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

Пікірлер: 375

@domieSinday 2 жыл бұрын

*Please make a separate tutorial with that cool animation at the beginning.*

@iamtrazed 2 жыл бұрын

would love to know that as well

@the.officialjosh 2 жыл бұрын

It is done with after effect I think

@iamtrazed 2 жыл бұрын

@@the.officialjosh that is very time consuming to do the mouseover effect, i dont think so

@the.officialjosh 2 жыл бұрын

@@iamtrazed yea

@domieSinday 2 жыл бұрын

@@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.

@automatedvideoproduction8505 2 жыл бұрын

This is amazing! I repeated the whole lesson and added some of my own. Learned a lot. Thank you! Please continue

@irvinalexis1572 Жыл бұрын

Ed Ed

@michaelzorko4349 Жыл бұрын

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 :)

@wizzely7718 Жыл бұрын

I am a unity ui/ux designer for 6 years And hell a beauty herz ❤ Amazing work !

@henrythomas7112 Жыл бұрын

Extremely like the video, man. Very helpful and informative. Thank you very much. It is presented so well too. Great, positive work.

@sofiaestimacampos2946 2 жыл бұрын

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

@ordinarymuslim 7 ай бұрын

Hey did u make the portfolio? Any tips for the beginners?

@ofall4643 2 жыл бұрын

Amazing combination of colors, looks really clean

@DesignCodeTeam 2 жыл бұрын

Thank you! Cheers!

@jjaraMontecinos Жыл бұрын

My man's dedication is over the top!

@Ivance1 2 жыл бұрын

Incredible, fantastic job

@swaperman 2 жыл бұрын

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)

@AndrewRusinas Жыл бұрын

)

@KaizenUI Жыл бұрын

Hi, how do you do the smart guide? Is it alt option and key? I can't understand. Please help : ) thank you

@exequielvibar2371 Жыл бұрын

Wow, This is the turorial I really wanted. THank you.

@mine4495 2 жыл бұрын

Loved this, I'm learning UI UX and this is amazing, new subscriber

@DesignCodeTeam 2 жыл бұрын

Awesome! Thank you!

@igorperic5232 2 жыл бұрын

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?

@anony88 Жыл бұрын

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.

@mukeshwarsingh270 Жыл бұрын

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 :)

@poknari Жыл бұрын

Can you involve me? What kind of tech stack that you use?

@atlantic_love 2 жыл бұрын

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!

@DesignCodeTeam 2 жыл бұрын

We definitely have a love relationship with 2000s designs (PS, flash, skeuomorphism). But I can promise that this is scalable and changeable. :)

@anony88 Жыл бұрын

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.

@tamarsepiskveradze1158 Жыл бұрын

i'm amature ui/ux designer and it's a great project, thank you

@aghuraba Жыл бұрын

This is sooooo coooool! Thank you for sharing.

@uidesignwithfigma Жыл бұрын

Thanks for the lesson! 🔥

@k.m.abusyeduzzal6272 Жыл бұрын

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.

@KeishaDeniece 2 жыл бұрын

Thankyou for this video!! Can you please please make a video about making a custom phone theme with icons and stuff?🙏🏾🧡

@_immhaa_ 2 жыл бұрын

Eye-mesmerizing!

@saqib-codes Жыл бұрын

This is amazing 😍

@stern7658 Жыл бұрын

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.

@vipulchandel1447 Жыл бұрын

Thanks a lot for this content i will always be grateful to you 🙂🖤

@DesignCodeTeam Жыл бұрын

My pleasure 😊

@silverwings8486 2 жыл бұрын

Beautiful piece of work

@DesignCodeTeam 2 жыл бұрын

Thank you!

@sousunshine5190 2 жыл бұрын

wowwww love it 🙌🏼

@DesignCodeTeam 2 жыл бұрын

thank you!

@checkupcodes Жыл бұрын

Very nice video, Loved

@KIRAN_DENJI 2 жыл бұрын

can you please make a video of adding animation of app ui in portfolio case study

@burhanahmed80 2 жыл бұрын

I am glad that I've found this channel

@DesignCodeTeam 2 жыл бұрын

Happy to hear that!

@burhanahmed80 2 жыл бұрын

@@DesignCodeTeam just don't forget us when you reach millions of subscribers ❤️ best of luck

@hakkesan_ 2 жыл бұрын

Thank you!

@esmanurertay Жыл бұрын

What program do you use to prepare this wonderful video that you present to showcase your design?

@MyBucketL1st Жыл бұрын

Im definitely going to download this app

@Stefan-lr4wm 2 жыл бұрын

I know nothing about UI Design, but this Video relaxed me 😌

@nikbivation 8 ай бұрын

love this so much, thank you!

@DesignCodeTeam 8 ай бұрын

No problem 😊

@maftunaberkimbaeva7428 2 жыл бұрын

awesome tutorial

@ClickbaiterZ 2 жыл бұрын

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.

@DesignCodeTeam 2 жыл бұрын

Awesome, let us know how that journey goes!

@Qwasieee_P Жыл бұрын

I'm learning html and css right now, so this is both amazing and painful at the same time.

@iminati1042 Жыл бұрын

Same feelings bro🙂💔

@guleenaahmed4880 Жыл бұрын

Why painful?

@yniin7923 Жыл бұрын

It looks so beautiful. I'm trying to repeat this design in figma (following this tut). Can it be realized in real life *code*?

@ashtraysonsundays4274 Жыл бұрын

Wow. Can't believe I made it through all that. I'm proud

@fidibsp Жыл бұрын

thank you!!

@hwj8640 2 жыл бұрын

awesome! It is something I will definitely click on dribbble.

@mousanegm143 Жыл бұрын

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

@sourasithp 2 жыл бұрын

Amazing 😻

@DesignCodeTeam 2 жыл бұрын

Thanks 😆

@ArifMatubber-km4nv Жыл бұрын

Beautiful

@bluehydrogen Жыл бұрын

Fantastic thanks for the knwlage

@devanshigupta1786 6 ай бұрын

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?

@internetmarketing4133 2 жыл бұрын

Very nice video, can you make a series on figma for landing pages and apps for complete begginers

@DesignCodeTeam 2 жыл бұрын

Yes, definitely

@allinone4843 Жыл бұрын

yes please full landing page design

@bobby8630 Жыл бұрын

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.

@Deus-lo-Vuilt 8 ай бұрын

wow nice tutorial !

@mohamadhelaly4979 2 жыл бұрын

thanx alooooooooot , so beautiful, tutorial please keep going

@DesignCodeTeam 2 жыл бұрын

Thank you, I will

@lennartmartin 8 ай бұрын

I would use this 24/7

@economicblast Жыл бұрын

Nice, thank you. Learned A lot!

@DesignCodeTeam Жыл бұрын

Glad it was helpful!

@economicblast Жыл бұрын

@@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....

@user-yd2ee6sf8k 2 жыл бұрын

Please make more tutorials of the intro with basics.

@user-jd3vb4kk8d Жыл бұрын

very cool💎

@CrazyGamerzOfficial 9 ай бұрын

Awesome Work, Keep it up friend!

@rausgetappt 2 жыл бұрын

Hey, I'm really curious how the animation at the beginning of the video was done, thanks! :)

@DesignCodeTeam 2 жыл бұрын

It's coming in the next tutorial.

@prabashanapubudu4989 2 жыл бұрын

love with it😇

@odanilopires Жыл бұрын

Awesome!

@DesignCodeTeam Жыл бұрын

Thanks!

@bloovemusic64 2 жыл бұрын

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

@altalink2230 Жыл бұрын

Amazing design. :) Please tell what is the intro and background music. Thank you.

@Gobrilu 11 ай бұрын

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?

@helptoyou8315 Жыл бұрын

its ossam

@stefdanut123 2 жыл бұрын

so beautiful

@DesignCodeTeam 2 жыл бұрын

Thank you! 😊

@JackHsieh0715 2 жыл бұрын

great thank you !!!!!!!!!!!!!!!!!!!!!!!!!

@DesignCodeTeam 2 жыл бұрын

You’re welcome!

@mdiqbalhossain9832 2 жыл бұрын

অসাধারণ ভালোলাগে আপনাদের প্রতিটি ভিডিও ❤️❤️❤️

@DesignCodeTeam 2 жыл бұрын

Thank you!

@ogunekunsegun6047 2 жыл бұрын

It will be helpful if you can help with the logos you used.

@rewiredbyadhd Жыл бұрын

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😍

@FrankGP.com. Жыл бұрын

Thanks

@kamrul5286 2 жыл бұрын

Wow! What a intro music! 🤩🤩🤩🥰🥰🥰😘😘😘😘

@DesignCodeTeam 2 жыл бұрын

Glad you like it!

@Duss.T Жыл бұрын

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

@springwind98 2 жыл бұрын

The developer is crying right now XD

@jeet_guha1 Жыл бұрын

Lamafo😂

@juliocesar-fc1nm Жыл бұрын

If my ux team created smth like this I would just quit hahah

@dma-eb9zd Жыл бұрын

Could you briefly explain why? (I’m am total noob in app development)

@thegoldenatlas753 Жыл бұрын

@@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.

@Pikoro09 Жыл бұрын

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

@thelastcelebritymfr4621 2 жыл бұрын

Really nice. I would really like to code this Design. I am a Front end Dev student.

@DesignCodeTeam 2 жыл бұрын

Would love the see the results!

@znedj Жыл бұрын

Awesome.

@DesignCodeTeam Жыл бұрын

Thank you! Cheers!

@silvigupta2429 Жыл бұрын

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

@jaloliddinruzikulov8279 2 жыл бұрын

Very godd!

@mcadamss4817 2 жыл бұрын

Wow Thanks!!!!

@DesignCodeTeam 2 жыл бұрын

You are welcome!

@shawnathornton8198 2 жыл бұрын

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😊

@NickBD95 Жыл бұрын

what's keyboard do you use? Sound is very nice.

@user-de8ev2bn2d 2 жыл бұрын

真专业！

@DesignCodeTeam 2 жыл бұрын

Thank you!

@anhtuanuxdesign 2 жыл бұрын

Hi there, how do you remember all the color hex code? 🧐🧐

@pauljohn3898 2 жыл бұрын

Super cool

@DesignCodeTeam 2 жыл бұрын

thank you!

@matioz9125 6 ай бұрын

Great

@fortytwo244 10 ай бұрын

Accessibility has left the room

@demonsjostle 2 жыл бұрын

i love it

@DesignCodeTeam 2 жыл бұрын

Thank you

@ogunekunsegun6047 2 жыл бұрын

I'm looking for the icon you used please what is the name?

@alirezamansoori8138 Жыл бұрын

What app do you use for animation and 3D?

@X-Personalization 2 жыл бұрын

I would pay a lot to have a music program with this exuberant interface

@DesignCodeTeam 2 жыл бұрын

That means a lot, ty!

@Max-sc7vh 2 жыл бұрын

it's just a bomb!

@Unknown-uy2hh 2 жыл бұрын

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???

@DesignCodeTeam 2 жыл бұрын

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.