Designing an App in Figma - A Step-by-Step Guide for Beginners (2024)

preview_player
Показать описание
Learn how you can design your own apps in Figma with this step-by-step tutorial designed for complete beginners! Figma is a free web-based design tool used by professionals and indie devs to create app designs, prototypes and mockups:

🚨 SPECIAL CWC+ OFFER FOR YOUTUBE:

Timestamps:
00:00 Intro
00:48 Why Figma?
03:15 How to Access Figma?
03:42 A Tour Around the UI
21:25 App Prototyping
54:15 Conclusion

🚨 SPECIAL CWC+ OFFER FOR YOUTUBE:

WEEKLY UPDATES VIA EMAIL:

CONNECT:

ABOUT CODEWITHCHRIS:

#Figma #FigmaTutorial #AppDesign
Рекомендации по теме
Комментарии
Автор

Figma is a free web-based design tool used by professionals and indie devs to create app designs, prototypes and mockups. Create your free account to follow along

CodeWithChris
Автор

amazing tutorial, super clear and straight to the point! I really love your structure as well it was insanely easy to follow along! Good job

nunosantos
Автор

thanks, this was a really great explanation/use of auto layout. i totally get it now. i was grouping before but this makes so much more sense. Also, you can change the color of the icon in icons8 *before* you add it to your document. unfortunately, you can't change it after, but i suppose you can re-add it if you need to.

Designyourownblog
Автор

am new to figma and I just wanted to create a wire frame for an app. the basics are explained clearly and straight to the point. Thanks a lot

rootdefault
Автор

This was very helpful to me. It's painful getting through some other Youtuber's tutorials, but I like your style. Thank you!

KimberlyDo
Автор

Really awesome video. I not only learned the basics of how to set up wireframes for iphone, but also your tips and keyboard shorcuts to quickly spin up things. I loved the video!

bleakCode
Автор

Super easy to follow along and a lot of helpful tips about shortcuts and next steps. Thanks for making this video! I’m new to Figma and feel more confident in my ability to use the tool

miltonvento
Автор

I’d love to see a Figma to Code video, where designs are made with the intent to generate code for it using a plugin. Bernardo Ferrari’s “Figma to Code” is really great for it, but without a methodology to your Figma process like components or groups versus frames, then it doesn’t work as intended. I think this would be an effective, efficient, and scalable way to learn coding. Or if you want to hire me to do it that works too.

jeffconner
Автор

Great teacher. I thought I might design an app on my own, but now I know, while I am sure I "could" based on your tutorial, I definitely do not want to spend my energy navigating those tools; so I can outsource that item. Thank you for this amazing tutorial.

mrich
Автор

you can change the icon color even for PNGs at the upper right most side of the plugin palette

mrag
Автор

The middle icon on the bottom of the screen is the target icon in Icons8

Eva-ygqw
Автор

You made it so easy. Like the style with which you presented. keep 'em coming

carlycopeland
Автор

Very nicely done. A good intro to get started. Well spoken and easy to follow along with. Couple of constructive crit's (if you don't mind!):

- have you considered editing some portions? There were a couple instances where you needed to go back and fix a mistake. When following along for the first time, new users may make get confused in the long run process.
- maybe slow down for the first time we're introduced to a new tool, or sub-set menu. There may be times when new users are continually pausing, rewinding, squinting at the screen to see what you did. I know experienced users tend to fly by so fast because the action becomes unconscious. However, with users new to something, it's easy to miss.
- (this one is a personal preference!) no need to see the commentator's face; it is distracting and also masks parts of the screen. Some people may not mind, or even like seeing the face! Everyone is different.

Again, nicely packaged together and an efficient, easy way for newbies to get started. Also, the using of analogies (like the guitar) was a good one, too!

kintsugiforty
Автор

Can you be more specific when it comes to shortcuts? Hotkeys can be a variety of different combinations so saying hotkey or press k as a shortcut is very vague. Or a shortcut sheet would be great! Otherwise great content!

YihanYe-tl
Автор

Amazing tutorial to get started for us Figma beginners 😊

kopilkaiser
Автор

This is super helpful for beginner to follow. Thanks!

nodttt
Автор

You have saved me so much time. Super helpful, thank you sir!

grassifuentes
Автор

Thank you so much for this tutorial, I learnt a lot

Audio-Tales
Автор

Great video! Thank you for sharing your knowledge

dre
Автор

I know nothing about Figma, and excited to develop my first web-based application prototype using Figma

But I am not sure, whether I can develop it using Figma as I still cant project how Figma could assist me

Are there any way I can see the demo on the final product / output of web-based apps using Figma?

bandungmee