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