Learn how to efficiently document your design system components in Supernova to foster seamless collaboration between designers and developers.
Components play an integral role in any design system. Designing and creating your components is only one step of the process. To make sure your components are being effectively used and implemented, you need to document them thoroughly.
In this guide, we'll take you through all the stages of efficiently documenting your design system components with Supernova. We'll go over how to import your designs, manage your components, easily create documentation pages, and all the best practices for documenting components — catering to your entire team, from designers to developers.
We'll be using Supernova to document our components. Supernova lets you automatically import all our designs from Figma, and then easily document your design system components with just a few simple steps.
Get started with Supernova for free by signing up and logging into your account.
The first thing we want to do is to import our design files from Figma into Supernova. To do this, we'll log in to our Supernova account and open the Figma file we want to import.
First, you'll need to publish your Figma file as a library.
In Supernova, in the left sidebar, head to the Data sources section. Once you're there click on + New data source.
Add your Figma file URL and make sure to select all the options to import. You can also enable the Automatic updates option to keep your design system up to date automatically. Check out our full importing guide to learn more.
With our designs imported, head to the Design system data section from the left sidebar, then click the Components tab.
Once in the Components view, we can start adding our components and linking them to their Figma counterparts. This will help ensure that the correct components are connected and that you can manage them from one place. Click on the + New component and fill out the name. Under the Figma component column, click on your component and select which component you want to link to.
Once that's done, you can add any more details you wish in the component's row and then move on to the documentation.
Now that our components are correctly imported into Supernova let's head over to the Documentation section from the left sidebar.
Supernova lets you completely tailor your documentation to your design system with an easy-to-use editor and flexible content blocks. You will have a default set of populated pages and sections, but you can add your own with the + Add button in the left sidebar.
Under the Components section, click on one of the components. In our demo, we will be using a calendar component.
The first step of documenting your design components is to display them. This will give readers an instant idea of what the component is and many of its features. To display a component in Supernova, type '/’ or click the + button to add a Figma Frame block. Click + Add frame and from the Figma content selector find your component.
After selecting your component, click confirm, and your Figma frame will be displayed right in your documentation.
Using Figma Frames lets you be flexible with what exactly you want to showcase with your component.
Best practice using Figma Frames
Make the most of the flexibility of Figma Frames to share more visual information about a component. You can freely annotate or edit your component in Figma and it will be automatically updated in Supernova.
It's also very useful to break down the anatomy of a component to quickly convey its properties. Within the documentation you easily add details for each part of the component.
After showcasing your component, the next relevant piece of information that users will want to know quickly is the status or health of a component. At a glance, users can know the component's health, whether it's fully documented, and link to it in Figma or the code repository.
You can also add and remove any more details that you add from the Components management view. To add these details to your documentation page type '/’ or click the + button to add a Component Checklist or Component Health block. Select your component, then select which properties you want to showcase. Once you publish your documentation, users will be able to get critical information on your component as soon as they open the page. Also check out our detailed guide on how to track and document component health.
Documenting the usage and guidelines of a component is crucial. It ensures that designers and developers understand the component's purpose, its intended use cases, and any constraints or best practices associated with it. Geri Reid, former NewsKit Design and Accessibility Lead, shared all the details on how to effectively document the usage and guidelines for your accessible components in Supernova. Here, is a broken down version to help you document quicker:
Get started on the right foot with our Components Documentation Template. Enter your email and download it for free.
A common failing of design systems is that they cater more to designers than developers, if at all. No design system documentation is complete without documenting the code and details developers need to implement components. Supernova was always built with developers in mind, and to help you document your components effectively, you can utilize live code blocks or Storybook embeds to showcase your components in action.
In your documentation, you can either host your code as a code block for a variety of your code implementations. This helps developers find the latest component implementation in a central source, connected to its variations, guidelines, and more helpful information. You can add a code block simply by typing '/’ or clicking the + button to add a Code block. You can then select the language of your choice and paste in the code.
You can take it a step further with a Render React code block that both shows your code and a live implementation of it. Follow the same steps, but instead, add a Render React code block, paste your code and watch it in action.
Another popular option for code implementation is connecting with Storybook. Many dev teams already rely on Storybook, and embedding it in Supernova helps create a central source of truth for your entire team.
You can follow our full guide on embedding Storybook blocks and see your components in action.
This guide scratches the surface of what Supernova and design systems can do. Laying the correct foundations for your components and designs is key to driving adoption, streamlining product development, and improving consistency. Still unsure where to start or want to take inspiration from successful design systems out there — check out:
Unlock the full potential of your design system with Supernova, empowering you to drive innovation, collaboration, and seamless scalability.