8 UI Kit & Design System Figma Plugins 2023

every designer is talking about it I hear there's rumors on the uh internets UI kits and Design Systems over the last five years according to Google Trends there has been an increase in demand for Design Systems in uy kits so in this video let's go ahead and keep everyone happy and talk about 10 powerful figma plugins that are going to help you master design systems and UI kits so the very first plugin is token Studio on the screen over here you can see that I've opened up my very own design system for figma it's called ship faster UI if you want to grab this there is a link in the description if you want 50 off you can also grab it with my figma master class so link is also in the description if you go ahead and check out with the figma master class you can add this entire design system to your cart with 50 off so let's go ahead and open up token Studio shift I type in token studio hit enter in the keyboard and there we go so before we dive into it let me just give you a very quick rundown an overview of what this is all about now this plugin is probably a little bit more for the advanced designers so when you are creating a UI kit or a design system in fig bar what we are actually creating so let me just show you some examples when we are creating colors topography spacing buttons what we are creating in figma are called base tokens right because if I go ahead and show you if I go into my colors when we are creating these reusable colors throughout our files to keep it consistent we are giving them values specific values so our primary blue 500 goes to show that this is the main blue color we will use for primary buttons and maybe links as well then we have a shade for 50 100 200. so these are called base tokens now when you go ahead and hand this design over to developers you want to add an extra layer called contextual tokens so this helps developers and also yourself if you're a designer understand where do we use primary blue 500 just because you've created a reusable uh Global style in figma it's not clear where do you actually use it when should you use 500 over 600 for example right when should you use 700 in specific use cases so to add a contextual token one example might be primary button blue right so this goes to show that we know to use primary blue 2500 when you are applying it to a button that is primary okay so this is where token Studio helps manage that entire process let's go ahead and give you a real example so I'm going to go ahead and click new empty file and once you create a new set you can call it Global you can call it lights mode you can call it dark mode but just imagine this is like a style guide for whatever theme you are creating on the right hand side you can see that you have all these different inputs or variables if you will to Define in your token studio so I'm going to give you a very quick example let's go ahead and take a look at spacing we should all know by now that when we are creating spacing in our designs you are designed support specifically we want to make sure that we are focusing on using the four point grid system it's just heavily adopted everyone or most designers follow this just keep your spacings with increments of four because it keeps it consistent right so let's go ahead and draw down an example I'm going to go ahead and draw down two squares oops two squares whoa what's it doing that okay two squares and I'm gonna put it inside an auto layout because we should all know to use Auto layout when we are designing in your y if you don't know how to use it make sure to check my figma master class 5 000 students check it out okay so let's just go ahead and we say we've got two components over here we're doing some beautiful design and we want to go ahead and actually make sure that all the spacing is consistent between all these elements in figma we can turn colors into Global Styles so for example when we click over onto the right hand side we have all these beautiful Global styles of colors we can also for topography on the right hand side we have all the type in global Styles as well so you can simply reuse them but what about spacing right what about sizing there are so many things that we should try to componentize so they're reusable as well but figma does not allow that and this is where token Studio really thrives so go ahead I'm going to go ahead and select this Auto layout component and we know that in our spacing right spacing we're using increments of four so under spacing I can hit plus and I can follow my very own token variables over here so spacing extra extra small is the smallest increment right and that value is going to be four create then the next one is going to be 8 12 16 20 right so I'm going to go ahead and just quickly add two more examples so spacing uh small extra small sorry is going to be eight and then we're going to go ahead and add one more spacing Dash small is going to be 12 right and obviously you would add all the different measurements from this side that you've defined into your token studio so now instead of having to go ahead and highlight all these components and go oh what was the small measurement that we need to use oh that's eight change it to eight you can go ahead and actually highlight all your designs and because you've actually implemented everything into token Studio you can go ahead and change it to four you can change it to eight you can change it to 12. you can change it back to four and the great thing is if you change it to 12 right which is spacing small you can go ahead and add this token change 12 to maybe 16 if you want to make a global update and that will update everything as well so remember we can't turn spacing into a reusable component so instead we can utilize token Studio to turn them into tokens and then we can use these globally in all our designs so if we start moving into other Pages we can still have access and still utilize token studio now once again this is more of an advanced plug-in if you want to check it out you should definitely check it out but with that said let's move on to the second plugin now the second plugin is called batch Styler so I'm going to go ahead and go over to topography and I'm going to show you a very quick example now batch Styler is perfect if you are utilizing a UI kit or design system in an agency environment so you are duplicating a UI kit that you've probably made or downloaded or even bought from designership and then you are going to duplicate it reuse it for a new project and sometimes you might duplicate it again for another project and obviously every single project will have a different eye visual style so they'll be using different fonts so instead of having to manually go through and change every single font by clicking on them individually you can go ahead open up your plugins you can type in batch Styler open up batch Styler you can run that plugin and you can pretty much go ahead select all your fonts right you can select them all I might just go ahead and just pick one for a quick example let me zoom in and from here we're going to change the display medium large right so this text over here right now if you can see it's inter it's medium size is 52 and we've got some line Heights and letter spacing but I want to go ahead and change it to this beautiful font that I just bought on the weekend for a thousand dollars polysand change it to polysands and based on the medium font weight we actually want want to go to median as the new font weight and update the style as you can see immediately it changes the text style so imagine going ahead and just selecting all all of these changing everything updating all the Styles and within seconds you can re-utilize your UI kit for another new project so batch dialer is a great one to do bulk actions when it comes to topography and also color as well on to the next plugin it is zeppelin now Zeppelin as you probably have heard of them before it's not really just a UI kit or design system management tool really they manage the entire Handover process which Taps into UI kits documentation a developer documentation and also Design Systems as well so let's go ahead and take a quick look at the zap plan so shift I I'm going to open up Zeppelin the plugin so as you can see once you have Zeppelin opened there are lots of different ways that you can use Zeppelin which I find extremely useful if you are working with developers literally every single day so I've got an example over here and I'm going to zoom out I've got some very quick designs I'm going to select one of the designs and I'm going to hit export and I'm going to create a new project on Zeppelin for the web because I've got a web design over here and it's going to go ahead and upload the actual design onto Zeppelin alright so once it's gone ahead and exported all the designs I'm going to quickly bring over Zeppelin to the right hand side you can see if I go ahead and click into the actual project either then have access to the designs and obviously from here you can developers you can hand this over to developers they get access to all the measurements and whatnot but the great thing is when you go ahead and click on any single component you can get access to all the different component details you can also find out where all these components are actually being used so bear with me for one second if I go back to figma and let's say we want to go ahead and upload another screen for example let's go ahead and maybe upload this screen let's go ahead and click done export this one once that is complete I can go back to Zeppelin and I can go back to my dashboard and you can see that there are two screens now if I click onto one of them I can scroll further down and click on this component this button as you can see on the right hand side it is used in two screens for this project if I click on this little arrow it will show me exactly where all these components are being used so it's a great way to get a bird's eye view and manage an entire project and also your UI kit and also your design system now if I go back into dashboard over on the right hand side in the top if I click on style guide you can see that when you upload a project to zaplan once again it's a hand over tool so designers handing an entire project over to developers it will go ahead and grab all the global styles from your project it will just automatically detect it so I can go ahead and add all colors text wise I can go ahead and add all the text Styles and it brings through all the textiles um spacing and layout you do have to add those tokens which you saw previously and in terms of components you can actually go ahead and upload all your components to Zeppelin as well and get a bird's eye view of all the components that are being used so if I jump into figma and I go into buttons for example and let's say I want to upload all the buttons to this project because I was starting to migrate everything into Zeppelin I can go ahead and hit export I can go ahead and Export it to the project as you can see really quickly it's going to start exporting out all those buttons so if I pop over into a zeppelin you can see literally live that all these components and variants are being uploaded but the great thing is over here you can start to go ahead and filter based on exactly what you need right so it's a great way for you to manage once again your project your style guide and your design system there's a lot you can learn about it you should definitely check it out if you have not checked out Zeppelin now the fourth plug-in is one that I have been using for years it's simple sort so let's just go ahead and stay on the bottom page because it's perfect example of where simple sort is going to be relevant plugins and if we have SIMPLE sort you can go ahead and do a manual open or an auto open so I like to open up in the manual mode because I like to do things manually my way so going ahead and hit manual I can open this up and immediately because I have the actual main component with all the variants inside already selected it automatically adjusts or reorders or sorts if you will or the variants based on these criterias so as you can see the size is large medium small so we have all the large buttons here then we have all the medium ones right and then we have all the small ones over here as you can see they are much smaller so with that in mind we can actually go ahead and reorder them so let's say based on the rows right large medium and small right so large medium small if I go ahead and reorder large down into the middle you will move all large buttons into the middle you can move all the large back to the top and then in terms of type what type of buttons primary secondary link tertiary and outlined you can see that they're all stacked vertically we can go and change from columns to rows and as you can see immediately if I zoom right in we have gone ahead and adjusted all our variants systematically very quickly so we have based on rows large medium and small based on this criteria and type is primary secondary link territory and outlined based on rows primary secondary link tertiary and outlined so if you are looking to manage all those variants and just trying to keep things clean and systematic simple sort is a perfect plug-in for you the fifth plugin is measure this is a beautiful one so shift I I'm going to open up measure and I'm going to click run now this one is great for documentation so I'm going to go ahead and maybe just scroll all the way down to an example page and it's perfect for documentation for Design Systems and also just documenting your designs when you're handing them over to a developers a beautiful one that I've actually used on a YouTube thumbnail before it adds a lot of beautiful details so let's say you've got this design and you want to go ahead and hand it over to developers let's say you want to document how wide and how tall this header Is So based on this interface which looks beautiful to be honest you can click on this top left corner and it's going to go ahead and show you dimensions of the width and the height beautiful if you want to go ahead and annotate styles of a specific component double click onto the actual component itself make sure the button selected you can direct a little tool tip boom beautiful tool tip with all the dimensions the metadata provided so you have the variant details the width the height the color the Border radius the opacity as well so you can imagine if you are going ahead and designing up a design system and you need to start documenting all the documentation in terms of how to use it measurements and criterias and constraints and whatnot this is a perfect way to document everything without having to go in and manually create all these lines and all these tool tips it's all done for you very very quickly with measure now the next plugin is design lint so I'm going to go ahead and open up design blint so design whoops design lint and I'm going to hit run now this is a great one to actually find any errors in terms of global Styles or elements that are not attached to a global style so I'm going to go ahead and maybe go to the button section all right just to make this example much simpler and what I need to do is I need to select a layer right so I'll select a layer and I hit run design lint what this will automatically do is find as many errors that are evident in this canvas so as you can see right now there are errors that they have mentioned that is incorrect border radius there's 240 instances of that and they're saying that the Border radius right now is such a three if you remember we need to make sure that everything is in increments of four we're utilizing the four point grid system so if you go in the settings icon in the top right corner you can see that border radius over here set your preferred border radius is separated by commas Etc 2468 and its increments of two in this example so because this is in increments of three it actually breaks it so it's identified that there is an error in this canvas now we have used three just for it's purely a placeholder so you don't really need to change it but if you wanted to change it you can select all 240 instances you can actually go ahead and change it and update it over here so in the Border radius I can get hit to change to four and that will sort out all those instances and fix that error for you as you can see when I re-ran it it actually goes ahead and says all errors are fixed in this selection so if you are going ahead to try tidy up or clean up or manage a design system or a UI kit or even your designs design lint is a great way for you to find any errors and make very quick changes to streamline that process now the next plugin is style organizer so shift I I'm going to open up style organizer right here and this one is very similar to design Lin once again it will find all the broken Global Styles within your style sheet so let's use this for example because it's uh the buttons are a very simple example that you can follow along with so I can go ahead and scan this page and it will go ahead and as you can see it will find all the colors that are being used and the associated style name so as you can see on the action it's all ticked right now because everything is linked up to a specific Global style so this is really just checking is everything Associated to a global style within your document just to make sure that you are not using any random hex codes or colors in your designs but as you can see at the bottom we do have something that's unlinked but if you actually go ahead and click on it you can see that let's just go ahead and click on this one you can see that this is just the uh the color of the gradient that we're using in our logo so it shouldn't actually be a global style because it's not part of the design system so if you once again are going ahead to clean things up making sure that everything is attached to a global style then you should definitely check out style organizer now the last and final plugin to help you manage and become a design system Pro is going to be contrast everyone talks about color contrast so we can't forget about this one if you go ahead into plugins so or shift I and type in contrast this is one of the most popular and personally my favorite color contrast plugin for figma for your designs so once again all you need to do is you can go ahead and hit I go to scan and you can start scan the whole thing the entire document or you can do a select search or scan so if I go ahead and select button over here you can see that this button with our neutral 900 has an AAA grade or double a grade in terms of color accessibility now obviously not all Design Systems or designs need to be Triple A grade for color accessibility sometimes it's okay to be double A however if you're working in for example health or education or in government you probably want to keep to the Triple A Grade so taking a look at our designs over here I believe our buttons are double A but they aren't AAA in so once again depending on what purpose or what industry you're working if you are using ship faster you might want to increase the contrast just a little bit darken the blue in the background but it does work in double A which is a standard and the Baseline for most Industries so with that guys hopefully you learned a thing or two in terms of plugins that are going to help you master UI kits and Design Systems in figma and if you like this video make sure to gently smash that like button subscribe for the Die Hard fans and if you want to continue learning you should definitely check out this video and with that said I'll see you in another video very soon

Channel: Mizko

Views: 53,721

Keywords:

Id: 5ZaL2NcI3k8

Length: 20min 10sec (1210 seconds)

Published: Mon Mar 27 2023