MUI for Figma 5.16 — Getting Started

hello I'm Adrian thanks for tuning in and in this video we'll take an in-depth look at the latest features of the mui material Library we will cover everything from file importing to customizing the design system to match your Brand's Aesthetics thanks for watching and let's begin first let's kick things off by importing the file into figma whether you're working within your personal drafts or organization you will find the import button located at the top right corner from here all you need to do is to find and select the mui figma file after a brief moment your file should be imported to unlock the full potential of figma's features consider adding the file as a library this feature allows you to access and utilize components from different files which is absolutely crucial when it comes to keeping your apps and projects organized to do this simply navigate to the asss tab there you'll see an icon next to it click on that and confidently hit the publish button button please note this feature isn't available on figma free tier but there's no need to worry as you can still create your apps within this specific file without needing to upgrade to a paid tier so there you have it a straightforward but important step to jump start your design Journey if you had the opportunity to work with the mui react Library you'll definitely appreciate the high level of customization options we've made sure to reflect the same level of flexibility in our fig version as well ensuring you'll have all the necessary options you need to make the design truly your own to access the customization options go to the variables panel located in the top right corner and once you click it you'll find various sets of variables these sets can be selected from the drop-down menu which is confusingly placed on the left side of the panel this design Choice aims to provide the developers with a familiar structure as they navigate through the customization process as we move forward with will go into each collection of variables we'll provide detailed explanations about each variable and what it does and how you can effectively utilize them to customize your design let's dive into colors as these tend to be the most frequently altered aspect in our design library and we often receive a lot of inquiries about them the variables you'll find here are the mirror image of the code theme object itself which means you can modify almost every single one in this collection with the exception of this components group whose purpose is to switch colors for light and dark modes only for figma there's another exception to the usual rules when it comes to the figma variables which you won't find in the theme object these exceptions are the variables under the underscore States group the reason for this is that these are dynamically generated by the underlying code which in figma we cannot do automatically however for the sake of convenience and rapid changes we've defined these variables here this way we can quickly make adjustments from one center location generally speaking for our library any elements that are grouped with an underscore prefix indicates that variables Styles or other components are exclusive to figma perhaps some of you Eagle diey designers have already noticed a few inconsistencies but rest assured this will be addressed soon for instance some variables are linked to others while some are not but I'll explain soon why one way to choose colors is from the collection that comes straight out the box from the material SL colors however if you have a strict brand guideline and you could opt for your own custom colors this would require a few extra steps but don't worry we've got you covered let's first demonstrate how to change the main color under the primary group and switch from Blue to something like a deep orange all while keeping the same shade which in our case is 500 for the dark mode we can also adhere to the same shade which is for us 200 following this same rules repeat the process for dark and light colors let's now address the inconsistencies here instead of having a linked color here for the stat we have a handwritten hex code this is because we cannot adjust the opacity of a variable such as linking the main variable here and taking out the opacity from it so instead we need to detach the main variable so we can see the Hax code and then manually paste it into each state while maintaining the opacity Now by navigating to the overview page you'll see your new color has been successfully applied now let's explore the other option for choosing a custom color let's say you have strict brand colors and you want to stick to them but they're quite different from the options available in the kit the first task is to generate all the other shades of your new color which let's say it's a blue from 100 up to 900 in order to maintain the same structure one reliable way to do this is to use Google's tool which can generate the necessary shades for you simply paste your brand color into the tool and voila it automatically places your brand color into the correct sheet number it also provides a sample contrast color which ensures that the text is clearly visible on a Surface we can follow its recommendation to keep your contrast color black but in our case we think white suits our brand better so thanks for your suggestion Google with these Shades presented to you you can copy them over to the already defined blue in the material / colors collection or you can create a new type of color if you prefer to keep the old one as well for Simplicity I choose to override the existing one going back to my theme palette I don't need to replace the blue variables since I overrode them but I do need to grab the hex code of the main color so I can paste it into my States so let's do that great now that we have applied the new blue let's take a quick look at how it appears in both light and dark themes on the surface it might appear quite similar to default blue but remember it's the subtle details that make all the difference in design so next up let's dive into breakpoints now each device breakpoint comes with a preset value but don't let that limit you if you're looking to make your app breakpoints a bit smaller or larger feel free to play around with the values you'll see these changes in components like the dialogue and container just a heads up though grid Styles aren yet on board with variables so we'll have to tweak those those uh values separately but that's not a big deal just make sure your grids are visible by clicking on the I icon then head over to the the properties and tweak the width until it's a perfect fit for your new breakpoint the concept of shape is straightforward it refers to any component that has rounded Corners such as buttons cards text field and so on if your brand aims for a more friendly appeal you can adjust this variable to a higher value doing so will seamlessly update all Associated components ensuring a cohesive look so let's change the value to something greater like 16 pixels after a short period we can notice the relevant components have been already updated in my artboard by default the spacing collection uses a set of variables that are scaled by an 8 pixel Factor these variables can be applied to Auto layout paddings and spacing for consistent design while these values can be adjusted as necessary each level multiplies by the scaling factor for instance if you change the scale to 10 pixels the first level will be 10 the next level will be 20 and so on these changes will will be evident in the spacing around items on my art board here as these variables are used for padding values text plays a crucial role in defining your Brand's identity so understanding how to modify textiles is vital one of the key features of our design system is that every element is linked to a textile promoting consistency and enabling quick style changes suppose your Brand's guidelines require specific specific font in that case there are two convenient methods to make this change the first method is straightforward which is the native approach you can find the text styles on the right panel of your screen among these Styles you'll notice a typography group that holds all the library Styles accessible through the typography component API the other additional styles are included purely for convenience when working in figma allowing you to modify styles from a single location to change the font simply open the edit panel for the Desir style for example H1 and replace the existing font like uh the default which will be Roboto with your new font if the font name is the only change you're making you can close the panel by pressing escape and move on to the next style this process should be repeated for each individual style including the one within grouped components however there's a fast way to replace the font name using a plugin to do so open the plugin menu located in the top menu and search for the plugin batch Styler this plugin allows you to select all your Styles at once and change the font name for all of them in one bulk action it's a real time saer thank you so much for tuning in and I hope that this video serves as a helpful guide your feedback is incredibly valuable to us so if there are additional topics you're interested in please don't hesitate to let us know if you have any questions or need further clarification on any points we covered in this video feel free to reach out on our GitHub issue page or you can join the discussion on our community Discord we all here to learn and grow together thanks again for watching and happy designing

Channel: MUI

Views: 949

Keywords:

Id: vpC-cMbjgpQ

Length: 10min 47sec (647 seconds)

Published: Thu Feb 29 2024