Introduction

Start delivering your design decisions to your codebases.

Hi there, we’re super excited to have you here! This documentation has everything you need to get started with Supernova, whether that's building your next Figma plugin or delivering code to your codebase. If you haven't already, you can also join the #development channel in our community to discuss everything you see here!

We, too, are developers. And we get you.

Starting with a new platform is always a commitment. We crafted the developer experience around the following core points:

Developer-first ecosystem

Our developer platform is built on widely-used languages like JavaScript and TypeScript, making it approachable. Plus, the full TypeScript support means that you'll catch issues early, making development more efficient. There are also a lot of conveniences to help you manage common tasks.

Easy to get started

The SDK is well documented, with lots of examples, and you can hit the ground running from minute one. When you're ready to dive deep, there are some really great advanced features you can explore. You should never feel lost or overwhelmed — if you are, please feel free to complain about it publicly on our community channels so we improve!

Community above all else

Our active community of developers and extensive library of community-contributed plugins mean that you have a wealth of experience and support to draw upon. And if you ever get stuck, our team or other fellow developers will always help you out.

Communication is everything

We continuously update and refine our platform based on community feedback. We're in this for the long haul and are fully invested in helping you, and your company, succeed.

So go ahead — take the plunge. With Supernova, you're in good hands, and we can't wait to see what you'll build.


 

Export to codebases

Supernova allows automatic synchronization of design decisions such as styles or assets (icons and similar) to your codebases using a technology we call "exporters".

 

Exporters

If you want to start delivering to your codebases right away, start with our guide about using Supernova's out-of-the-box exporters to deliver code. We recommend starting here first to understand the power of Supernova.

Custom exporters

If you have tested delivery using the default exporters but you didn't find the one that precisely suits your needs, Supernova allows you to customize existing exporters or even create new exporters from scratch.

In the following guides, you'll learn how to build and customize even the most complex of the exporters easily using technologies you know and love like Typescript or Javascript.

 

Prototype with your components

Prototype, validate, and document your product features — all in one place, powered by your design system.

Supernova Create

Learn how to connect your component libraries (components, icons, etc.) to create AI-powered prototypes using your own design system.

 

Supernova CLI

Use Supernova in your CI/CD pipelines

The Supernova CLI enables you to run specific tasks connected with Supernova from your CI/CD pipelines, from your action triggers (GitHub Actions and similar), or from your command line. Supernova CLI is powered by the Supernova SDK that allows access to many more lower-level operations.

 

Supernova SDK

Build using your design system data

All your design system data can be accessed through Supernova SDK, a powerful Typescript-first library you can include in your browser or Node-based projects. Supernova SDK opens up ton of opportunities for developers, such as the ability to build their own Figma plugins or include data from the design system on the fly.

In addition to reading data, the SDK also allows you to write data back to Supernova, so various sources can contribute data to the design system. To get started, follow our guide on building with the SDK.

 


Resources

Some resources to help you get started.