Design a simple UI from scratch for a Food App in Figma - For beginners

Learn how to design simple screens for a food app in the Figma design tool. Full course: designcode.io/quick-apps-figma
📂 Figma file
➡ www.figma.com/file/xjhsy4eEFS...
🔗 Links mentioned in the video:
➡ Apple Design Resources: developer.apple.com/design/re...
➡ Discover design: dribbble.com
➡ QOFOOD - 3D Food and Drink Icons: www.figma.com/file/Owhw4yTkod...
➡ Odamam 🍔 - 3D Illustration: www.figma.com/file/iKPJwQyYuB...
➡ SALY - 3D Illustration Pack: www.figma.com/file/Mi9NrsNnAC...
🖥 Visit our website for more design tutorials
➡ 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/soundroll/feelin...
➡ License code: TNFSVAFXIFYGZGY1
#figma #uidesign

[@Andzteroide]

I don’t think this tutorial is for beginners. I found it way too fast-paced, and there are some points you didn’t really explain. Couldn’t follow it at all. It’s a shame because your design is amazing. For me it was more impressive to see how well you use Figma, than actually learning something myself. Maybe this is for people who have already a basic notion of it.

[@ayoubrezgui3381]

did you find a way to understand it ?

[@ptronic]

yeah it's not for beginners

[@lookthatpigisflying9694]

yeah, I totally agree. She didn't say how to upload the Font (I have downloaded but tried so many times to import just couldn't work), how to download iOS 15 UI Kit for Figma (I found the Kit but just can't add it to my draft). she is really good at designing but too bad I can't have all the tool to follow her steps. sigh

[@hebaashtar3542]

@@lookthatpigisflying9694 did u figure out how u add it to ur draft?

[@fordrivingandothers]

hey i don't know if you still need this but i figured it out. for at me at least, i needed to go into the actual figma desktop app's community. It worked there, i could see all the assets even in a new design file. @@hebaashtar3542

[@rydaprime]

this video was really all i needed rn

[@m7280]

Thank you very much! I completed my very first tiny project! And I am so proud of myself!

[@sourasithp]

Congratulations on your first project! 👏🏻 Your next challenge is to choose another project to improve your skills ☺️

[@digigoliath]

Nice design & thanks for sharing the FIGMA file. This video is very useful for web developers with no design experience.

[@thevideoguys6191]

Very helpful! Thanks for this great walkthrough!

[@DesignCodeTeam]

Glad it was helpful!

[@larameg9553]

This was very helpful I had no idea you can do this much with figma!! WOW!!

[@DesignCodeTeam]

Glad I could help!

[@hussnainraza4483]

Impressive, Love your work and teaching method. 💗

[@mtsinichi5978]

Thank you for sharing, the nice tutorial is just simple for a newbie, useful !

[@gdm_music]

Love this UI

[@ffager83]

Great video! I found all your videos really helpful and each step well described. Keep up the good work! And a happy new year! 👍🏼😊

[@sourasithp]

Thank you 😊

[@aymenkabine7976]

thank you for this video u saved my academic life, commnty

[@jordanjakisa]

Super inspiring! 😊 Keep it up.

[@CinnamoonAnimation]

Thank you very much, very helpful and gracious work!

[@DesignCodeTeam]

Glad you liked it!

[@hskclothing5897]

thanks for your tutorial finally i design a app

[@DesignCodeTeam]

Glad I could help!

[@You_found_rose]

Thank you this video was very helpful ❤

[@DesignCodeTeam]

You're so welcome!

[@phre3k187]

great tutorial thank you so much!!!!!

[@DesignCodeTeam]

You're very welcome!

[@toyforlittlestars]

Very good and simple example for beginners do rocking ☺️ kindly share more Vedio for beginners

[@itsmewhy7355]

I followed you way,but when i searched in assets i found nothing it says “no results”

[@AbelZekaryas-sn4pb]

can you please answer this quesrtion

[@anitapodolak2961]

I have ten the same problem

[@brijenmakwana2040]

Really good. Thanks for it 😀

[@DesignCodeTeam]

My pleasure 😊

[@brijenmakwana2040]

@@DesignCodeTeam I'm a mobile developer and new to designing. Please continue this type of videos on figma 👍

[@DesignCodeTeam]

We’ll definitely post a lot more videos on UI

[@brijenmakwana2040]

@@DesignCodeTeam thank you 👍👍

[@iii_Aree]

Thank u soooo much thats soo helpful

[@DesignCodeTeam]

Glad it helped!

[@talihacangar9277]

it was really nice Thank you

[@DesignCodeTeam]

Glad you liked it!

[@tanishanarang7858]

Really Cool

[@DesignCodeTeam]

Thanks 😊

[@kolababalola7312]

Thanks 😍

[@daniel_youtubechannel8717]

amazing💫

[@DesignCodeTeam]

Thanks 🔥

[@alexvech]

this is great

[@nilafedneva2625]

After this video, I had a desire to create an app)

[@MultiSciGeek]

I can design, but I never know how to start... This was pretty useful, thanks!

[@crquel5977]

Thanks!

[@DesignCodeTeam]

Welcome! :)

[@michaeloforitwumasi1262]

Please can you help me with the resources you used for the design?

[@user-jo9bi6yz8c]

Wow, what a coincidence I am watching this video from Nepal and today's Nepali date is 1st Baisakh 2081 B.S. That means today is a new year in Nepal. So Happy New Year to all

[@rhondasuhrie1703]

How did you distort the circle into a blob?

[@funall9891]

Please show how your color selection methods

[@PhionaSibisi-ve3zw]

will come back here in a few weeks time, i think i lack basics cz i cant understand since the font instruction at the beginning

[@UsmanPro]

Vodafone Mobile App UI UX Design Using Figma 🎉 Full Video: kzbin.info/www/bejne/hZzcYYRtor-Jfpo

[@ogulnurbegjanova4773]

hello. I'm totally new to UI design. can you please show slowly or tell how you did bubble shape when coloring. I couldn't do it

[@malice206]

Hey at 2.43 she draws another one - so when you draw a circle click the symbol on the top which appears near component one that allows you to deform the shape

[@InfoAufArabisch]

Do I need to stick with the same hight always? What if I have a lot of content to be displayed on the same screen?

[@vishg173]

Hi... im not getting the status bar in my figma.. how do i add it

[@otithankgod2033]

I tried to duplicate the 3d illustration but the option wasn't there. And how do I download the fonts into figma

[@gelwinaraya4536]

UI means focusing on the design? and the UX job is to bring the UI design to work?

[@enynetchannel9355]

videonya keren, moga tambah berkembang''''''''''''

[@phre3k187]

when i search assets for "dots" it comes up with no results, why?

[@StevenGSamuel]

You are using a Macbook right? Will it work if i do the same thing in windows?

[@user-us2mt2lq8g]

how can you find what you need in the assets? whenever I type a component it doesn't appear, only give me the " no result " :( do I need to download it or something ?

[@dharshini7905]

same issue

[@DurdanHsnova]

hello i dont understant,please help. How add statis bar from assets. I can't do it

[@aimeemoore3104]

Would we still use the iOS kit for Android?

[@alexandras.7778]

i used to design this beautifully ...i was so hopefull, then i learned how real world apps try to implement their design as fast as possible and they want you to use angular material components who are such a pain in the ass to rewrite and you end up doing as much as possible from the design, and for the love of God how can i use semibold in html??

[@MultiSciGeek]

Can you link the Design Code UI kit plz?

[@itccioh9364]

Mam...your teaching level is super but please like slow video upload..to usefull for beginners

[@user-if6tm4vv9p]

nice

[@vivlogs9752]

I have two questions : 1) Easy UI Designs is the title of the project or a UI Design kit ? If it's a kit how can i download it ? 2) How can i dowlnoad the Designcode plugin to access the community resources on figma ?

[@marokhlifa7159]

did you find a solution ?

[@vivlogs9752]

@@marokhlifa7159 nope

[@annais5689]

Hello Can I ask something? How can I add the status bar to Assests? I got the UI kit to apple but I couldn't apply the status bar to Assests

[@DesignCodeTeam]

You can copy directly in the iOS 15 UI KIT and then paste to your Figma page.

[@MultiSciGeek]

How do I add these assets to my projects?

[@elvinqachayli4840]

how you bring illustration from one page to another

[@swastikjainsj]

apple kits i can use on android ?🤔

[@nixxxxx_01]

how to get the UI kit?

[@sakaido_shanae]

how do you access status bar in assests

[@teepaul911]

nice very helpful. but it probably will look confusing to people who don't know much/are just starting with figma

[@ChandanSingh-qm9qk]

Yes it is too fast

[@feliciaphan506]

how do you add the assets?

[@user-lj3nu9cx4e]

How can I use the free UI kit?

[@serenatvarol9210]

How do i get libraries in figma?

[@Joseph-hw5ml]

you dey madddd

[@summerdives]

In 2:27 how did she make the eclipse into a .... different shape?

[@flywithlovee]

Can you please show how to download and run those kits(apple, UI)? I couldn`t do it.

[@nikhilmohan7736]

Did you find out how to download that?

[@banchodesrikanth5375]

@@nikhilmohan7736 hello bro

[@banchodesrikanth5375]

Mam can we download in figma we are using windows 10

[@NasiBakarrr]

Cannot find the duplicate icon:(

[@kxjanaaa]

How to do the frame?

[@huotkosorl]

Great with thanks

[@DesignCodeTeam]

You're welcome!

[@anotherone5415]

There are some steps that have been cut the specifications and that's where I lose track

[@mcozio1429]

do you do such creations for companies?

[@makrimkarim8503]

Tank you sourasth🤣👍👍👍👍

[@DesignCodeTeam]

Welcome 😊

[@PerfectTag]

How about you show how to setup ios in figma

[@parthibanm72]

May i know what is the name of UI is this pls any one tell me this

[@verdyan2242]

😍

[@user-gt9iw7bp7x]

Thank-you for setting up Korea subtitle. It's gonna help me

[@veselinivanov1886]

Thanks!

[@DesignCodeTeam]

thanks to you

[@elvinqachayli4840]

could u tell me how did you create this kinda cool color i tried but i couldn't please teach about us

[@elvinqachayli4840]

about it to as

[@workout.trending]

how can i find status bar, home indicator in the asset ?

[@DesignCodeTeam]

You can get a copy here: www.figma.com/community/file/984106517828363349

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

[@priherculano]

pelo que eu entendi do seu comentário, você gostaria de algo como o FigJam?

[@ApnePunch]

I'm not able get anything in assets do I need to purchase premium version ?

[@hassan_jaffery]

same here

[@user-dt3vb1zz9q]

can you please give me community link

[@deuay3143]

The buttons are too small

[@chind0na]

Those blobs area pain to create in code unless using a png. 😅

[@shubhsitapara6298]

i am not getting anything in assets. What to do now???

[@DesignCodeTeam]

Do you have a paid Figma account? If not, you'll need to go directly to their file and copy and paste it onto your canvas.

[@fabbioshandy148]

amazin!!!!!, please give me tutorial again

[@DesignCodeTeam]

Thank you! We have several tutorials for you :)

[@oladokunolawalebabatunde8821]

Can someone demonstrate interface metaphor for me?

[@shahriarragib8035]

Hey where are i found the assesst thats are use in your design first to last. please response me.

[@DesignCodeTeam]

I can't share the links here because they will delete. Go to Figma Community, tap Joey Banks," the creator" and select iOS 15 UI Kit :)

[@shahriarragib8035]

@@DesignCodeTeam thank you so much 🥰🥰

[@itzboyon6983]

@@DesignCodeTeam Thanks

[@muhammadsidiq301]

mbak satu ini keren kali

[@bagasputra2812]

cant use iOS 15 KIT . any can help?

[@gunaya2469]

mee too bruh .did you find any solution

[@teenageworrior1634]

2:25 how you convert this ellipse into curvy shape ???

[@kiruthik.design]

After creating a ellipse just double tap it You can adjust as you wish

[@abhishekchettri8807]

Which software is this?

[@DesignCodeTeam]

It's Figma. :)

[@elle381]

❤

[@risonefoot]

very good but too fast

[@deletedaccount9403]

the background music is way too loud.

[@user-yo1nt2en1f]

1:10 2:15

[@studentgaming3107]

nice video but the music makes me have anxiety

[@wilsonnaomi7000]

I didn’t see status bar in my assets ..how do I go about it ?

[@pomyata_myata]

How do i download UI Kit in my projects? I can only copy from the whole ui kit file, how do i search assets just in my project like you did on 1:17, without need to switch between files?

[@DesignCodeTeam]

Do you see Asset next to Layer? It's on the top left side. You will see the search field. Next to it, there is a book icon. Click on it, and you must activate the IOS 15 UI Kit from Figma by Joey Bank. Once it is activated, you can search in search example: Status bar.

[@letmeexplain5612]

@@DesignCodeTeam i cant find dots in asset

[@bismillah_brush]

Why I feel like I wasted my time here clicking on the links given and then finding those are just view only files. What I have to do with that..Like seriously...girl your should have provided the open files so that we can practice.

[@BlondeVlogJournalist]

hey, there's a channel named Wilson Wings that I thinks been reposting ur stuff

[@warmachine676]

Can u please tell me How much do you charge for this UI design?

[@GranzDesign]

Ok video... First dont just show what to download, show how you download it too! I think many have this problem and cant even start ur tutorial cuz they are missing this step.