Document your design system with our powerful editor and integrate your Supernova design system data to keep your documentation always up to date the latest changes.

Collaboratively write and maintain your documentation, completely customize the appearance of your documentation site, and publish and share your documentation.

---

Documentation Features

The following features are included in the documentation editor:

• rich text editing, code blocks, and images
• add static images from Figma frames
• add special "blocks" created from your design system data, such as:
• individual tokens, token lists and groups
• individual components, component lists and groups
• component sandbox
• custom URL embeds, including Figma frames, Storybook and YouTube
• add custom shortcuts to other sections of your documentation

---

Using the documentation editor

To open the documentation editor:

1. Click the Documentation icon in the left menu.

---

Documentation files

Documentation files are Figma files whose frames have been used inside your documentation. You can add Figma frames using the Figma frames block, or in the documentation settings.

Add documentation files:

1. In Documentation settings -> Documentation files, click + Add New File
2. In the dialog, provide a link to the file and click Confirm

— or —

1. Create a Figma frame block inside your documentation
2. Click Add Figma file
3. In the dialog, provide a link to the file and click Confirm

 

Update or remove documentation files:

1. Navigate to Documentation settings -> Figma (in the documentation editor, click the settings cog in the upper right corner)
2. Under Figma, you will find your documentation files
3. Click Get Updates to retrieve a the latest version of the file from Figma and update it wherever it is being used in your documentation
4. Click the ••• to remove the file if desired. Removing the file will remove references to it in your documentation.

---

Writing and editing

The documentation editor behaves like any familiar document text editor (such as Google Docs, Microsoft Word, or Notion). You can type anywhere, select text, copy and paste, and add rich content blocks that include information about your design system.

In additional to the standard rich text formatting options, you can also change the type of text block, easily click to switch between header types, and add links.

---

Blocks

A block is any kind of content you add to the page, such as text, lists, quotes, dividers, or media. You can move blocks around on the page to reorder your information.

---

Customize your documentation

---

Publish your documentation

To publish your documentation:

1. In the top right corner of the documentation editor, click Publish.
2. Click View to view the published site.

---

Make documentation public

Make your documentation site publicly available to everyone, without password protection.

1. Navigate to Settings -> Documentation -> General
2. Under Make Public, turn the switch to ON
3. The documentation site will be available publicly at the URL shown