Figma Project Set Up for UX/UI Design Projects | Mobile UX Figma | How to set up a project in Figma
Вставка
- Опубліковано 27 лип 2024
- ☆ Try Figma's Professional Plan - bit.ly/TDProFigma
☆ Try Figma For Free - psxid.figma.com/xnd9l
☀️Check out these Figma templates and design systems - www.saasdesign.io/ui-kits-fig...
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Variables 101 - • Figma Variables for be...
2. Variables best practice - • Figma VARIABLES BEST P...
3. Figma Components - • Figma Components | Mas...
👋🏼 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 comment below. Your support means a lot and 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:17 File structure overview
02:41 Add your design systems
04:07 Paid design systems
04:50 Community design systems
05:37 Must have mobile design systems
07:12 1. Rename & Date
08:22 2. Personalize iOS tint
13:45 3. Personalize Material 3 Theme
16:26 4. Emoji time
17:02 5. Using all the libraries together
20:12 Whats next!
🤗 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 #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables #variablemodes - Навчання та стиль
![Creating an Icon Set - Passive Income for Designers [Figma & ChatGPT]](/img/n.gif)
Thanks for creating top quality content! 👏
You're welcome! ☀️🤗
Too detailed. Thank you TD❤
🙏🏻☀️
Thanks for the amazing content on the whole Design System series! I was struggling to find some more practical well-explained videos (as I am creating my first design system) until I found your channel! The edition is amazing too! Really grateful 🤍
aww thanks! happy its helpful! ☀️
Super helpful; thanks!!
You're welcome! 🙏🏻☀️
as usual amazing tutorial, thanks shine, shine more on youtube 😀
Aww thanks!! ☀️🙏🏼
Really, this lesson was very very usefull, thank you for this lesson. I haven't seen similar lesson on youtube or other platform
Thanks!! ☀️🤗🙏🏼
Very cool, very informative 😁👍
Thanks! ☀️🙏🏼
Great and very helpful... 👍
Thanks! ☀️🙏🏻
Thanks for doing my request 👑
You’re welcome! ☀️
Superb!
Thanks! ☀️💛
Merci beaucoup
You’re welcome! ☀️🤗
I have never seen such a wonderful and interesting explanation
Thank you from my heart
I was just hoping that you would add more explanation to your wonderful topics about creating fields in terms of more control over the location of the labels, sideways or vertically, and more control over the field sizes.☺
Great suggestion! 🙏🏻☀️
@@TDSunshine Thank you for your great and wonderful efforts
I will be looking forward to your wonderful presentation of the topic
That was very helpful indeed. I have two questions. I particularly found the emoji trick for naming files to be quite clever. Thank you very much for providing practical and useful content. Keep up the great work!
Q1) Is it not common to use UI elements from a single design system for consistency? I love and appreciate that you showed all the possibilities. I just want to confirm the best practice or what's recommended, so to speak.
Q2) The iOS 17 + iPadOS 17 design system is specifically for iOS mobile and iPad Pro design, correct? So for desktop, what design system do you typically use? Do you employ your own custom design system in addition to Material Design, as shown in the video?
Hey! Thanks! great questions 🤗 My answer for both is mainly - it depends 🙈
1. Depending on the type of project you are working on, sometimes there complete visual consistency between desktop web, mobile web, desktop app, mobile app. But most of the times app will utilise at lease some of the native OS UI. If you are working for a client with a very strong visual brand identity them may want to keep it all the same and have a very custom app but some might not care as much.
2. yes. the iOS 17 + iPadOS 17 DS is for all iOS and iPadOS devices and the Material Design 3 DS is from ay product running that OS. If you are making something that is fully web based than these DS are unnecessary for you. In the case of web I would search the community for publicly available DS that are similar to the industry you are designing for and then tweak them or just use them for inspiration.
I hope that helps ☀️
Awesome video, I really appreciate your content!
I'm really struggling to understand when I should design my own components vs when I should use the native iOS/Android ones... I know the answer is probably "it depeneds" whether the product is multi-platform, the brand, time constraints, etc. - but what is the "usual" way to do that? Which components are usually used as the native ones?
I would say if you are designing for an app you should try and stick to native components as much as possible. They will stay up to date when OS updates occur, they will resize properly if someone makes the font size on their font larger or smaller, they are great for accessibility in general and they are tried and tested by experts from hugely respected companies. That being said, sometimes you need something they just don't have so you can for sure build some custom components. But you can use native ones as inspiration / jumping-off points usually. I hope that helps 🙏🏻☀️
That helps quite a lot actually, thank you!
Nice :)
Thanks! 🙏🏼☀️
❤❤
🙏🏼☀️
Thank you for this! Ive got a question tho, how do we make sure the apple component library follow the same fonts library we have in our design system?
You're welcome! You can change all of the type styles to your brand font if you want BUT if you are designing an iOS app it would be best practice to keep using the iOS native San Francisco font. I hope that helps! ☀️
can you do developer handoff good practises
Great idea! adding to my list ☀️
Hello, Firstly great information for beginners thank you & Can you please tell me if we can use these libraries and design systems in any project (in corporate)? Or is there any copyright issue?
You're welcome! Im not 100% sure tbh :/ I would assume its fine to use them because you will probably be amending them before use like with different colours, fonts, and sizes to match your brand and the rest of your system. You can also mention that you based your components off of apple / material and because they are so well knows I don't think any corporate client will see that as a bad thing. If anything it shows you followed market leaders 😎 I hope that helps! 🙏🏻☀️
Hi, If I'm on the pro plan and invited a designer who is using the free plan to my team, will they be able to use pro features like Modes when working on that team projects? And thank you for all the awesome tutorials!
Hey! Thanks 🙏🏼🤍 so, the pro plan is on the team level meaning any project and file in that team has access to those pro features. The payment is made per editor so you will need to pay for any additional person you invite into the team or a file in that team. I hope that makes sense ☀️🙏🏼
How to do the changes u made on the color scheme but for the text?
Is there any plugin to change the typography?
If your project is using styles for text you can just edit the text styles as you wish! If you don’t have styles but you are using the same form across the whole file and want to change it, you can CMD + . to open the quick actions menu then “select all with same font” and that way you can quickly change all the text at once. Hope that helps! ☀️🤗
@@TDSunshine what i want to do is change typography of material design community file so that not only i get the text styles with my preferred typeface and font weight and it also automatically changes texts in the material design components
I wonder, do you create distinct components tailored for web, desktop, and mobile applications?
Great Question! Most of the time - Yes. Sometimes you can use the same component across for example desktop web, tablet web and mobile web but lots of times you will need to slightly modify the component for each. The changes will mainly be font sizes, padding and size in general. Iif you have a website and an app those might be even more different to make sure you are using the mobile OS standard components as well. ☀️
Thanks ☀. This implies the importance of notifying the client about the distinctions between these elements and the specific limitations regarding the versatility of the components, ensuring they understand that the components have defined use cases and cannot fulfill all purposes?
So True! Especially the differences between web and app! A great example of this is editing your profile details in Facebook. On the desktop web, you get a pop-up or the fields turn editable in the same page. The app pushes you to a new page to edit each field. @@aleksandarvrhovac9690 🙃
Please make a video about tabs. What if I want to add additional tabs using a property called as Count? Like, I select 3 tabs from the assets panel. But I add count as 5 or 7. and magically two more tabs appear. How would one go about doing this? I tried to create it with the layer property as shown in your other videos. But I am unable to do it.
Nice idea! I think the thing to remember is that Figma is still restricted to things already there, so it cannot span a new element if it wasn't there before. You could have a set amount of tabs beforehand so for example had 7 and make them all hidden using boolean variables then use the count to control them with a conditional. I hope that makes sense! ☀️🙏🏻💛
Hi! Where can I find your design system?
There are bits of it on my Figma community page :) You can find the link in my channel links. ☀️🙏🏻
Please activate the download mode of your videos 😊
Not sure what you mean sorry 🙃
Hi again, I'm so sorry for being annoying, but I finished your design system and it's great - but I can't figure out where I should change my colors if I want to change to other colors in my design system? Would really appreciate some help :) Mainly because we removed the styles in our system, which is why I'm not sure how to change them :)
Not annoying at all! Which colours do you want to change? Do you want to replace all the colours in the designs to be connected to your new variable colours?
Thank you!! Yes, I want to change the primary colors we added in the first video (the purple one). So that it changes my components and those designs we did in the following vids :) Really appreciate it!@@TDSunshine
@@isivaasanaru5643 You can do it in two ways! Either you connect you tokens / semantic colours to alias a different primitive colours. OR you can change the purple primitives to your new brand colour and you can even change their name in the primitives and all the connections will still remain intact. I hope that helps! ☀