Build it in Figma - Build it in Figma: Create a Design System V: Documentation

A design system is only as strong as its documentation. Learn best practices for documenting your design system using Figma and other tools. Figma file: https://www.figma.com/community/file/867135839870202854 Design System Livestream with John Kerwin/Thumbtack: https://figma.zoom.us/rec/play/4P5qZb0kzUzszoubpMkgmO903P62cWcMA6miOUQDq0JkaM9VYn5-XBArQT7frF3tqpivU84vsMBubndr.RusfASiaw2ixbSqi?continueMode=true 0:00 Intro 2:00 Documentation within Figma 4:30 Publishing your Design System to a Team Library 5:00 Linking your Design System library assets to another Figma file 5:30 Using component descriptions with search terms for easier to find components 6:45 Component descriptions show up in asset search 7:30 Adding developer notes to component descriptions for better dev handoff 9:00 Using emojis to help communicate and categorize your document 10:00 Primer Web community file's naming conventions and descriptions 10:30 Adding class names to components for easier developer handoff 11:30 Component descriptions in the code panel 12:15 Style descriptions in the code panel 13:00 Splitting out Marketing/Product/Icons/Colors into separate libraries 16:15 Setting up default exports for components 16:45 View only exporting (for non designers) 17:30 Exporting all components in a file 19:45 UX/UI Documentation kit community file 22:00 Documentation cards and buttons community file 24:00 Structure plugin exports all objects as html/css 25:10 Annotation kit community file for more permanent annotations 27:30 Redlines plugin for setting up documentation around spacing/dimensions 31:15 Bringing Figma into external documentation tools i.e. Notion, Dropbox Paper 32:00 Tip: Right click + copy link to frame and embed 33:15 Using prototypes to communicate interaction details 34:00 Embedding prototypes (with options) into your documentation 34:30 Prototype options are embedded in the share url 35:30 Embedding Figma files in Jira 37:30 Utilizing Figma links for documentation 39:30 Code panel in Figma vs. Zeplin 40:00 Prototyping a menu page to allow for multiple flows per page 43:30 Showing what is in progress vs. what is ready to use 44:30 Status Annotations plugin for documenting status (approved, ready for dev, in progress, etc) 45:20 Methods for dealing with deprecated components 48:00 Using frame background colors to assist categorization 49:30 Using Figma's API to pull design system data for integration in external websites 52:30 Using Zeroheight to sync your Figma libraries and provide extra documentation 56:00 Linking to your file from Figma embeds 57:00 Splitting out Team libraries #Figma #DesignSystem #DesignSystems #UXDesign