Explore Supernova

An introduction to the Supernova interface

Navigation bar

How to access workspace and account settings, and how to navigate between sections of the app.

Sections

The side navigation bar takes you to different sections of Supernova.

Workspace

Displays the current workspace. Use the dropdown to change to a different workspace, or create a new one.

Design system

Displays the current design system. Use the dropdown to change to a different design system, or create a new one.

Version

Displays the current version. Use the dropdown to change to a different version, or create a new one.

Manage profile settings

  • General – Name, password, delete account
  • Integrations Add and manage integrations for Figma, GitHub, Azure and GitLab
  • Authentication Generate authentication tokens
  • Sign out Sign out of your account

Workspace Settings

Access all Supernova workspace settings.

  • General – Change or remove the workspace icon, edit the workspace name or URL
  • SSO Enable single sign-on (Company plan only)
  • Manage plan Access plan information and making changes to current subscription
  • Billing Provide billing details
  • Invoices Access billing invoices
  • Team Invite new team members or edit existing team member roles

Design System Settings

Access all Supernova design system settings.

  • General Edit name or description of the current design system, delete the design system
  • Versions Create a new design system version
  • Custom properties Create custom properties in your design system
  • Brands Enable multi-brand design system, create a new brand

Documentation editor

Documentation

Open the documentation editor.

Navigation style

Switch between navigation styles (top or side navigation).

Top navigation

An example of the editor with top navigation enabled.

New page or group

Create new documentation pages or groups with the + Add button.

Settings

Access documentation settings.

Publish

Publish your documentation and share with your team.


Documentation blocks

Token block

New block

Add a new block after the current one, and select the type from the list.

See Create a new block for more details.

Block menu

Click to access the block menu options, or click and drag to move the current block.

Use the block menu to:

Block content

The main content area for a block.

Brand

Some blocks have a brand selector, select a brand to change block selection content.

See Multi-brand design systems for more details.

Actions

Some blocks contain items that can be edited with additional actions, such as Token blocks.


Asset and frame blocks

New block

Add a new block after the current one, and select the type from the list.

See Create a new block for more details.

Block menu

Click to access the block menu options, or click and drag to move the current block.

Use the block menu to:

Item menu

Some blocks have items with menus of their own, such as a Shortcut block.

Click to open the menu or click and drag to reorder.

Layout settings

Some blocks have additional layout settings, such as Figma or Asset blocks.

Click the settings icon to access layout settings.