Figma beginner crash course 2024 | UI/UX Course | Design with me in Figma & Prototype

No video

Figma beginner crash course 2024 | UI/UX Course | Design with me in Figma & Prototype

Рет қаралды 8,101

Күн бұрын

🚨Follow along → www.figma.com/community/file/...
☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Variables 101 - • Figma Variables for be...
2. Figma Auto layout 2023 - • Learn Figma Auto Layou...
3. Figma Project Set Up - • Figma Project Set Up f...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼.
I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Intro
00:16 Figma file structure
00:52 File panels
02:28 Design panel (shapes & images)
03:13 › Transform
07:53 › Layer
08:30 › Fill
09:48 › Stroke
11:21 › Effects
12:47 › Alignment & Distribution
16:38 Text
19:12 › Text resizing
22:38 Frames
23:36 › Frames vs Groups
27:24 › Constraints
30:35 Styles
35:09 Design with me
48:48 Prototyping
49:01 › Navigate to
51:25 › Scrolling
53:33 › Reset scrol position
55:27 › Open overlay
57:30 › Prototype environment
58:36 Summary
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma

Пікірлер: 75

@MikeBalance 2 ай бұрын

Thanks!

@TDSunshine 2 ай бұрын

Thank you so much! I’m glad you found the video helpful 🙏🏼☀️💛

@centrealm-manlyscribe4202 2 ай бұрын

Best Figma crash course i've found so far! Even on normal speed the presenter doesn't waste any time! Real life scenario examples too! Smashing!! Gunna keep this one open and work my way through it along side my own project - no other tutes needed at this stage!!

@TDSunshine 2 ай бұрын

Thank you so much! ☀️🙏🏻💛

@user-wb1pk8lw4f 4 ай бұрын

hands down one of the most engaging figma tutorials. youre a star

@TDSunshine 4 ай бұрын

Thanks! ☀️🙏🏻💛

@NilsSalzer 3 сағат бұрын

your videos are absolutely amazing!

@KshitijShah89 5 ай бұрын

Thanks for teaching! Amazing videos!

@TDSunshine 5 ай бұрын

You're welcome! ☺️☀️🙏🏻

@alinasiri9173 Ай бұрын

The way you teach is awesome. I hope you continue to grow quickly. Thank you!

@TDSunshine Ай бұрын

Thank you! ☀️🙏🏻💛

@al75an 6 ай бұрын

you are AMAZING! thank you so much for this course its really helpful 🙏

@TDSunshine 6 ай бұрын

Glad it was helpful! ☀️💛

@surekas1347 Ай бұрын

thank you so much ,you teach like a pro .you are a life saver

@TDSunshine Ай бұрын

aww thanks! ☀️🙏🏻💛

@user-ot2zu5mv4v 20 күн бұрын

Grate Work!!

@TDSunshine 2 күн бұрын

☀️🙏🏻

@harshit7600 6 ай бұрын

Eagerly waiting for for the next video!!

@TDSunshine 6 ай бұрын

🙏🏼☀️

@AntanasGeguzinskas 6 ай бұрын

OMG :) You are amazing :)

@TDSunshine 6 ай бұрын

Thanks! 🙏🏻☀️

@Clintoncoheniii 5 ай бұрын

Glad I found this channel! I've been trying to figure out how to use Figma for quite some time but the other channels I've seen aren't relatable. Love your teaching style and personality. It makes it easy and fun. Thanks!!! Please, please, please cover website mockups some time in the near future. 😀

@TDSunshine 5 ай бұрын

Aww yay I'm glad you are finding my channel helpful! ☀️💛🤗

@KamranShahid-R 6 ай бұрын

One of the best lesson I have ever watched ❤

@TDSunshine 6 ай бұрын

Thanks!! 🙏🏼☀️

@juantuvieja4110 2 ай бұрын

Hey girl! You have the best Figma crash course, greetings from Argentina!!

@TDSunshine 2 ай бұрын

aww Thanks! ☀️🙏🏻💛

@kakanishalemraju9995 6 ай бұрын

wow amazing tutorial, what a explanation just i watched this whole video with out touching the mouse, in all this 1hour video never get bored even in 1min, learning with you never get bored, you are amazing teacher 🙏🙏

@TDSunshine 6 ай бұрын

thank you! Im glad it helps ☀️💛

@sfxs8235 5 ай бұрын

Im really so happy to find ur channel at the best time of designing❤️please provide more and more clips

@TDSunshine 5 ай бұрын

Thanks! will do!☀️🙏🏻💛

@mahamudurrahmanshaown6724 6 ай бұрын

very informative and amazing ✨✨

@TDSunshine 6 ай бұрын

thanks! 🙏🏻☀️

@sendd1555 6 ай бұрын

Awesome! You are covered mostly Figma in a short time with short and crisp. We are expecting Next week a complete project and organization pages and files in Figma.., Thank you!

@TDSunshine 6 ай бұрын

😅

@kamilwaszewski 6 ай бұрын

Nice video! I didn't know about the shortcut with Shift to reveal a group alignment options :D

@TDSunshine 5 ай бұрын

Its so good right?? 🙏🏻☀️

@kamilwaszewski 5 ай бұрын

@@TDSunshine Yes, cool one ;) Hidden gem :D

@leaz2868 6 ай бұрын

I really like your content, all your vidéos are really useful. Thank you so much for sharing 🙏

@TDSunshine 5 ай бұрын

You're welcome! 🙏🏻☀️💛

@shrishti93 5 ай бұрын

please make more videos on interface design and prototype. thank you so much. keep it up so that we can get such a useful content more.

@TDSunshine 5 ай бұрын

Great idea! thanks! 🙏🏻☀️🤗

@SamanticsNL 4 ай бұрын

Love the tutorial! Thank you for that. One thing I did not see you doing is making sure the white space/gaps between the content when designing. How do you make sure that items in a frame are all evenly and consistently spaced out? Do you use variables or is there a magic trick for doing that?

@TDSunshine 3 ай бұрын

Thanks! well you can use the alignment and distribution tools to make sure that all the items inside are evenly spaced! and of course, you could also turn your frame into an auto layout (which is basically like a magic trick) I hope that helps! 🙏🏻☀️💛 *Figma Auto layout 2024* - kzfaq.info/get/bejne/f7Z8lbOAvqy4eKs.html

@riturani7426 6 ай бұрын

Hey #TD sunshine a great video with nice explanation as always ..❤

@TDSunshine 6 ай бұрын

Thanks! 🙏🏻☀️

@easyprogramminglessons2943 6 ай бұрын

I have subscribed your channel.

@TDSunshine 6 ай бұрын

Thanks! 🙏🏼☀️

@terrificarts6654 6 ай бұрын

I am a beginner but since I started following your videos, I felt like a pro now.😊 Thank you for always presenting a well elaborate tutorial. Please can we get a short video on how to design a mobile product for a business company?

@TDSunshine 6 ай бұрын

Aww thanks! I’m glad you’ve found my videos helpful ❤️🙏🏼 I’ll ad the idea to my list of videos! ☀️🙏🏼

@juliajeanbean 22 күн бұрын

thanks so much for this tutorial! about halfway through and it's incredibly helpful. i think your figma "follow along" template may be missing some elements? i'm not seeing the "text" frame that you go through. just a heads up. thanks again!

@TDSunshine 2 күн бұрын

You're welcome! I didn't include everything int he figma file as some bits are more simple and can be replicated by you while following along ☀️🙏🏻💛

@sevenson5112 6 ай бұрын

14:20 how to show float screen like that while we open another file?

@TDSunshine 6 ай бұрын

I did that when editing the video in Final cut pro ☀️

@petermckinnon386 2 ай бұрын

@15.28, mine doesn't tidy up like yours. The two surnames are in 2 columns & two rows aligned to the left. Also, my first name does not align with the images above......😥😥

@TDSunshine 2 ай бұрын

Tidy up can be a bit buggy depending on how you have your elements at the start :/ sometimes moving them around a bit before clicking tidy up goes a long way! ☀️🙏🏻

@salemmohammad2701 5 ай бұрын

Dosen't design system include determining for the values in pixel for padding, margin, gap spacing, and dimensions for things like forms, Hero or Features sections, or the spaces around the page and between its sections? someone said that bootstrap design system contain recommendations for this things but I can't find this. so is there a place that has such suggested values?

@TDSunshine 5 ай бұрын

Design systems can be so many things! Sometimes the can be as simple as just colours and typography and sometimes they can be super detailed with spacing and margins and all that jazz. I have a whole series on design systems if you want to check it out☀️🙏🏼 - kzfaq.info/sun/PLx-zZQ15gdAqcVCE_EQvm820iWfgoKarq&si=TV9ZiOlFtPi9PdwB

@salemmohammad2701 5 ай бұрын

@@TDSunshine I watched this series and its realy valuable, I now just need additional knowledge about padding, margins, dimensions, and gap spacing. I need a recommended values for those things based on bootstrab or any other will known design systems

@user-em6ov9fk9x 2 ай бұрын

Hey...I just love the way you teaching😇.Actually i need to build an complete e-commerce clothing store for me could you please help me in this....🥺

@TDSunshine 2 ай бұрын

Thanks! That's a great idea for a video, I'll add it to my list 🙏🏻☀️

@hoshmandbeclass3642 6 ай бұрын

@kriswayne7938 6 ай бұрын

Hey, do we need to attribute for illustrations used in case studies?

@TDSunshine 6 ай бұрын

It depends where you get your illustrations from 🙃 I would recommend always checking with the source website / plugin where you got them.🙏🏼☀️

@kriswayne7938 6 ай бұрын

@@TDSunshine the website i found them on makes a pop up for attributing the illustrations to websites that use them but mine is just a case study and not some official use so confused. What should I do? And Any without attributes plugin u know for illustrations?

@TDSunshine 6 ай бұрын

@@kriswayne7938 I think you should give the attribution just in case. Better safe than sorry 🙃 I think unsplash might have a setting for “free” images only.

@kriswayne7938 6 ай бұрын

@@TDSunshine oh ok Where do i put them in the case study? At the end with the heading 'attributions' ?

@TDSunshine 6 ай бұрын

@@kriswayne7938 small grey writing at the bottom of the slide or page where you show them also works ☀️

@easyprogramminglessons2943 6 ай бұрын

Do you make programming videos too?😊😊

@TDSunshine 6 ай бұрын

No :/ ☀️

@easyprogramminglessons2943 6 ай бұрын