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

Подписаться 308 тыс.

Просмотров 621 тыс.

50% 1

Learn how to design simple screens for a food app in the Figma design tool. Full course: designcode.io/...
📂 Figma file
➡ www.figma.com/...
🔗 Links mentioned in the video:
➡ Apple Design Resources: developer.appl...
➡ Discover design: dribbble.com
➡ QOFOOD - 3D Food and Drink Icons: www.figma.com/...
➡ Odamam 🍔 - 3D Illustration: www.figma.com/...
➡ SALY - 3D Illustration Pack: www.figma.com/...
🖥 Visit our website for more design tutorials
➡ UI Design Quick Apps in Figma: designcode.io/...
➡ Figma handbook: designcode.io/...
➡ UI design handbook: designcode.io/...
➡ iOS design handbook: designcode.io/...
➡ UX design handbook: designcode.io/...
👋🏻 Let's connect!
➡ Twitter: / titepommee
➡ Instagram: / sourasith.design
🎵 Music from Uppbeat (free for Creators!):
➡ uppbeat.io/t/s...
➡ License code: TNFSVAFXIFYGZGY1
#figma #uidesign

Опубликовано:

25 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 232

@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 7 месяцев назад

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

@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 ☺️

@itsmewhy7355 Год назад

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

@AbelZekaryas-sn4pb 7 месяцев назад

can you please answer this quesrtion

@anitapodolak2961 6 месяцев назад

I have ten the same problem

@citraaam 3 месяца назад

you can search it first from the community

@reshmashankar7055 Месяц назад

you go to your drafts and then create a new one there yu wil find assets after file in left bar

@larameg9553 10 месяцев назад

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

@DesignCodeTeam 9 месяцев назад

Glad I could help!

@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

@digigoliath 2 года назад

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

@gdm_music 7 месяцев назад

Love this UI

@hskclothing5897 2 года назад

thanks for your tutorial finally i design a app

@DesignCodeTeam 2 года назад

Glad I could help!

@ffager83 2 года назад

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 2 года назад

Thank you 😊

@CinnamoonAnimation 10 месяцев назад

Thank you very much, very helpful and gracious work!

@DesignCodeTeam 9 месяцев назад

Glad you liked it!

@rydaprime Год назад

this video was really all i needed rn

@flywithlovee 2 года назад

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

@nikhilmohan7736 2 года назад

Did you find out how to download that?

@banchodesrikanth5375 Год назад

@@nikhilmohan7736 hello bro

@banchodesrikanth5375 Год назад

Mam can we download in figma we are using windows 10

@thevideoguys6191 2 года назад

Very helpful! Thanks for this great walkthrough!

@DesignCodeTeam 2 года назад

Glad it was helpful!

@nadaadil7254 3 месяца назад

😊thanks this was very useful to me you are amazing at your work

@UsmanPro 2 года назад

Vodafone Mobile App UI UX Design Using Figma 🎉 Full Video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Oky0Q7mZVH8.html

@nilafedneva2625 Год назад

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

@hussnainraza4483 Год назад

Impressive, Love your work and teaching method. 💗

@MultiSciGeek 5 месяцев назад

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

@phre3k187 5 месяцев назад

great tutorial thank you so much!!!!!

@DesignCodeTeam 4 месяца назад

You're very welcome!

@viablesubtlety 9 месяцев назад

Super inspiring! 😊 Keep it up.

@MahmoudGhonim-m6b Месяц назад

Nice tutorial, from where you got this color palette for this type of gradient.

@rhondasuhrie1703 Год назад

How did you distort the circle into a blob?

@iii_Aree 10 месяцев назад

Thank u soooo much thats soo helpful

@DesignCodeTeam 9 месяцев назад

Glad it helped!

@mtsinichi5978 2 года назад

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

@toyforlittlestars Год назад

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

@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

@Anneal-shaya Год назад

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 10 месяцев назад

same issue

@brijenmakwana2040 2 года назад

Really good. Thanks for it 😀

@DesignCodeTeam 2 года назад

My pleasure 😊

@brijenmakwana2040 2 года назад

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

@DesignCodeTeam 2 года назад

We’ll definitely post a lot more videos on UI

@brijenmakwana2040 2 года назад

@@DesignCodeTeam thank you 👍👍

@michaeloforitwumasi1262 Год назад

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

@talihacangar9277 Год назад

it was really nice Thank you

@DesignCodeTeam Год назад

Glad you liked it!

@You_found_rose Год назад

Thank you this video was very helpful ❤

@DesignCodeTeam Год назад

You're so welcome!

@belovethstephen1452 3 месяца назад

Thank you for this detailed, easy to replicate tutorial. However, I cant tend to find fonts on the User Interface guidelines. Maybe I ain't doing something right or the site's been redesigned. Please can someone kindly put me through?

@victorokpo5282 Год назад

Slow down you are too fast for beginners if you want to teach other you have to slow down

@TheMediaLogoEditor928 Год назад

Slow it down then.

@LinneaBooth Год назад

@@TheMediaLogoEditor928 also not just the pace, since video is stated ”for beginners” it would be nice to have her explain what she is doing as she does it ”i click here - to do this, that makes this happen” this video feels more like a showcase of her doing a simpleish design. Supertalented! But as a beginner it would help if it was slowed down both tempo and speaking pace

@elixir375 9 месяцев назад

Bouy

@nr-tx9bo 8 месяцев назад

where did she even get her assets from

@amirhamzah6146 7 месяцев назад

boahhh @@elixir375

@PhionaSibisi-ve3zw 7 месяцев назад

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

@ogulnurbegjanova4773 2 года назад

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 2 года назад

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

@gelwinaraya4536 Год назад

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

@mhd4283 11 дней назад

how can i hide the rest of cercle that are outside the frame

@daniel_youtubechannel8717 7 месяцев назад

amazing💫

@DesignCodeTeam 7 месяцев назад

Thanks 🔥

@StevenGSamuel 2 года назад

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

@yil.summer 8 месяцев назад

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

@rizz-gaming356 21 день назад

When you create an eclipse press enter them u can change the shape as u want

@MoumitaHussein-y9w 21 час назад

@@rizz-gaming356thanks

@rizz-gaming356 13 часов назад

@@MoumitaHussein-y9w no worries

@alexandras.7778 11 месяцев назад

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

@anirudhnavalgund1820 2 месяца назад

can projects like this be added to portfolio ?

@annais5689 2 года назад

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 2 года назад

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

@ApnePunch Год назад

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

@hassan_jaffery 10 месяцев назад

same here

@anotherone5415 Год назад

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

@phre3k187 5 месяцев назад

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

@h04-h4j 3 месяца назад

I DIDINT find the Angular buttom in Fill why ??

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

@simbamadungwe 3 месяца назад

What about the design of a tablet?

@joelowry7839 3 месяца назад

Thanks for your video. However in my opinion the music is distracting

@김찬호-p8d 2 года назад

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

@itccioh9364 Год назад

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

@MultiSciGeek 5 месяцев назад

Can you link the Design Code UI kit plz?

@otithankgod2033 Год назад

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

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

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

@tanishanarang7858 2 года назад

Really Cool

@DesignCodeTeam 2 года назад

Thanks 😊

@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

@MultiSciGeek 5 месяцев назад

How do I add these assets to my projects?

@kagayakuangel5828 2 месяца назад

IKR especially that multi color background thing lolll I'm building React Native Mobile Apps

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

@elvinqachayli4840 Год назад

how you bring illustration from one page to another

@mcozio1429 6 месяцев назад

do you do such creations for companies?

@ChauBui-e7g 8 месяцев назад

How can I use the free UI kit?

@NasiBakarrr Год назад

Cannot find the duplicate icon:(

@funall9891 Год назад

Please show how your color selection methods

@PerfectTag 7 месяцев назад

How about you show how to setup ios in figma

@vishg173 Год назад

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

@Carlpechera Месяц назад

am... Ma'am are you sure this is for biginners?

@alexvech 8 месяцев назад

this is great

@parthibanm72 4 месяца назад

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

@kolababalola7312 Год назад

Thanks 😍

@INVETINVET 3 месяца назад

how to add illustrations to my page ? ))))

@serenatvarol9210 10 месяцев назад

How do i get libraries in figma?

@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

@nixxxxx_01 Год назад

how to get the UI kit?

@sakaido_shanae Год назад

how do you access status bar in assests

@swastikjainsj 2 года назад

apple kits i can use on android ?🤔

@shubhsitapara6298 6 месяцев назад

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

@DesignCodeTeam 6 месяцев назад

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.

@kxjanaaa 6 месяцев назад

How to do the frame?

@makrimkarim8503 Год назад

Tank you sourasth🤣👍👍👍👍

@DesignCodeTeam Год назад

Welcome 😊

@rodrigomachado3402 2 года назад

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?

@afterhourswatcher Год назад

Thanks!

@DesignCodeTeam Год назад

Welcome! :)

@veselinivanov1886 Год назад

Thanks!

@DesignCodeTeam Год назад

thanks to you

@blurabbit6476 3 месяца назад

I need a tutorial for this tutorial

@feliciaphan506 11 месяцев назад

how do you add the assets?

@shahriarragib8035 2 года назад

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

@DesignCodeTeam 2 года назад

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 2 года назад

@@DesignCodeTeam thank you so much 🥰🥰

@itzboyon6983 2 года назад

@@DesignCodeTeam Thanks

@HajarElshrief Год назад

can you please give me community link

@enynetchannel9355 Год назад

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

@warmachine676 2 года назад

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

@huotkosorl Год назад

Great with thanks

@DesignCodeTeam Год назад

You're welcome!

@manthan_vyas Месяц назад

Ui Designing 😍 UI Development 💀

@chind0na Год назад

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

@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 6 месяцев назад

Which software is this?

@DesignCodeTeam 6 месяцев назад

It's Figma. :)

@istiaquebeenkhurshid9892 Год назад

in case you didnt know - uisng template is not MAKING FROM SCRATCH

@Joseph-hw5ml Год назад

you dey madddd

@pomyata_myata 2 года назад

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 2 года назад

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.