Figma UI Design Course - Create a Bike Shopping App

Create a unique app UI in dark mode with angled shapes, glass layers and neumorphic buttons in Figma
Sponsored by Rive - rive.app
📂 Figma File
➡ www.figma.com/community/file/...
[00:00] Intro
[01:48] First screen
[14:27] Second screen
[22:49] Third screen
🖥 Visit our website for more Design tutorials
➡ UI Design Android Quick Apps in Figma: designcode.io/quick-apps-andr...
➡ UI Design Smart Home App in Figma: designcode.io/ui-smart-home
➡ UI Design Quick Apps in Figma: designcode.io/quick-apps-figma
➡ Figma handbook: designcode.io/figma-handbook
➡ UI design handbook: designcode.io/ui-design-handbook
➡ iOS design handbook: designcode.io/ios-design-hand...
➡ UX design handbook: designcode.io/ux-design-handbook
👋🏻 Let's connect!
➡ Twitter: / titepommee
➡ Instagram: / sourasith.design
🎵 Music from Uppbeat (free for Creators!):
uppbeat.io/t/ra/let-good-time...
License code: LUPMF7X6MJVPOMR8
#figma #uidesign #figmadesign

[@OfficialKBTT]

This is going to be my first and new home for learning designing. Top-tier work

[@leontaly]

I really think it's going to be a future style standard, like in this video. But right now people are not ready for that. Good work!

[@brunosoares9932]

Thank you! I really learned a lot on that class!

[@UmairUlhaque]

Thank you for an another amazing and brilliant UI design tutorial. The quality of the content you are bringing to us is just unmatchable as compare to other similar channels. I am curious to know that what is your take regarding the recent acquisition of Figma, like almost of your tutorials are based on this app so are you planning to switch or move towards the other apps such as PenPot or Lunacy etc.?

[@MsTraders007-xs4xb]

Big Fan Love From Pakistan (Peshawar)🤜🤛

[@vipulchandel1447]

I learned lot of things about figma on this page. Thank you so much for this new content. 🖤

[@DesignCodeTeam]

You're so welcome!

[@damianrodriguesquintero1223]

brutalll!!! is amazing the tutorial !! I love it !!!

[@DesignCodeTeam]

Thanks so much!!

[@Ogabek_Kholboev]

Thank you so much for tutorial. It is helping me a lot!

[@durukarayigit1432]

The best soft soft tutorial ever!

[@DesignCodeTeam]

Thank you so much ☺️

[@timothyogese2609]

Best Tutorial of my life yet... Wow... u guys just exploded my design skills

[@AbdulMalik-td7vn]

I won't lie everyday I learn from this page. Thank you

[@DesignCodeTeam]

Appreciate it!

[@dynexe]

Your so detailed ! SUBBED

[@DesignCodeTeam]

Awesome, thank you!

[@rising_sunset]

Love the concept, colors and design. However I feel the bottom navigation would also appear in the cart page.

[@parinsheth4971]

Creativity at it's best! ❤️✨

[@DesignCodeTeam]

Thank you! 😊

[@aaronasare2179]

I Actually learnt lot from this page...it well explained and detailed..

[@DesignCodeTeam]

Fantastic to hear :)

[@julienmarocco]

Great, thanks a lot !

[@DesignCodeTeam]

You are welcome!

[@paininmydroid4526]

Wonderful tutorial.

[@tomashruska2171]

Probably the best UI i have ever.seen

[@DesignCodeTeam]

Thank you so much 🥰

[@Umitto]

Thank you!

[@abhinavdwivedi5858]

Thank you for this content

[@DesignCodeTeam]

Our pleasure!

[@bouzihak88]

Perfect 🎉❤

[@dennischong7915]

Thank you In the setup

[@jasontruter4981]

looks great, I would have componentized more and more auto layout to make the items easier to add.

[@DesignCodeTeam]

Thanks! Great suggestion :)

[@IzumiEvelliCut]

Thank you very much👍

[@DesignCodeTeam]

You are welcome

[@prasadkotian3686]

Hoooooj fyan😍

[@rodrigomachado3402]

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?

[@97Savo]

How to set when I swipe a certain text or image, like yours, orange "squares" appear on which it says how far it is from the edge. I hope you understood me. 😊

[@f00kwhiteblackracismwarsh07]

Fire 🔥

[@DesignCodeTeam]

Thanks 😊

[@mr.chinaski2613]

Awesome content! when did u start to be a UI designer? u must be a senior one!

[@DesignCodeTeam]

No, I'm not senior. this is such a beautiful and meaningful compliment to me. Thanks! :)

[@tejprintbrands7314]

thanks helpful vid

[@DesignCodeTeam]

My pleasure 😊

[@talhasardar4520]

how do i get a copy of ios 16 UI kit for figma? there is only open in figma option , i can't find get a copy button, can you please help..

[@jopadjr]

Amazing work...I came across an article that it is possible to convert Figma to Jetpack Compose

[@shafiibnamasuk5567]

You should make a play list for newcomers, abou how they can start from scratch to advanced

[@ulquiorra1408]

can I use this theme directly on my iPhone?

[@madhavgupta3031]

can this ios kit used for android too ?

[@swastikaggarwal221]

From where you got such high pixels images and logo ?? Pls also tell us ,

[@adnanmumtaz6390]

Where to find bike pictures can you send me website link plzzz..

[@Morgan00111]

Woww Love this I am literally a beginner and still learning and practicing projects like these How do you get all the ideas and inspiration of each project? I noticed you lean towards dark colors alot Please can you walk us through the process of getting this design Like from wireframe mockup and ux research? Like what to seach for and all that This is pretty amazing Thank you

[@DesignCodeTeam]

Thank you so much :) My advice is to do a lot of research, take inspiration from other designs and add your own twist. You can write to me in private on my Instagram or Twitter. I will be pleased to answer and give you some links to help.

[@Morgan00111]

@@DesignCodeTeam thank you so much! Will do

[@tinababaian8934]

[@tinababaian8934]

[@spindext]

@@DesignCodeTeam I'd also love a video on this

[@harshitanimbal1032]

Can put this on my portfolio or will it be a plagiarism issue?

[@mondoshigua]

🇨🇴🧔🏻👍🏼🤝🏼 Saludos desde Colombia.

[@olaokemathew4290]

Thank you so much I truly find your work useful. A quick one with your reply please 🙏 how do you had those ios kit components to your library. Thanks

[@DesignCodeTeam]

Thanks 😊 get a copy of the iOS 16 UI kit from Joey Banks then, go to asset and active the Library. If it doesn’t work, you can take it directly from the page by copy and past.

[@6404ShubhamBawri]

same here ,Did you find the files in the project library

[@eyjoeTV]

Very beautiful design! But I have a problem. I’m doing the tutorial and I have a copy of the file but in the assets, some icons don’t appear. If you can review the file I would be very grateful. Thanks and pelase keep doing this great content.

[@DesignCodeTeam]

Thank you so much :) I updated my Figma file. You can continue the course.

[@eyjoeTV]

@@DesignCodeTeam Thanks to you :)

[@khilafahempire]

is this only design or the app itself also

[@mdiqbalhossain9832]

wow

[@DesignCodeTeam]

Thanks 😊

[@luqmangrune7015]

Everybody love this except frontend developer.

[@shortvidsyt859]

I love sourasith ❤️

[@DesignCodeTeam]

Aww thanks 🥰

[@christopheradehwosa7353]

❤❤❤

[@dannyprotas2772]

how do you view the spacing between different layers/ assets? because my figma does not display these numbers when I am moving selected layers. is this something I would find in my settings?

[@DesignCodeTeam]

Press on Option to see the spacing 😊

[@dannyprotas2772]

@@DesignCodeTeam thank you so much!!

[@ShredzZ]

As a beginner, can this tutorial be used for Sketch user? I know its pretty dumb question but im totally beginner at UI/UX :D

[@DesignCodeTeam]

Yes, Sketch and Figma are pretty similar in term of features. The skills are transferrable

[@TheNNguyener96]

I would use figma over sketch as I believe it’s the industry standard now

[@flyleelee5351]

@@TheNNguyener96 agree...I learned on Figma. I hear Sketch doesn't have real time collab capabilities in a cloud setting like Figma and Figjam

[@playpiano2264]

Is is possible to code?

[@workout.trending]

hi can you tell me please how do i find ios ui kit in the book icon mine it's empty didnt find it ty

[@DesignCodeTeam]

Go to Assets, you will see the book icon, click on it and find iOS UI kit and active it. Make sure to get a copy of it.

[@6404ShubhamBawri]

same here ,Did you find the files in the project library

[@lycan2494]

first

[@aaronasare2179]

Third

[@soumyachatterjee2603]

Second

[@naomihachan4886]

I'm already stuck at 2:57. I don't see anything in my Libraries. How do I get the UI kit in there?

[@MrCatGay]

same

[@DesignCodeTeam]

A lot of people are struggling with this part. You have to get a copy of the iOS 16 UI Kit from Joey Banks. Then, click on the asset (next to layers), go to library and active the iOS 16 UI Kit. If it doesn’t work, you can take directly in the file.

[@6404ShubhamBawri]

Do you find the files in the project library

[@londonsmooth2300]

2:56, its showing me 'including 2 missing libraries', so I'm not able to proceed, any help please? Thanks.

[@DesignCodeTeam]

Did you get a copy of the iOS 15 UI kit ? Get a copy, then click on the library to active it.

[@visualchamber1753]

@@DesignCodeTeam I have a copy but It does not seem to show up in the library

[@visualchamber1753]

Same here. Mine is not showing too!

[@ChatwithMotolani]

Same here

[@londonsmooth2300]

@@DesignCodeTeam I did but not working, just like other people have mentioned

[@gulminababar8562]

Your designs are insanely gorgeous and beyond reality. How much your UX design costs. Exquisitely crafted. What is the price of your design?

[@DesignCodeTeam]

Thank you so much! Unfortunately, we don’t offer freelancing service. Thanks for your interest 😊

[@abdulmoiz94]

I am a beginner, Can I add this to my portfolio after making that?

[@DesignCodeTeam]

Of course, make sure to mention that the design is inspired from DesignCode. Don’t forget to tag me on Twitter or Instagram, I want to see your work ☺️👍

[@devadimastawan8751]

Can you help me how to used IOS 16 UI Kit

[@DesignCodeTeam]

You can get a copy from this link. You can only copy and paste the component to your project if you are a free user. www.figma.com/community/file/1121065701252736567

[@6404ShubhamBawri]

Do you find the files in the project library

[@sffyt696]

7:38

[@ai-bloggers]

🚀🚀🚀🚀🚀

[@DesignCodeTeam]

🙏

[@dtran21k]

Impressive but developer's nightmares

[@mr.bubble1657]

Its a nightmare for android developers to replicate this UI

[@user-lr5zu6fi9i]

🤍🤍🤍thanks)

[@DesignCodeTeam]

You’re welcome ☺️

[@sweatypotato248]

So sad figma this awsome app got sold to greedy company

[@binitgudhka3292]

Content is good but u should work on ur speed it's too fast difficult for beginners so I dislike the video . Keep it up

[@wildcat4435]

Дальше фигмы это не применимо видимо, раз большинство англоязычных сайтов имеют такой убогий вид. И это не удивительно, дизайн выглядит вроде красиво. Но как будто это не реальный сайт, а фейк страница из GTA V или мобильная игра

[@amith_sj]

I don’t, tNice tutorials guy needs to learn to chase a bag

[@jcmediauganda]

but had absolutely no problems to follow Nice tutorials words. You don't have to understand all of tNice tutorials in 10 seconds, just take one step, stop the

[@imthedisabledguy]

BRO WHY ARE YOU MOANİNG