Figma Project Set Up for UX/UI Design Projects | Mobile UX Figma | How to set up a project in Figma

[@tiffa2305]

wow! i've watched a lot of tutorials and you're the only one who explained how to ACTUALLY use and customize a different design system to a project. i wish i found your channel sooner!

[@czerskip]

Thanks for creating top quality content! 👏

[@TDSunshine]

You're welcome! ☀️🤗

[@creatoratplay]

Super helpful; thanks!!

[@TDSunshine]

You're welcome! 🙏🏻☀️

[@ramazanguler6066]

Really, this lesson was very very usefull, thank you for this lesson. I haven't seen similar lesson on youtube or other platform

[@TDSunshine]

Thanks!! ☀️🤗🙏🏼

[@omoteniola9764]

Too detailed. Thank you TD❤

[@TDSunshine]

🙏🏻☀️

[@GabrielGarcia-ew2em]

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 🤍

[@TDSunshine]

aww thanks! happy its helpful! ☀️

[@dsouzaedson]

Woah!! Those are a lot of tricks. This will definitely help me in my first mobile project. Thank you sooo much.

[@TDSunshine]

You're welcome 😊

[@kakanishalemraju9995]

as usual amazing tutorial, thanks shine, shine more on youtube 😀

[@TDSunshine]

Aww thanks!! ☀️🙏🏼

[@whyzytcg8873]

Really really appreciate your content. Save myself tons of time to work on a Design system from scratch.

[@TDSunshine]

Glad you like them! ☀️🙏🏻💛

[@djashawe88923]

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?

[@TDSunshine]

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 ☀️

[@robertkreft5653]

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?

[@TDSunshine]

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 🙏🏻☀️

[@robertkreft5653]

That helps quite a lot actually, thank you!

[@filipeamilton2879]

Very cool, very informative 😁👍

[@TDSunshine]

Thanks! ☀️🙏🏼

[@yazankatramiz5287]

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?

[@TDSunshine]

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! ☀️

[@kriswayne7938]

Thanks for doing my request 👑

[@TDSunshine]

You’re welcome! ☀️

[@ravirajputdesigner]

Great and very helpful... 👍

[@TDSunshine]

Thanks! ☀️🙏🏻

[@kriswayne7938]

How to do the changes u made on the color scheme but for the text? Is there any plugin to change the typography?

[@TDSunshine]

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! ☀️🤗

[@kriswayne7938]

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

[@Akram-UXUI]

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

[@TDSunshine]

Great suggestion! 🙏🏻☀️

[@Akram-UXUI]

@@TDSunshine Thank you for your great and wonderful efforts I will be looking forward to your wonderful presentation of the topic

[@aleksandarvrhovac9690]

I wonder, do you create distinct components tailored for web, desktop, and mobile applications?

[@TDSunshine]

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. ☀️

[@aleksandarvrhovac9690]

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?

[@TDSunshine]

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 🙃

[@dhayve]

😢we came to the end.. what a journey tnx🎉

[@TDSunshine]

You're welcome! ☀️🙏🏻💛

[@smilli6415]

can you do developer handoff good practises

[@TDSunshine]

Great idea! adding to my list ☀️

[@alexander_stark]

Superb!

[@TDSunshine]

Thanks! ☀️💛

[@faressultan3159]

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!

[@TDSunshine]

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 ☀️🙏🏼

[@deeptisharma2297]

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.

[@TDSunshine]

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! ☀️🙏🏻💛

[@sudipchaugule9552]

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?

[@TDSunshine]

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! 🙏🏻☀️

[@meir34610]

I can only have 1 project per team and in the project 3 files, the pages are limited :( i cant afford a paid plan yet

[@TDSunshine]

Free plans can be slightly limiting but there is always a way to make it work for your needs ☀️🙏🏻

[@meir34610]

@@TDSunshine i guess so, wish they didn't change so much so fast :(

[@lilou8711]

Merci beaucoup

[@TDSunshine]

You’re welcome! ☀️🤗

[@isivaasanaru5643]

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 :)

[@TDSunshine]

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?

[@isivaasanaru5643]

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

[@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! ☀

[@Michelle-tx1gc]

Hi! Where can I find your design system?

[@TDSunshine]

There are bits of it on my Figma community page :) You can find the link in my channel links. ☀️🙏🏻

[@tayyabsohail8823]

I asked manu ux designers how they use design system but after now I well understand

[@TDSunshine]

I'm glad it helped ☀️🙏🏻💛

[@Luis_Sam]

❤❤

[@TDSunshine]

🙏🏼☀️

[@AntanasGeguzinskas]

Nice :)

[@TDSunshine]

Thanks! 🙏🏼☀️

[@akacemkhadidja3557]

Please activate the download mode of your videos 😊

[@TDSunshine]

Not sure what you mean sorry 🙃

[@weuzeify]

Super content. Thank you!

[@TDSunshine]

Thanks! ☀️🙏🏻💛