How to start your documentation
A design system is only useful if it’s used and understood by everyone — including non-technical people. It can be challenging to write or structure, but even small pieces of information, like component descriptions or color usage guidelines, offer valuable clues that help your team understand your system.
First steps inside Figma
When you start building your design library in Figma, some default documentation features are already built into the tool. Here's a quick overview.
Variable documentation
When creating or editing Variables in Figma, you can add a short description below the name to inform your team about its purpose. In the example below, we describe this color as the main brand color of our design system.
Text Styles documentation
When creating or editing Text Styles, you'll find a description field below the style name. Use it to let your team know how and when to use that Text Style.
Component documentation
Last but not least, within the configuration settings of Figma Components, there’s a description field where you can provide more detailed information — including rich text options and links to external documentation.
More advanced and complete documentation
When you're ready to create more advanced documentation and publish it online, there are several tools available to support you. Here are a few options:
- Zeroheigt: one of the first online tools for design system documentation. It allows you to sync directly with your Figma library.
- Supernova: similar to Zeroheight, this tool lets you sync with your Figma library and fully customize your documentation pages..
- Figmayo: a newer player in the space, offering a fast and streamlined way to sync and update your Figma library documentation.
- Notion: while not built specifically for design systems, Notion is widely used in many companies. To avoid introducing new tools or accounts, it can be a good starting point for documentation — especially since pages can be made public.
Final toughts
Take your time to write documentation using clear and simple language. Use illustrations or even video tutorials to make the learning experience more accessible. Don’t assume people will automatically read your documentation — plan regular meetings, send newsletters, and actively communicate updates.
Your design system will continue to evolve, so make it easy for everyone to suggest changes, give feedback, and contribute. I highly recommend reading the excellent article “Why Do They Ignore My Awesome Design Documentation?” by Slava Shestopalov.
I hope this helps you on your journey to documenting and growing your design library toward a more mature and collaborative system.