Youtor
Build it in Figma Create a Design System V Documentation
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=Yp_qfB1FA0Y
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/... • Design System Livestream with John Kerwin/Thumbtack: https://figma.zoom.us/rec/play/4P5qZb... • 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
#############################
