because we are going to see if everything is working first so I see something happening on YouTube which is good and I can see myself there without water marks which is also great and Linkedin is also tuning in which is also good and let's see this is working nicely and there's always quite a decent delay everywhere so starting up LinkedIn now and that's working as well which is cool so we have LinkedIn we have twitch we have X we have YouTube everything seems to be working awesome all right is X working as well see if we can fix this one all right well there's one stream that doesn't seem to be working yet so just double checking that to be sure if you're already tuning in thank you so much I'm uh just making sure that all the different platforms are working and playing along nicely and they are which is great cool all right so let me just close a few things so I can fully focus on entertaining you and sharing some knowledge with you and make sure to say hi in the chat so we can also make sure that that is working as well and we are live all right cool um so for those who are watching thank you for joining the stream and you might be thinking well that's a bit of a short heads up h Hello F I'm sure I'm mispronounced your name sorry about that but you might be wondering so why are you live with like a 2hour notice uh that doesn't give us a lot of time to be able to join you and that's absolutely true but it's Monday we have stuff to do and the same goes for me so actually one of the things that I'll be doing this week is redoing my own design system because yes I'm planning on redoing my own website and at the same time I picked up a brand new client which I'm totally excited about uh and for them I also installed a new design system and and uh rightfully so they also asked how they're able to um yeah manage that themselves so let me just mute myself because I'm hearing myself which can be a bit annoying there we go and this one as well cool uh so like I said I have a new client who I've been working with created a new design system and they rightfully said well we want to know how we can work with that how to set that up ourselves so multiple people have asked me hey how can we work with this cool stuff and that's exactly what I'm going to show you today and yeah I'm going to show you by doing it so I'm I'll do my best to keep my eyes on the chat if you do have a question feel free to let me know uh I'll see if I can open it up here and here awesome so let me share my screen scen with you and talk you through the presentation or presentation the figma file so let's start at the beginning uh I've downloaded the latest copy of Untitled UI which is the starting point the design system that we'll be using you can download a free version at philip.com Untitled UI uh DM me for the link if you're interested and what you get is actually this file the only thing that I've done is I renamed it to just to have an identifier and I also published it once because that takes the longest time um I do hope that it was published correctly because otherwise we'll lose some time during the process and one of the reasons why I love Untitled UI is because it also has it's extremely well documented so it has a decent introduction uh it talks about having all these different files and it can be quite memory intensive when you download the file so as you can see here on the left side of the screen there are a lot of different sections so we have the foundations the shared components some assets like a login page email templates and then it goes even further into marketing website examples with like a landing page and it has marketing website components like the navigation the header section and underneath it even has has an example of dashboarding uh but also the application component so as you can see this is actually a lot of stuff cramped into one file which makes it very memory memory heavy or heavy on the memory part so figma will in a second give me a warning like hey this file is using a lot of memory and one of the things that you need to do when you start working with Untitled UI is actually to move things to separate files and I'll start with that in a second um but I also want to dive into uh a few more details because Untitled UI actually has three different versions they have the variables the variable function uh a layer style function and a very simple version so I'm using the layer uh sorry the variable version which means that here on the right side I have something called local variables and we're using the fifth or version five uh from Untitled UI which actually has a lot of new cool stuff so they have Primitives which are your basic color setup so your different uh gray modes your different colors your brand color error color warning color success color and as you can see here on the left side everything screwed neatly then within color modes you can actually see that for for example if there's a foreground color which is a color which is being used for buttons or text for example you can actually see that it link that it is linked to a certain primitive color um I'll get to that in a second this is all the fun start fun stuff we'll be streaming for more or less about two hours a little bit less I think um and the goal is to set up the figma file uh and to be able to use it throughout different files as well so let's get started with that I'll delete some of these um introduction pages and documentations it has a very nice introduction to variables it links to some figma resources as well it explains how the variables are linked and some explanation of what those names actually mean um we can get rid of this for now and and let me show you how the file will be set up so we will have our core file we will have marketing components and application components so these are actually um linked like this so this one goes there and this one goes there and then finally there are actually page examples and those are linked underneath these two respectively so that's the way that we will set it up and why are we doing it this way because we want the files to be light modular and linked to each other because in the future hopefully if you set up your core file correctly there's not too much need to go back to it and you can really focus oh typo and you can really focus on getting the content right for your digital products that you're building so this could be the marketing website this could be an application you could create a separate one if needed for mobile apps or native mobile apps but that's all up to you um so before I'm actually going to customize it what I'll do is start splitting up the file so as you can see I already have three files open so what I did in my own project folder is I have the core file here and I created three new documents you can ignore the two on the right because these are my uh yeah my historical files I would say and the first thing we're going to do is actually move the application components and the marketing components to their new file and before I do that I just want to do a quick double check to see if I missed anything in the chat and I have Untitled UI uh I think that should post that link there we go so if you're interested in trying out the free version there's a link in the chat on LinkedIn on X and on YouTube and even on Twitch there we go all right cool so let's split up that file um I'll open up the Let's see we can do it from top to bottom so we'll leave the found Foundation will'll leave the shared components shared assets and this is actually the marketing example page we'll have to move that later on because first we need to move the components and before we can do that let's double check if the file is actually fully published which is not so this will have to run for a little bit this will probably take about a minute or two I hope um and this is why you want to split up the file because the Untitled UI is a very rich design system with over 10,000 components and variables and it's very powerful because yes you can customize everything to your liking so far I haven't encountered a single brand within 12 years that was not able to fit within the design system but to set it up it is a it takes a bit of work so that's what I'll show you today also while we wait I'd love to hear from you in the chat so if you do have any questions feel free to post them in the chat I'd love to know who you are where you're from what your job is what you're working on and we can take it from there so the marketing website component so I created three files and what I did I just copied these names as the file names but I also created all the pages to save us some time so what I'm going to do is within the marketing components I'm actually going to link the uh core or the Untitled UI design system the core file to it so I need to check the libraries here and you can see that I have multiple files already and this is the one I labeled it stream to make sure that I got it right and the reason why we need to link it and let's also do it here before I forget it it's because if we copy or actually move the components from one file to these files is we want to make sure that we don't break any of these component links so everything is nicely linked together which is awesome because if we change a color we'll change a font everything will get pushed through all the files so everything is linked together uh the same way developers would set it up with components so luckily that doesn't take that much time and I'll go back to the overview of the pages and layers and this is a bit the boring part but we'll have to get through it so I'll just cut the header navigations paste it here and before we continue we want to do a quick check to see if our components are still linked to each other what up Chris happy to see you here francisa nice to have you as well thanks for tuning in and joining me on this lovely Monday morning and as you can see these colors and well the colors and the symbol they they actually say that this is now the main component so that worked quite well and we'll go on so I'll try to do this as fast as possible because this isn't the sexiest stuff like I set it's what you need to do it's the small investment you need to make because this will save you a bunch of time in the future and the project that we'll be designing today is actually my own website so over the well 12 years of doing business my brand has undergone quite a quite a bunch of of changes and I'm sure that you know that uh whenever you either work on landing pages for yourself you might not do is at as neatly as you would do it for your clients so my goal with this is also to really bring this to a level that a paying client would be happy with because why would we lower the bar for our own work right so these are pricing sections while we go through this I think it's already uh a nice way of you to get an idea of all the different screens and modules that are uh available so we had the pricing but also all sorts of different call to actions from sign up to newsletters or download white papers or whatever call to action get your free trial for SAS products we have a metric section well I think this is pretty self-explanatory but who doesn't love those metrics on landing pages right a separate newsletter call to action with a input field for an email instead of the call to action buttons testimonial sections and I have to be honest here I think it's a better idea to First think in what way you're actually going to collect and keep your testimonials because you can always build your own testimonial system but there are a lot of different tools out there hey social proof did I miss one oh this is actually the testimonial it's hard to talk and work at the same time social proof this is the social proof so like I said you want to make sure that your you have a nice system in place to collect testimonials if you're a designer tuning in or well actually any other business grabbing those customer testimonials will do you wonders it's a lot easier to have a convincing landing page when you actually have the clients who are talking positively about you if you're interested in seeing an example you can go to love. philip.com which is horrible domain name to spell for n Dutch people but my name Phillip I guess you can figure that one out p i Li p and then V is w l a g.com so love. fila.com content content sections am I still doing things right this is sections and you can already see the memory usage warning popping popping up in figma and that's exactly why we're doing this hello I do have a bit of a fight going on this morning with my copy paste skills which is of course a horrible pain to have as a designer at least until we get replaced by AI right cool and we'll go to the careers section so yes with the career sections if you do have a marketing website on which you would also publish your jobs this is very nice to have of course FAQ section and that allows us to almost wrap up the first part before we get into the fun stuff customizing the template we're about 15 minutes in and uh yeah I would say to set up the figma file if you're doing it fast and you're not talking through your work how I would say it's about 30 minutes to an hour um which yeah it is an hour of your time but um yeah only setting up the color system on your own would take up even a lot more time so as you can see here in the bottom right to move components to the to this file publish uh Library update so that's what we're going to do we actually now moved these components to the marketing components and I'm going to quick rename this make sure it's recognizable so this is the marketing website component so I'll just call this marketing components stream so we'll have to publish this and by publishing it this is actually um the final step of really migrating the components from the core um from the core step or the core file towards the separate figma file um so this takes a little bit of time and while we uh wait for it to publish we can continue with the application components and then finally we'll do the page examples but if you take a look at this one the page examples actually fall underneath the marketing components and the application components so we'll need to make sure that these page examples are actually linked uh towards those files as well so we first need to set up those files before we can actually link those page examples um I'm wondering if I made a boo boo just making sure that everyone can also see my figma screen you should be able to yes all right YouTube almost gave me a small heart attack I've been uh I've been streaming without sound for a while I've been streaming without sharing my screen which of course is um very helpful and uh it seems to be working so that's good awesome cool um so the marketing components is already published which is cool so this part is done and we will now continue by deleting all these Pages which is always very nice because I don't think oh yes you can ha that's very nice so let's delete multiple Pages we should be careful I think the divider shoot oh yeah there we go delete divider and we will go into the application components and here as well I already created all the pages to uh save us a little bit of time because I know that these are not the most fun sexy work to go through but in once we're done with this the page examples isn't that much I will start changing colors typography Styles I'll show you how to add an additional size of input Fields because one of the beefs that I have with Untitled UI is actually that it only has like a small and medium um input field and actually almost every project I have requires a larger input field which is just very user friendly models here something interesting happened so after this is models so we'll need to add a couple of variable options or attributes I'm not sure what the correct name is multiple components component variance there we go figma is hard and as you can see models for applications but then again you can also of course use models in your marketing website because maybe you want to uh have an exit exit intent model when somebody uh wants to leave your website their their Mouse exits the screen and with a small JavaScript script you can actually open up a pop app and say wait before you leave download my free ebook or whatever these are the metrics slide out menu so these are also very cool I'll quickly show you I guess when you see it you already have an idea of what you can use this for a lot of different filters for example notification settings maybe some historical thing or even a bit of e-commerce inline ctas uh this one inline ctas did I do the slide up menus not yet let's go imagination oh man how many paginations did you design in your career so I've been uh working as a designer for 20 years 12 of them as a freelance ux designer and um I started with Photoshop made this the the huge Improvement step to sketch but uh only after a few years with Sketch figma came out and I think it was maybe 2016 I started using it maybe even a little bit later 2018 I'm not quite sure and one of the downsides that sketch actually had was it wasn't really multiplay multiplayer friendly it was also Mech only which for me wasn't much of a problem but for some people it was and when sketch came it was really the well browser pwa well it's really browser based which makes all of the collaboration featur so incredibly fun and powerful and uh yeah it was uh easy to to make the switch from sketch to figma and many people did so figma by far is the market leader in design software Adobe tried to purchase it the deal fell through on which I'm very very happy because this allows me to still cancel my Adobe subscription breadcrumbs back in the day you could buy your Adobe Photoshop for like 1002 200 Euros and now we're paying like 50 60 EUR a month which I think is uh quite a shame because we can still work fine with a Photoshop version of two three years ago but instead they are deciding for you that you need to pay every month for features that you maybe don't need but hey that's life right so look it's a beautiful date picker let me just go into a bit more depth here so as you can see day picker and how many colors do you think a day picker has well we have here this circle as you can see it's a brand solid which is actually one tint lighter than the C action button there's a specific background color gray there's the Border Grays there's the icon Grays there are different colors text disabled text secondary text secondary foreground so this would easily be let's say up to eight different colors already but uh yeah the day picker is a really nice starting point quite often you don't need to have custom date Pickers sometimes you do but even then you can uh use this as a starting point which is nice file uploads also something that you would always need not quite sure what this icon here is doing by the way pretty sure we can get rid of that one oh maybe it was from the mobile version not quite sure why it's what it's doing over there I'll just leave it for now if we need it we can fix it later content dividers so all these Charming elements we'll wrap this up quickly loading indicators which is also very nice one to have empty states which you might not all always design but your developer friends will love you if you'll do because otherwise they will need to figure it out and a code snippet cool so once again let's P let's publish oh let's first rename it properly so these are application components application components let's publish this and once again by publishing this we're actually moving all the main components to a separate file which uh will reduce the memory usage as well oh that yeah the uh error that it shows is really more of a uh warning saying um uh from the top of my head I'm not even quite sure what to call it but uh it's really a warning saying well hey that you're moving components if you don't have your files properly linked together things might break and now actually that I'm saying that I'm wondering if that's not the case with what I'm doing because we have landing pages here and go to main components so now I need to make sure that we're actually relinking this file to the two that we just published because otherwise it won't know where the main components are so I hope that's going to work uh let's see marketing components is this the stream one it's quite lovely that you can't actually let's just type stream so I'm going to add the marketing components and I'm going to add the application components like this and if I now go to let's see because this is indeed quite interesting now that we've moved these parts here and I just want to see that these are published no changes no changes so if we added the marketing and the application components and these are now here so we need to make sure that they are actually linked which they are then I do need to know these still have a main component which changes to main components interesting so let's say for example this is the hero header section drop down and then it has a section here ah metric section what changes does it actually tell it has a lot of Icon changes which is interesting because then if I now create the page examples so everything from those pages I actually want to move here I need to make sure that also these pages are linked to the core that they are linked to the marketing components and that they are linked to the application components so now they are and what I actually want to do and I'll see if that will reconnect them is actually say well these are the landing pages for the marketing website examples place them here that worked nicely give it some time yes paste again let's see if I can just let's make it a happy yellow so these are now moved here Heroes section I can go to main components and it still pushes me back to the core which is interesting because I would like to know for example if I take a look at this button actions says button go to main component and that actually pushes me back to button so that's fine so we are going to move all these Pages here as a last step of the migration part pricing Pages because we want to get all this stuff out of the core file so we can actually easily work with the core file change the colors change the Brand This taking some while to cut these Pages there are a lot of different components linked to it but once we moved the final pages and the application examples we're good to go let's go blog you can do it we go to blog posts o I do see an possible tricky situation here that a stroke has an unlined color we'll have to keep our eyes on that because at the end of the day we do want these Pages still to be linked to variables you can see on the right side luckily that is the case so we still have our variables intact our text styles and colors that's looking good great so setting up these different files it is a bit of a work but um after this we can focus on the fun stuff and it'll also take a lot less time to uh publish everything to change everything so we uh do have a bunch of people tuning in on different platforms if you're still with me just let me know where you're from what you'll be working on this this week I'd love to uh hear what's going on with within your lives as well all sorts of different contact Pages team pages we all know those look how beautiful our people are you'll have the pleasure to work with these amazing people so I promised myself my streams would be politic free and I plan on keeping it that way but it's also good to know that the European soccer championship has finished so congratulations to Spain I believe it's the fourth time they actually won the championship never seen before legal Pages we all know those uh terms and policies cookie privacy policy FAQ pages I don't think there are too many entire FAQ pages but nevertheless FAQs are always important to have in your landing page as well so having different choices to use is is very nice of course um you might be wondering philli why would we ever need six different FAQ pages I would say you're totally right it is nice to pick a good starting point it'll save you a lot of time but once you have set up your um FAQ page or a login page or a sign up page whatever it is I would highly recommend deleting all the other pages that you're not using it's only confus using and you want to keep your file as clean as possible whatever you're not using get rid of it same goes for colors as well one uh small piece of advice from my end before you delete color swatches that you don't need make sure you've set up all your badges and tags like those small elements maybe even your graphs maybe you're using different colors in your graph that are not the Grays and the brand colors maybe you want to have like a red orange green blue colors whatever so make sure you're actually 100% certain you don't need those colors if you um yeah you don't want to delete anything and then have to re-edit it's a bit of a pain in the yes it's not too bad you can definitely do it but then you maybe also need to reconnect um things like your metrics and graphs to actually use the proper color styles or variables I should say so only four more pages to go if you made it through you are definitely an MVP because in all honesty and I know Jordan if you're tuning in as well splitting up the file is still definitely not the fun part there's an explanation on why it's at this point with figma not possible to uh yeah to to get these separated files because you need to as you've seen in this file be able to split up all the parts while still keeping things connected and if you would import multiple files at once it's very difficult for figma to figure out which should be imported first which Styles and variables should be published and then the additional Pages how that should be linked together as well so you can already see here in the top bar memory usage you're good to go but um I'm going to tell figma no we're not good to go yet because we need three more pages to move and then we need to publish one more to actually move the files I believe there's actually actually a figma command that you can use to uh Force to clean up the uh oh wait am I going too fast these are setting Pages yes I'm going a little bit too fast this is setting pages to that should go here let's not make any mistakes on the last three pages guys believe in yourself informational page one and as you can also probably experience from the stream this is a live and unscripted version this is actually me doing the work making it uh a lot more slower than your average high-paced YouTube video I do plan on turning this into a YouTube video as well and uh speeding up all this work actually making a short video for people how to get started with Untitled UI and building their own Design Systems and I really hope I don't make any uh silly errors which would allow me to have to redo all the work but um yeah that's the risk you have to be willing to take uh P examples I should probably also make the names a bit shorter nothing to publish here which is kind of interesting so everything is actually linked to outside sources I'm not quite sure does it yeah of course I don't need to publish this because if we go back to our file these are the bottom ones so there's not really much to uh yeah this won't link and nothing else will link to this so it will actually be no doing entire Design Systems but making a line bit too difficult so everything is going down and uh I do think there's officially a line between the marketing and application components as well or at least there should be um applications so let's say stream applications marketing and this should have at least I think so if I'm wrong I would love to hear someone correct me but I'm pretty sure that this is how I would set it up applications there we go all right so I think everything should be up to date and published now move this to the first one and uh yeah so great success took about half an hour hour to set this up and um yeah now let's get into the fun stuff so everything is linked to each other keep that in mind so the next question is or at least the question that I would have and I'm just gonna pause the screen share real quick so let me just talk to you before we head into the next section so you now have a very nice offthe Shelf design system and a lot of people will agree with me saying well wow it's amazing to have this because we already have all sorts of different buttons and all the different states and let's just start at the beginning if you would have a system like this would you ever recreate it from the start because let's be honest to only create all these different types of buttons and like social login buttons and even mobile apps store buttons like setting this part up alone would easily take you a day maybe half a day it's a lot of work the same thing goes for typography you want to have all these different styles which is a pain in the ass you have your effect Styles you have your shadows your borders your spacing radius and grits um it's a lot of work so would you ever want to set this up again and I think if you're a designer working at a company that's building their own design system You could argue that it's worth it to really make it custom to do that but I think since it's UI based UI components are almost always the same I haven't seen a single digital product that doesn't have a button or an input field or toggles or a checkbox radio buttons tool tips sliders these things are basic UI so every digital application should have some form of this so I'll get back to sharing my screen it will work a lot better so if you agree that you would need to have all these comp onon this is already a good starting point but then the next question is really I don't want it I don't want my application to look the same as everyone else's application and that makes perfect sense because your brand is unique um you want to make sure that it actually yeah works for you so how do you do that and I think it's important to say Well it you need to customize it of course and how do you customize it so you can say well what is your specific gray tone or your gray color so everything like I said has a very nice description so gray is a neutral color and it's the foundation of the color system almost everything in UI design text form Fields backgrounds dividers are usually gray and to give you an example of when that's not the case I did a small well not a small I did a fun project checked for the financial times or at least the Dutch version of it and they have this Salman pink color so their gray colors are actually not gray and it was a lot of pain in the S to setup but this is how their color system looks so their gray is actually this Salman color they do have a brand color which is this interesting blue color and that would result in p PES like let's see of course I move that as well let's say marketing Pages it'll make your entire UI look completely different um if you want you can definitely consider doing a non- gray uh color for that I'll give you a an example of how that looks so this is how it would look if your gray are not gray so you would have this salmon color background here on the top you see like a different menu you can still use the brand colors of course and I I really like it to be honest I think it's a really interesting look I'm not quite sure about the white color on this one I would probably I'll just do it really uh a maybe like a very light version of that brand color to make it fit a little bit better um this way you would still have a secondary button which is actually a white one which stands out very nicely um but yeah as you can see it's quite interesting to see what happens if you changes your if you change your Grays to a color any who I will um yeah need to tell you that there are different types of gray so you can say well there's the default gray which is quite a bit of a modern one you can say I want to have a cool gray or a gray that leans a lot more towards blue which yeah for maybe like financial apps or quite modern or yeah there's something to say for these I actually prefer my Gray's gray but I also kind of like them warm so I'll be experimenting with the warm gray color so what I'll actually do is I'll move this up here and I want to make sure that all my grays are the warm gray uh they have a separate gray for their dark modes which is um well a bit more desaturated I would say uh which is Works nicer with dark mode so truth be told I don't use dark mode for my own brand for my own website so I'm going to leave it as is but I am going to change the grace and I'm going to change the brand color and let me show you how to do that so I use uh an app called color slurp I'll just paste a screenshot in figma so you can see it and I don't have to change my screen share so in color slurp I always keep my color so I use a very yeah dark foresty green color as brand color um but I actually want to have yellow call to action buttons so what I think is Maybe one of the challenges with uh Untitled UI is that its starting point is really one brand color so if I would go to for example page headers or page examples might be better I would go to a landing page you can see that it's actually very neutral and the colors that yes figma come on you can do it you can load the file there thank you so you actually see the purple is used very rarely scarce scarcely uh except here so there are some situations where you can say well maybe I want to have like a more branded color so let's say this one so imagine the purple would be my green color would be very nice but then the button would also be green and you would have a green on green button button if you're into conversion design or whatever design you might want to say well I want my colors to or at least my buttons to really stand out and if I have a green background that doesn't really work so let me show you what happens if I change the brand colors so this will be a bit of a copy paste exercise but I will go to local variables uh you won't be able to see my color SL but it's actually hovering right or left of the figma variables window and I'm going to Brand so these are the brand colors and the first thing I'm going to do is actually copy paste my brand colors to replace it and one of the things you can already learn learn from Untitled UI here is that it's called a brand color you should not name it green one of the reasons is that if you ever do a rebranding you can it's kind of annoying if your brand color is called green and it's no longer green so this way you can say well this is the different tints and shades of our brand color and if you would ever change from green to orange or from Orange to Green you can just change these colors without looking like an idiot and this is already going to have a really cool effect but before I show you the changes that these this makes I want to change the font Styles as well all right so these are the brand colors so as you can see it's kind of funny because it happens like figma in the background is now really working to change every element that has that color inside it um so default inter uh inter is a really nice display font it's really well there's nothing wrong with it it's really perfect um unless you have a better reason to pick a different font could it be your brand you can definitely do that you can also say well you know what maybe the display headings I do want to have uh a fancier font but for the body I want to keep inter which is perfectly fine for me I'm actually going to open up a plugin called batch Styler because for my brand I'm using a different font a lot of people ask me what's font and I'm really scared that people will just use the same font as well and I'll see it everywhere but the thing that I'm doing here is I've selected all the textiles that are in here now that I'm thinking about it I'm wondering if I should not do this through the variables but let's see what happens so it gives a warning here because for example there used to be inter called semi space Bolt but for some reason B collage or the F that I'm using is has written it together I don't have an italic version so I'll just use the non-italic version of the font weight that it's asking for I'll press save and once I hit this button everything will crash so it says successfully updated 68 textiles I'm really curious to see what will happen now because with version five from Untitled UI we actually have font variables in place now so if I go to typography I actually see here font face curious I need to spell this make sure that I wait let's just leave it enter for now because I need to make sure that I spell it correctly it's nice that you have a font simple called inter but if you have a font called bage grotesque 48 points we need to see what happens oh we're breaking things people there we go so funny enough it did change I think some of the Full Waits and um yeah figma is working hard in the background let's give it a little bit of time while I check up on the chat say hi if you're still with me let's see still have a bunch of people on YouTu YouTube on X on Twitch on LinkedIn very nice thank you all for join for joining so let's see what actually happened so we now have a display regular and you can even see here that in the style everything is linked to the variable of the font family the font weight even the size the line height the paragraph spacing yeah spacing wooo um but what doesn't change of course is basic text 48 points so this now is our typography and let me show you what happens now that we've updated this um one thing that I should note is that that as you probably guessed like changing these things is a lot of work so if I now go to buttons we can see that we have these primary colors on our buttons which is really nice even the hover thing is working the focus state is working and we have 244 changes so I'm going to publish this now and you can maybe expect that after I've published it that once again figma will tell me hey you have more updates to publish and that has everything to do with it being working in the background it's being changing elements still but um yeah we need toh check out what happens of course so publishing it uh is yeah it'll take some time it's a lot quicker now that we moved all the marketing components application components and the page examples to separate files because what would happen otherwise is that if I would ch CH colors and fonts in this style it'll have to change it through all those different components which is even more work so what we can actually do now here is just keep working on this core file to make sure that all the colors the typography border radius and whatnot are all set up correctly we can publish it and then whenever we need to we can move to the marketing components files the application components and even the page examples um and and update them respectfully there whenever we need them to be updated so we'll need to give this a little bit of time what it actually says the file has unsaved changes that means that it's probably still syncing and updating or even uploading all the changes that we made to the figma server so I think it would make some sense to give it a little bit more time to First digest everything before publishing because I think now that we're trying to publish information that's not even arrived um there we go so change is saved and now it could probably start publishing maybe we need to there we go let's just double check so it still has a bunch of changes we can wait a little bit before submitting them because we still have more to change so changing the colors and typography already will make a bunch of difference so we still have I should delete some of these Pages by the way I'll just go to the login and sign up Pages here and as you can see it already makes quite the change just the colors and the font I really like this font it makes me happy um but still very much Untitled UI so we still have a bu of things to change and we will definitely keep working on this for another hour so if you're still hanging here with me thank you so much and we can delete these Pages for sure I need to check the application components because these we moved as well yes there we go delete a bunch of dividers and yes we are very happy with the new figma dividers and as you can see this is what we have left within our Core Design system we can definitely split it up further if we would have to but this is uh already pretty good I really already like how this is looking so let me know in the chat how are you feeling about this so far do you think this is useful do you think it's a complete waste of time would you work this way are you working this way let me know let's see if we can get some uh interaction going on because I see we have still have a bunch of people tuned in online yes cool all right so apparently it's still publishing which is fun um so we had the colors for a bit but I actually have one other trick up my sleeve so like I said the colors are really nice but I want to have contrasting uh contrasting call to actions and I've been a little bit lazy because what I've done is I accepted the yellow um the tail well Tailwind it's not Tailwind but the Untitled UI yellow color as my own uh personal brand color yellow in slurp uh where I documented these colors but what I'm going to do now is quite at least I think it's quite interesting so they say you can actually swap the default warning color I hope you can read this uh can be swapped with the default warning color so what I'm going to do is to keep things simple is I'm going to make this yellow my warning color but also my second brand color so it's a bit of a unusual step I would say I'm going to go back to Primitives I'm going to go to warning and I'm going to change the warning colors to the yellow instead of the default Untitled y warning colors and I'm sure there are people who are who can have some strong opinions about the fact that I'm then going to be using the warning color um as a brand color because you could argue that well what if you would have some sort of an eror you would want to have a big red button with the error color but if you have a warning oh 700 uh but if you have a warning you want to have the warning color uh button and you're absolutely right because then my call to action buttons would look the same um and you're perfectly free to not do that let me just double check the colors real quick especially 500 F7 400 f300 84b 700 708 yes so these are my warning colors and so as you can see here in the bottom figma is still publishing stuff which is very cute because it'll uh it'll need to publish more because now that I've changed the warning color is actually the same as this yellow color which is now also my second brand so let me show you the magic of the variables um I need to now figure out the buttons so I'm going to go over to my buttons going to make this a little bit smaller thank you and we can actually see that it's called button primary BG so if I go to let's see component buttons primary this is now how the primary buttons are set up so it has a primary background and a hover and what I'm actually going to do is say warning 400 which is going to be the um color for the primary button and I can do the utility warning or I can just say color warning 400 um and this would be the warning 500s you can go darker of course you can also go lighter and actually I think I'm going to go lighter on Hover because let's see what I want to do is make sure that it has enough contrast so if I now let's do a small contrast check if I open up Stark and I have this uh White text on top of a yellow button it's going to say nope so what I'm going to do is actually say my [Music] gray where's my 950 guys color is gray 950 change the uh everything that's white on these buttons I'm going to make it very gray and you can now see that I even have a triple A scoring on contrast which is amazing and the focus ring is still the green color which is pretty cool because I think it now shows a lot more that something is being selected so these are now my new buttons and if I now go back to a login screen or a signup you can see that I have these very nice green buttons uh yellow buttons my bad and I think it stands out a lot more with the brand color so once again um before I publish I might as well also redo the logo so my company logo which I'll have to pull up quickly let's see brand uh resources this should be yeah okay I'm not going to move my fils on stream I don't think that's smart clean Square white SVG pow so this is uh my logo without any green on the site and I don't have a word mark anymore I I gave up on that and I'm going to paste it in here it needs to be 32 I'm going to press K scale the logo to 32 32 Center it and I'm going to get rid of all this other stuff but linear has a um uh a bit of a app icon style thingy which I always abuse because what I can do now is say I'm going to add my brand or or gradient on top of it because if you've set up your brand colors you also get brand gradients yay and I can abuse those on it's not abuse use those brand gradients to actually create this cool logo and it has a stroke and I can say well it's a border brand alt so it has now this cute little border 0.2 make it little bit thicker 0.5 and now I have this lovely logo um I can do two things I can also update this logo to kind of you know just say well this should only be 32 like this if I clip content it will cut off the shadow so I'm not going to do that I'm actually going to remove or hide the logo type in this way we now have the logo if I do ever have something adjacent to it maybe called it unlimited which is the subscription service the design subscription service that I offer that should uh still be possible to easily Implement and once again let's go to publish because there are enough things to update and I'm going to publish these changes and we're already making huge strive so the first half hour we spent really on cutting the file into separate files and right now we're already another well we're already another half an hour in and the cool thing is now that if I compare these two half hours the first half hour feels like it lasted twice as long and this half hour felt like it went twice as fast and it has to do that we're making so many changes now with the colors the typography and the logo um and that has everything to do with us investing that first half hour in splitting up the files so I hope you can appreciate really the U investment that it requires but I think it's uh going to turn out really awesome and I especially look really forward to this because I still have a bunch of um landing pages to create for my own design surface so I'm going to redo bt. Studio the website if you want to check it out go ahead it's BT ng. studio um I'm offering a design subscription service and I focus really on the ux part so it can be user research it can be wireframes prototyping ideation but also Design Systems marketing material so I'm delivering or generating a lot of different outputs and for that I'm creating new landing pages and it will be a huge time saer to have this perfectly in order and maybe if we if time allows it we can uh can create a new landing page which would be really cool as well let's see still publishing you can see here in the bottom and if I would go to [Music] my so in a little bit this file should definitely be screaming for an update so for example this button I should go to main component it actually goes here so everything the linking works really well so if I now go to the separate file which is the marketing components I'm actually using a button but this button is a copy from the core file and as you know once this publishing Library finally finished the buttons are well updated quite heavily um I did not change to be honest I did not change like things like rounding or the border so I normally do like a less sharp border so it's kind of funny that the Border radius on these buttons like they use eight for the smallest three four and then the larger button has a is a bit more rounded to give the same uh feel what I would normally do is actually change the rounding maybe to four to make these buttons a bit more square but uh I don't want to waste your time with that um well while it's updating I'd like to show you uh one other neat trick so if you would go to inputs you can actually see that there's quite a few different inputs but on the left side we have or actually this row is all small and these ones are medium so you can see the size here on the right side so these are small these are medium then we have other messages small other messages median but I would personally love to create a new variant and this is going to go terribly wrong because what I need to do is create a larger one so if this would be medium that would be these ones and these ones what I would normally do is actually create copies of these by going like this and then probably use a rename plugin uh where is it layer rename find and replace layer name transform uh I'm going to replace anything with MD so these are the mediums uh to LG which is large and I do hope that this one is actually only focusing on the selected layers otherwise we'll be in a very bad place so these are LGS now as you can see and are these still empties yes they are yes cool uh so how do you make these larger there's two different ways we can of course uh pick a larger font size everything here is actually let me first select an input so this is Now 44 and then the question is how large do we need it to be and do we so I'm going to first create an input next to it so let's first design what we want it to be so I'm going to create an MD and let's see from SM you know what I'll do both this is an MD put them next to each other and we will detach so we can properly inspect what's going on so they are the same font size and what actually changes here is the vertical is eight and here's the vertical 10 so let's keep that same pattern and just change the vertical to 12 now this is a bit annoying because what I there's a very nice selection mode in figma so I can select this and click here which is Select matching layers but I only want the bottom ones so if I can now also uh unselect oh is this still called LG now or did I undo it that's went fine select and then un select yeah that I don't know so I'm just going to do it like a complete Noob and uh yeah go like this and I feel ashamed of doing this on stream if you know way how to do it the right way let me know in this case I don't think it's too bad it's not too many fields just do the top part and I will change this eight to 10 I should do the same for the aor states and I want to show you one thing that I think might be a small error in Untitled UI because I think there's one thing that always breaks when you would do this um yeah sorry so this should be 10 and let's see okay it actually works this time so I guess when you would change the font size the button would not um stretch to the bottom because it's actually a hug and I think this should be a fill because if I make the container larger I just want the button to be taller as well as well anywh who we now have a cool new variable for an input so if I would now create an input field I will zoom in for you I can actually say is it an SM is it a medium or is it a large and that did not go go as it should right this is 44 and a medium is also 44 yeah so it actually did not do what it was supposed to do and let me see why hug hug this is content this is hug 44 or did it work this is 44 as well so the question is is I if I gave oh uh I changed the corner radius instead of the my bad guys Corner radius should be eight I change the corner radius instead of the vertical spacing and I know why and it has to do with these things I think okay for the sake of speed I'm just going to do these elements this was eight and this was supposed to be 10 12 it's fine let's make it 12 so if I now have a input and I will make it large Tada so we now have a very nice large input field and I would still have to change all these other input Fields as well but I will save that for a different time and I want to see actually now bit confused of why this one isn't saying that there's an update yet because I'm pretty sure I've been updating this file quite intensely let's see topography open file yeah interesting so I'm going to just close a few files and reopen them to see if that maybe forces the refresh so as you can see it says while you change the input Fields now so it also affects like the login and the forget password and anywhere those fields are actually being used so we're republishing which will take a little bit of time so I hope on this lovely Monday morning you have your cup of coffee with you maybe a tea or uh glass of water even if you're on Red Bull it's all fine with me there's no shame here there's no drink shaming within the btng studio today I'm uh working on this gigantic water bottle which is absolutely lovely so we republished this file and I'm not quite sure but I'm still not seeing any updates which is really weird because for example there are buttons in here and they still have their primary color and if I go to main component I can see that it's actually updated interesting let's see what would happen if I would we pick this color if I look in variables there are no variables here which makes sense and I'm just going to Google it so figma design system updated not uh style asset what's the name of this asset Library wait a minute they moved it over here I'm an idiot apologies not too long ago they actually moved that button separate from the asset window where I is just looking and as you can see we already are getting these lovely yellow buttons it says updated so if I now go to my newsletter call to action we can see here we do have our green background with the yellow call to action which is really nice but typography has not let's see all pages update all it's kind of interesting that you can update your assets per page yay there we go and we have a page example here so let's take a look at for example a dashboard I will go here so this is the default look and once I press update all pages I'll move this window I can't move this window can I I can once I press update all let's have a look at the changes here one of the other nice things from Untitled UI is also that all the elements are set up very nicely so for example if I would um select this art board this Frame sorry and it has a fixed height 960 which is sure because you can export it for mockups in a nice way but I can also say hug contents even though it's still updating the assets and you can see that it's staller now but the menu kind of looks weird right so what I can do now is say sidebar content this is a fill this is also a fill and I can actually say content vertically hey let's see if it's okay so the fonts are updated still need to do a bit of color but you should be able to say fill container and this should hug and then it should be moved down so I'm not quite sure what's going on but we are pushing a lot of different changes into this file now and then with the last half hour remaining I think we're going to have a really good sense of where this is going so I'm going to stop touching my keyboard now to really show you the difference that we're making so ah I cannot touch my keyboard okay so remember remember that I told you about the brand color background and the same color call to actions this is what I want to avoid so when I now update my assets and I'm having a horrible time with figma today all pages update all and it now tells me that it's updated and we're going to see haha got you so apparently it did move a few of the color variables to its own file which it should not have therefore it's not using all the colors that it should so it now actually also shows the button that it needs to be updated all right so this one went a bit less smooth I'm also kind of interested in why it thinks there's no button primary okay so the dot here on the top means that it's still syncing that it's not yet fully linked together oh wait I of course so the page examples are the last page before I can actually update it I need to update the components that make use of that that are being used in those page examples so if I update it here then it'll update all the buttons and those are actually being used in the page example so if I now go to page headers the card headers one of the things I love is that it uses the icon here as well application navigation so this is the left bar and actually these logos should be updated as well there we go so you can see what's happening right whenever I've updated the library and I go through some pages figma says oh well there's actually some new stuff here as well and that's probably because the files are a little bit too a little bit too large to fully cache so it's actually checking the files whenever you open them command line so I'm I just want to do a quick test to see what is and what isn't updated yet so we have the charts here which also look really good it says we Chang the text Styles which is kind of interesting but sure and let's see what happens now these are the marketing those were these and these actually were already updated there are still more changes uh let's check those here header sections because here they're actually already green but these ones are from a component file here so these are now also updated and need to be published before I publish I want to see if there's an update first Uh current file so these are up to date these need to be published yes and this is an absolute pain in the ass the first time but like I said once you've set this up your life is a lot easier same goes for working with this file set up your navigation and get rid of all the versions of the navigation that you're not using because all this well publish library and whatnot it all goes a lot faster if you've removed all the default components from it but I think this is already giving you a very uh good [Music] idea and uh Joe Joe poos thank you so much for joining and your question as well yes the live stream will also be available on my YouTube channel there will be this unedited version but at the same time I'm also recording the session and I'll send it to my editors to make sure there's a more compact version of it a more digestible version so people can uh scroll through it all right so look at these beautiful menus mobile versions desktop version with a simple dropdown even be more complex drop downs and mega dropdowns and yeah there's no right or wrong if you're interested in learning well what should I pick the question should always be it depends on what you need to present so I see here a button tary color so that's something that we can still improve so in the main file you would go to Colors Let's see so color modes utilities components buttons and there's probably well all the purple has been replaced so that should not be possible so there's a tary color tertiary these so those should be gray or brand so as you can see that's probably a synchronization error because even those tary buttons are already green so that would be these ones and that would probably mean that even though while this is publishing updates at the same times there's still an update available for this file as well and um yeah I think that's where're almost to a point where I would say well this is your real starting point um changing the brand colors the typography really gives you plenty of stuff to uh start working on your different tabs different Navigation menus these beautiful tapped elements and yeah the next thing to do really is start building pages to be able to say well great I now have all the core elements that I need and I will finish the publishing and import it in the other file as well and show you like one last round the differences that these already made and I think then we're at really cool point where I have my brand new setup for building new landing pages which could be a next version so if I I'm really interested in hearing if is helpful to you if you're wondering well what's next or where do we go from here do I need to do a second stream just let me know because I really enjoy helping other designers to setting this up and my young R uh yeah of course we can uh we can definitely connect uh I would say find on LinkedIn I think it's the the shortest way or mail at high philip. NL which is also perfectly fine and the publishing for this one is completed then let's see if there's here are some changes as well which is good and once we've updated the components look now we get the pie charts and all the different charts as well which is great so this does take a little a little bit of time to um yeah fully get in the system but guys let's be honest if you spend four hours on this half a day and you have your design system up and running it's incredible because I think having a design system like this for any company any brand to be able to create consistency in all your digital products is worth a t and to be able to set it up in such a time frame is incredibly powerful all edges and after this let's go through different screens so here it did update this Stop Bar this color is lacking a bit behind actually there has been something weird going on with the color linking I guess I'm really interested in understanding so it probably move the colors to its own location but if I would insert a new button and once you start working with these you do need to detach them and you can just make sure that you're in the layers correctly header what let's go to the so I think there might be something going on with the linking but can put that button here so this is an Excel button with no icons can change this to excel we can turn off the buttons and since everything is dynamic it's going to go quite smoothly maybe I should drop down navigation I could also just simp simply add a new version of this one here this is called featured cards oh but there's actually there we go yes uh so this is the point where you realize you can also use a light version of your logo so make it a white square with the green text and it actually does say that there are new components available so it's a bit slow but it is working and it will update everything correctly um I'm also still unhappy with the way it was supposed to update typography there we go speak of the devil and yeah I think because the these are now really embedded in this file it's also not updating correctly which is kind of interesting there we go um anyway I'll leave it here for now we're uh 15 minutes uh earlier on time but uh I think this is giving you uh a good example of how to be a how you're able to use Untitled UI to create your own Design Systems to have it as a starting point for your business for fure future clients and to keep that consistency within the application so once again thank you so much for watching if you do have any questions feel free to connect with me on YouTube Twitter X LinkedIn or send me an email at high philip. NL and thank you so much for watching I hope you enjoyed it and found it useful and see you next time take care e e e for