How I use Notion for design system documentation

so design systems are usually pretty big um in terms of what you need in a design system uh it's not just components when you dive into the nitty gritty details um so within my compass of design team i have uh design system documentation so this documentation covers a lot more than just the components it's like the actual design documentation like how we take notes annotate things for developers design exercises to go through the outline of our design process um accessibility guidelines color copywriting uh iconography media use typography the actual components density which is like um how much space you give between items uh layers like what kind of drop shadows do you use in modals how does the different layers of the application look like is some areas darker or lighter depending on how close they are to the user uh logo guidelines larger ux patterns and then the ability to just keep going forward now with all of these uh tables because essentially this is just a table here uh i definitely templatize everything that i do so uh here i have a blank template to take a look at design system documentation or starting off with the template so this will give me an overview any design code accessibility actions or state considerations that i need for these um this may change in the future but for for the most part from a high level i can see when this was created who is created by any designers that are tagged or that own this part of the project design status so this will be point of reference and um you'd see which engineers what their status is on the work uh any link to any code the the epic um so i use uh kind of a project or project management uh kind of in an agile way where we have epics which break down into tasks so here you'll see the epic it belongs to in the task to complete it um just second let's throw do not disturb on why is it not showing in there there you go you know okay so ultimately this is just a table i can change the way that this is sorted by design status so we can see what's in draft what's a proposal to start working on uh draft is like you're literally just starting work on it proposal means you've started the initial draft you're proposing it committed means we're putting it into one of our sprints um work in progress obviously candidate is when something you're pretty much done you need to get review on the work recommendation means review is done we can recommend we add this and then based off of what release cycle or whatever it be we have the point of reference which is essentially locked there shouldn't be any changes to it from that point uh deprecated obviously we've scrapped any of this and moved on with a different part so i have that filtered by where the designers have it and where the engineering uh has it so obviously i haven't done a lot of engineering work on this at all so if we were to look at just the ui components itself we could do that typography essentially we have the file that it goes to any comments about what needs to be done or changes so i added monospace typeface and i also added jumbotron explorations i need to finish before it becomes a recommendation so with the ui components this also is um another giant table so this follows the same pattern as the templates in the last piece except for i gave this giant table which has all of the components that i have that i'm working on currently at the moment you can see that this table has a few additional uh sorting options so by name um i was testing some stuff before i put it into your i started this video um we have whether or not light mode is completed its status uh whether or not dark mode is completed its status how far the developers are on and then any related bugs for the work so again uh i went through and templatized the page for components so if we were to take a look at how it lay out one of these components additionally i have install steps related bugs linked to the figma file and then linked to its code repository uh here i would place uh the embed of figma kind of an overview of the component paragraph on why we would use this example of how to use it within this is literally just almost pseudo code so you can kind of see how to use um the the props within so icon instagram weight brand size large category interactive aria label linked compass of designs instagram page um we have a table here for releases so when you do a release you throw a date in here you'd have the tags so if it's a proposal or breaking change or candidate um we would know oh i should throw accepted in here so accepted would mean that it's uh most current version a description of any changes you have the design you can throw a figma file so that it's always updated when the figma file changes um content guidelines anything for copywriting the anatomy so what other components are within and then listing those out next to it uh behavior for rest these would just be drop downs in order for you to kind of clean up the page a bit so here you could throw [Music] whatever the rest uh behavior looks like what it looks like it's focused um any states you can list those out or rearrange delete add to whatever you need to here developers uh so the code status of where we are with um android ios and web any bugs and issues and repository some code examples uh i'm playing around with trying to figure out how i can get uh github's code to always be synced up so that way whenever there's a change i don't have to come back and do update the documentation currently there's no real good way that um i i don't think anybody's created anything yet that accurately keeps files synced so hopefully when the public api comes out more people will be doing work on that but speaking of apis we can talk about the properties available that's what is in the code example here so icon weight size category aria label you just outline those properties and any additional apis that you need to call out as well um accessibility considerations a paragraph about the information needed in a recap this would show that you have um essentially a list of things that you need to consider when you're doing these um the aria authoring practices this will just link directly out to the documentation and any issues uh all component issues attract within the github repository so if we were to go to issues um that would just link us directly to whatever we need to to fix on here hopefully i have it labeled as accessibility issues that should just be issues in general um testing environments frequently asked questions so i've started working on a page um with that full setup um i think the one that i have the most filled out right now is icon so if we were to take a look at icon um we can see all of the status install steps um link to figma so if we clicked on this it should just take us directly to the frame that has the icon set if we click on this it'll take us to the actual code but here we see you can embed the figma file or the frame directly within here and all it shows is that frame so whereas with the figma file itself there is obviously other components around it but here uh just linking directly to the frame just puts the frame in that in the embed um icons provide visual context for full list of icons available please visit our icon file in figma so i think that goes to a different file this is our iconography guidelines so i'll probably have a different page for this but this shows at least in figmo how to use icons again code example versions the code examples that should be put below here is an example of using the properties so we have icon has a prop type of string it's required it has a default value skull and crossbones so this default is hopefully helpful to identify undefined icons so if you didn't put which icon you wanted to use hopefully seeing a skull and crossbones means oh i didn't put actually put an icon in here the labels weight size and then giving any descriptions on what is available so we can do b equals brand r equals regular um let's see l equals light so that way that documentation's there for it size defined mini small medium large jumbo and category is informative or interactive and that changes it to either just a read-only state or a stateful button for like checked and unchecked um any other apis that aren't directly related can be put below it accessibility considerations recap so we need an assistive label uh needs to meet four to five four point five to one contrast and three point all right three to one if using jumbo uh touch target needs to be 48 pixels diameter requirement so here is the links out to the actual pages again for issues and any automated tests or specs so it's slightly different because i just made changes to the template but that's kind of generally how i use the component document or like design system documentation within notion now one thing that can be helpful is using uh this site which is designs design system checklist dot com um it's just a helpful thing to keep track of things like brand logo guidelines etc design tokens uh core components tooling all of that i'll link that out to you when i get the video out as well or i'll put it in the description below but another thing to consider doing is looking at how other companies have their things set up so if you look at other design system documentation it might be helpful to go go through and figure that out for my own design system obviously all of these still have uh their own files um for things uh directly related to the items within the design system documentation so if we go back to design system documentation and look at category uh design documentation design exercises design process design documentation exercises design process these are just all things that i have felt filled out essentially here so we have guidance on design design documentation etc color tokens uh larger like larger ui patterns so these aren't necessarily like the nitty gritty components like that's a call to action call to action that's a badge heading a paragraph card behind it so larger patterns can be documented like that so that you can start creating things like this so this is literally just using that modular component or larger patterns which would be ux patterns here all right um yeah if you have any questions more on how i do this kind of documentation feel free to reach out and let me know thanks

Channel: Compass of Design

Views: 3,687

Rating: 5 out of 5

Keywords: design, adobe illustrator, designer, adobe, adobe photoshop, adobe indesign, illustrator, photoshop, indesign, design skills, design principles, animation, animation design, design thinking, creative, arts, art, design theory

Id: 0bO1-BSCqUs

Length: 17min 7sec (1027 seconds)

Published: Sat Oct 10 2020