How to Document Design Components in Figma: Design Systems Tutorial!

[Music] hey there my fellow designers and creatives hope you're all doing well welcome back to another video in my mega product design course for beginners if you haven't checked out the course and playlist make sure to check it out link will be down below in the description in this video we're going to learn how to document design components after creating them of course now this is second part of two part series and in the first part i basically show you how to go ahead and create such a complex component structure using base components using component properties and using variants right so there's a lot that i cover in the video and it's super helpful super imp informative so make sure to definitely watch it it's going to cover a lot of the topics that you never thought existed right so now let's move on to the main part which is creating the documentation which is going to be used by developers and designer and what i'm going to do is i'm going to show you some sort of a template or a structure that you can follow and basically the things you need to have when you're documenting your components right now this is just a template so you don't really have to copy this exactly just understand how to do it and you can go ahead and design it and document it the way you want right so starting off we just have basically the name of the component which is a list item and then we have some description about it and then we have a status so ideally teams have dedicated design system teams and we have dedicated engineers as well to go ahead and build these components in the code base right sometimes engineers do it on their own sometimes there is a dedicated design system team that handles all of this right so in this case taking an example it's just that the design team has completed documenting everything the ios team has built all the components and variants using the ios code base and then android team is yet to do it right there are other things like resources that you can link so you can basically click on the you know basically the text layer and press command k and i think you can go ahead and paste a url it could be to a google doc it could be a google sheet it could be to a jira ticket it could be to anything else right so this is where you can go ahead and document some resources if you think there needs to be there okay then moving on we have this thing called as the prime component now why we call it prime component is because we have a lot of base components and sub components and as designers we just want them to come and pick this from here right because this has all the properties inbuilt and for example if i can show you if i go ahead and make a copy of this for example you can see that this has all the properties right so how do you construct this obviously again make sure to check out that video i cover all of that in that video um but basically you want designers to come and pick from this component and then make the respective changes right so i'm just going to quickly delete that so in this case i have three states which is an active state which is a hover state and it's a disabled state and then we have two types which is basically a default and then one with a progress bar right this is how it was constructed so this is just an example your components might look very different they might be constructed in a very different way so you have to take a judgment call on that okay next moving forward we have some section which is the note for designer this is basically for things for designers to know things to do things not to do it could be anything if you don't feel there is no need for having notes you can remove it altogether then you have some notes for engineers as well this is again very straightforward anything that you feel needs to be here you can mention that or else you can remove it okay now the next part is frequently used variants a lot of times designers are working on certain projects and i'm going to reuse a particular variant of a component multiple times right so rather than going ahead and always selecting this main component and then making the changes which obviously takes a lot of time it's fine to have some of the commonly used or frequently used variants right over here so in that case designers can just come over here and pick this component which is already has some certain properties applied and then use them in their design right so that saves a lot of time rather than always selecting this main component which is basically the prime component and then making the changes to it right so it's good to have a couple of them you can have up to 10 15 how many of how many other possible combinations that are there depending on how the designers are going to be using it okay next is to explain the anatomy of the prime component so basically what i've done here is i've actually taken a screenshot of what it looks like when i tap on this component so if i click on this you can see we have a bunch of settings over here and this is how it looks like what you want to do is obviously you want to go ahead and identify parameters that can be changed right now state active type default we already covered that over here right but what we didn't cover are the other sections which is basically accordion end component start component and a subtext right so here what i've done is i've selected each of the elements that are customizable and i've gone ahead and given the name so that when a designer is looking at this he or she knows what are the things that can be customized right it's important to let the user know to what extent these can be customized okay so how do i create these lines it's very simple so let me give you a quick example of doing that so i'm just going to grab this text here as well to show you an example and i'm going to make this to be white so we can see it right so there's a plugin called as autoflow and you can just go ahead in the plugins section and then you can run that basically you can choose the color you can choose the stroke rounding you know whatever you need right it's completely customizable then all you need to do is you need to select the element and then you want to press shift and then you want to click on the other element and then it goes ahead and creates this attachment now if you feel that you want to move things around with this dialog box open right you can click on the other element and just move it around and then the autoflow arrow mark just automatically adapts right and the moment you close it uh it no more adapts so make sure that if you want to move it around you can go ahead and keep the dialog box open and then go ahead and move this around according to where you want it right so that's basically how you would go ahead and create it so i've gone ahead and done that so i've done that for the accordion and this basically toggles the chevron i don't know why you can see this purple box but that seems to be some sort of a bug anyway then you have the end component and if you see over here i have this arrow basically what this means is i can go one level deeper into the end components base components and pick them as well if you don't know what i'm talking about again make sure to watch that video it's super important to understand how base components work if you want to set up a design system and then we have the start element and then we have the end element and then we have a subtext as well right so as you can see even here in the naming convention i've added the icon then once you have the anatomy of the prime component you can go ahead and explain each of the sub components or base components right so first of all we start off with the title and the reason i've added this slash is to explain that this is a sub component and not really a main component so over here basically uh i've just copied screen uh actually screenshotted or maybe cropped is the right word uh for this accordion and then pasted that over here and basically i'm showing you what happens for the for the title what happens when i turn off and turn on so i'm giving like a visual representation of what happened so what i'm trying to do here i'm telling i'm selecting one of the sections of the component one by one and explaining what happens so that is title then we have a skeleton actually maybe i wanted to move the skeleton up right maybe that's better um to quickly explain the skeleton what i've done here is i've given an anatomy of basically the spacing of how it's constructed and what are the values now this is primarily for engineers because they need these values when they're coding it now to understand how i've actually done this i can take a quick example so let me go ahead and make a duplicate of this now what i've actually done is i've actually created these boxes that you can see over here okay and if i delete a box you can see that the elements sort of move here and there and that's because i've gone ahead and removed all the values so if i go ahead and select this all the auto layout values to be zero because i want all the values to be placed based on the width and height of these elements okay and i've just given them different colors basically these two are same color then we have uh this green along with this green and then you have this red which is this red which is pretty much the same color right so you want to go ahead and create this sort of a skeleton so that the engineers know how this is basically constructed okay um we can delete this and again i'm using the autoflow plug-in to go ahead and create these lines so that they can see what the values are then of course we have title then you have start element now for the start element we have two base components so to explain what's happening here let me take an example of this and i can go ahead and i can turn on select the star start element over here and as you can see i have two options one is an icon container and then the other one is a progress circle and this has an icon swap property as well right so basically what i've done here is i have these two variants and if i go ahead and select them you can see that this is an icon container and then this is the progress circle right so i've gone ahead and mentioned all the variants and i've mentioned to which base component this works which is basically the start element and i've given two examples as well of how this looks right so this is an icon container and then this is the progress bar just two options i've also mentioned that this icon can be used as an instant swap if you want to swap the icon as well right so this is very clear as to understand when i look at this component and i look at the starting element what are what are all the things that i can do with it then we have the end element i've pretty much done the exact same thing for the end element we have three options we have a cta we have an icon and then we have a tag right now the tag also has a chevron so i should have probably put an arrow maybe we can do that now so i'm going to select this go ahead to autoflow and then i'm going to go ahead and click on this right so uh i can just select this and move so now basically i'm showing you what happens when i turn on the toggle i think maybe i should probably bring this down here and then bring this here as well to show you that this is very much linked to the chevron over here right so this clearly tells me that when i choose the tag option i can turn on the chevron as well okay now the other reason that this tag also has this uh icon is because i can choose multiple types of tags which means i can go one level deeper as well right so to explain that what i've done here is i've added two colons right because this is two levels down what that means is this is the main component if i go over here and select i mean i'm going to show you this one right this is the main component and then this is the first level then the second level is basically this where i can customize this and the third level is i can customize the tag right so to quickly explain that once again uh let me just quickly come down over here this is the first level which is why it has one slash right and i can customize these but i can go another level deeper which is the second level and customize this individual tag element itself which is why i've added a double slash over here and now for some reason this seems to be four i'm just going to remove that one i have three variants over here and then i have the names of each of the variants is a success variant this is a failure variant and this is a neutral variant okay then you have subtext as well which is again a sub level actually this is actually a prime this is actually level one this isn't level two okay so i can customize this subtext to this or i can change it to something that has one tag and i can change this to something that has two tags right now the other reason i have mentioned i've added this icon is because i can come here and change the tag as well that we saw over here three options so to quickly take an example i can select this and i can double click on the tag and then i can change this to a failure tag as well right so that's uh that's pretty cool i'm going to delete this and then come here coming down then we have edge cases now these are things that are not really very evident from the component and these obviously depends on the component as such right so there are things that you cannot do which is basically you don't want to increase the height of the component right that is something that you don't want to do and in case the title or the subtext goes you can decide do you want it to truncate do not want it to trunk it so these certain behaviors you can mention these edge cases as well so that designers know how to go ahead and use these things and then of course finally ending you have some examples these are just blank screen blank rectangles but this is where you would put a screenshot or a mock-up of the design so that any new designer joining the team or when a new component is created all the designers know all the engineers know where to use this component in what particular screen right so this is basically how you would want to do a documentation of the component this is a super simple short tutorial and i hope this helped a lot so that's pretty much it for this video guys thank you guys so much for watching hope you guys really enjoyed it if you did let me know in the comment sections down below make sure to leave a like and subscribe to the channel for more amazing awesome content and i'll see you guys in my next video so till then take care and bye [Music]

Channel: Design Pilot

Views: 13,374

Keywords: documenting components, documenting design systems, documenting design decisions, documenting design tokens, documentation design process, documenting design patterns, design system documentation figma, design system documentation best practices, design system documentation example, design system documentation template figma, creating design components, figma, figma tutoria, components in figma, figma design system, figma design system components, figma design system organization

Id: JZQEMo0fmp8

Length: 13min 1sec (781 seconds)

Published: Mon Sep 19 2022