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 ⚡cwc.to/figma
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!
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.
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
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.
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.
Thank you for this video. Well simplified and easy to follow. But please i can't find "spacing mode" on my advanced autolayout setting. Any idea what I'm doing wrong or not doing?
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!
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!
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?
Hi Ian! Thanks for watching the video. You may post your question on our CodeCrew forum codecrew.codewithchris.com and have our tech support staff help you. - Pat
We suggest posting your question on our CodeCrew forum and have our tech support staff help you out. Just visit this link codecrew.codewithchris.com - Pat
putting in....they are only visible on the mini soft roll preview, I can’t do sNice tutorialt without seeing what notes are being played...i can’t even
I'm not gonna say you do or you don't. I'm not a doctor butttttttttttt...... I had a similar problem when trying to learn new tNice tutorialngs and it helped
I think it will all depend on your workflow! Figma's collaboration, plugins, community, and features (like Frames, code generation) really help us a lot with our own. Not to mention the fact that it's also browser-based! - JC
Hey Mark. If you have any questions you can post on our CodeCrew forum (codecrew.codewithchris.com) so our tech support staff can further assist you :) - Pat
Hey there! Chris wants to be able to provide diffrent kinds of tutorials for our subscricbers and he's able to do so with the help of our guest teachers who are willing to share their knowledge. :) - Pat
Hey Zaid! Thanks for learning with us! Keep an eye on our channel for more videos like this in the future. You can also share your tutorial recommendations here: app.productstash.io/codewithchris#/ideas :) - Pat
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
⚡cwc.to/figma
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
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!
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
This was very helpful to me. It's painful getting through some other TH-camr's tutorials, but I like your style. Thank you!
You're very welcome! - Pat
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.
You made it so easy. Like the style with which you presented. keep 'em coming
Glad you like them! Thanks for watching! :) - Pat
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
Glad it was helpful! Thanks for learning with us! - Iñaki
you can change the icon color even for PNGs at the upper right most side of the plugin palette
Great tutorial! Thanks for sharing!
Amazing tutorial to get started for us Figma beginners 😊
This is super helpful for beginner to follow. Thanks!
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.
Great suggestion! We might just do a tutorial video on that next time! :) - Pat
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.
You have saved me so much time. Super helpful, thank you sir!
Thanks for watching! I'll be sure to let Chris know :) - Iñaki
Super nice video tutorial!!
Thank you for your video tutorials
And thank you for learnin with us! :) - Pat
Thank you so much for this tutorial, I learnt a lot
The middle icon on the bottom of the screen is the target icon in Icons8
Around 21:00 changing the padding moves "Today" for me, but the "menu" and "more" keep staying where they were
25:44 fix this position is moved to prototype tab
Thank you for this video. Well simplified and easy to follow. But please i can't find "spacing mode" on my advanced autolayout setting. Any idea what I'm doing wrong or not doing?
This was super helpful. Thanks!
Great video! Thank you for sharing your knowledge
Thank u Chris
Finally a working method
Glad it was helpful! Thanks for watching! - Pat
but how can you save it? if you want the wireframe to be exported?
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!
Hi I'm a beginner looking to stick to one tutorial, does this tutorial still applies in october 2024 with the current Figma settings?
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!
Thank you for the feedbak! We'll keep those in mind :) - Pat
My best video yet! 👍
Glad you liked it! Thanks for watching! - Iñaki
thank you so freaking much oh my god
Great tut, please make a full video on requirement gathering to finish design product 😇
Thanks for watching! You can post about your tutorial recommendations here app.productstash.io/codewithchris#/ideas - Pat
@@CodeWithChris Yes thank you☺
very helpful, thank you for well explaining.
You are welcome! - Pat
Nice tutorial.... Very helpful
Thanks for watching! :) - Pat
great video!
Thank you for your reply!
No worries! - Pat
thank you for the video. its simole and clear.
it's a tragedy that most of these tutorials are not using the native design system for iOS.
Thank you!!!!!
You're welcome!!! :) - Pat
hey great vid! is there a way to change the time on the iphone status pluggin?
Thank you
Don’t be afraid, just embrace it.
Thank you!
Thank you for learning with us! :) - Pat
A note: you can change the color of icon by clicking on the circle in the left of "png"
How much?
Thanks 😊
No problem! Thanks for watching! 😊 - Pat
@@CodeWithChris Right now I’m studying with your CWC
It works for sharing.
Thanks
could you share your presentation please? thanks for the videooo
As always, everything is super. Waiting for new cheats from your side
Thank you for learning with us! We'll be uploading new lessons soon! :) - Pat
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?
bro do you kmow to built an OS
It seems they restricted the Free plan to 3 files and 3 pages recently?
22:30 / 54:49
how can i detach instance in latest version of figma
Are the IOS Glyph icons found in Icons8 exactly the same (including naming conventions) as those found in SF Symbols app?
Hi Ian! Thanks for watching the video. You may post your question on our CodeCrew forum codecrew.codewithchris.com and have our tech support staff help you. - Pat
Is it the last build? Can't find live version :(
Hey Sergio, here you go www.figma.com/file/CLlq2UzMh96j5bFP1Jz03m/%5BResource%5D---Figma-Practice?node-id=5%3A4 - Pat
What if you're designing in the landscape position. How do you define the layout in that scenario?
We suggest posting your question on our CodeCrew forum and have our tech support staff help you out. Just visit this link codecrew.codewithchris.com - Pat
basically
Stick with it it gets easy over ti
Yup! Just give it time and keep on learning! - Pat
putting in....they are only visible on the mini soft roll preview, I can’t do sNice tutorialt without seeing what notes are being played...i can’t even
Nice tutorials 😢on it
Do you need to learn Figma as an iOS developer?
but there is a benefit in it))
the best hack
Thank you! - Pat
I'm not gonna say you do or you don't. I'm not a doctor butttttttttttt...... I had a similar problem when trying to learn new tNice tutorialngs and it helped
TH-cam has the solution to every single problem! CodeWithChris too!
@AdrienVillez
just dropped by to say that your buttons on the thumbnail are on the wrong side of the iPhone... 🤔
liked subbed and would donate LOL
LOL thank you!! - Pat
14:36
Thanks for watching! - Iñaki
Wish i was
chris, i think xd is better than Figma, what's you thought?
I think it will all depend on your workflow! Figma's collaboration, plugins, community, and features (like Frames, code generation) really help us a lot with our own. Not to mention the fact that it's also browser-based! - JC
@@CodeWithChris thank you
You’re not explaining the things you do , you need to explain them to people who doesn’t know
did u learn?
If you have any questions you can post on our CodeCrew forum (codecrew.codewithchris.com) :) - Pat
So we still out here struggling with ourselves or has anyone conquered? Lol
Hey Mark. If you have any questions you can post on our CodeCrew forum (codecrew.codewithchris.com) so our tech support staff can further assist you :) - Pat
Not one of your team's best videos. this should have been broken out into smaller videos and go a bit slower and deeper into the settings.
Thanks for the feedback! Will let the team know about this. - Pat
I don't think it is necessary to introduce shortcuts for beginners.
possible if you demonstratring or explaining pls avoid reapeating the words cz it makes ppl confuse heheh .
Foreal lmfao
pls bring back chris - this guy says that we dont have to worry about almost every option - well then why are you giving this tutorial?
Hey there! Chris wants to be able to provide diffrent kinds of tutorials for our subscricbers and he's able to do so with the help of our guest teachers who are willing to share their knowledge. :) - Pat
Nah i am a sigma not a figma😂 jk
🦗
i dont like the video its useless
that was a amazing class for me as a beginner thankyou @codewithchris hope to see more videos like advance feature
Hey Zaid! Thanks for learning with us! Keep an eye on our channel for more videos like this in the future. You can also share your tutorial recommendations here: app.productstash.io/codewithchris#/ideas :) - Pat
Thank You!
You're welcome! Thanks for watching! - Iñaki