My Dear Friends of Figma in In the previous video we learned all about the foundations of a design system if you haven’t watched that video yet head back there to learn about layouts grades typography and color and we’ll meet you back here when you’re caught up the third aspect of your design system is documentation or the how it communicates the purpose of all these.
Aspects of your design system and how to best apply them your documentation should also grow and evolve over time just like your design system documentation can look like on canvas annotations for components and design files style and component descriptions and.
Figma naming structures in a library or code base written articles and guides or dedicated websites and tools how you choose to document your system is up to you think about your audience when they’ll need it and how they’ll access it.
Bear in mind that changing people’s behaviors and habits is tricky business if it’s too difficult for people to find an access they won’t use it we recommend documenting your decisions as you go this captures important information as you define it and saves you time adding new components patterns or.
Layouts to your system make documentation a rule or criteria from working it done documentation tips writing clear documentation is a skill try these tips to improve your Docs make sure your documentation is thorough and complete the quality impacts the success of the system.
Put yourself in the shoes of someone who’s never seen this element before what are they using it for what do they need to know to achieve their goals what questions might they have along the way.
avoid jargon in complex terms if you need to introduce new terminology Define it try and visualize what you write if your audience can’t picture what you’re talking about they can misunderstand metaphors and analogy are great ways to communicate mental models foreign.
Clear plain language that everyone can understand consult with writers in your company for guidance check with your team ask for feedback or if they can help you make it more clear speak to people outside of your team who may have less contacts or experience does it still make sense is there.
Anything missing a naming system makes it easier to find understand and apply elements in your design system take color for example instead of evocative names that describe a color or hex codes that abstract it.
Consider the function of the color and how you’ll use it semantic naming names that convey meaning make application easier naming a color danger or this one primary is more helpful than red or a jumble of letters it can also reduce incorrect usage of a color take this set of buttons here the.
Primary buttons are the main action of a page there should only be one of them secondary buttons are non-critical actions each set has a default state an oppressed state so far we can identify three levels to these buttons.
The category of the object button its use primary and secondary and any variations default and pressed from this we have established a structure for naming assets category use and variation for the structure to work we need a consistent way to put it in place common options include title case.
Sentence case underscore case not sure where to start try talking to your development team some languages may not allow spaces and variable and component names so it’s common to use camel case and underscore.
Case in programming they may already have a structure you can adopt that makes handoff easier let’s explore how that could work with an example component is a collection of properties that form a single element or experience when someone uses the component they make choices about what properties they.
Change or removed both designers and developers play a role in establishing those properties by aligning on property names applications and limitations you can keep design files in sync with your code base reducing the time it takes to turn designs to code.
When you’re just starting out documentation can be a scary skill to master take your time you’ll always have time to evolve and update as both you and your system grow speaking of growth in the next video we’ll dive into processes these are critical procedures to keep your system.
Healthy so it can grow up big and strong
Figma is free to use. Sign up here: https://bit.ly/3msp0OV Habitz design system Community file: https://bit.ly/3BVcql4 Video course: …
Figma Official Channel,design,define,your,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, Config, design system, tutorial, product:figma_design, audience:designer, language:english, format:standard, produced_by:product_education, theme:design_systems, event:none, series:intro_to_design_systems, type:workflow_tutorial, level:intermediate, primary_feature:, secondary_feature:,