You're probably wondering, "What is an exporter and how will it help me?" Let us break it down for you because exporters will be your new BFFs in the exciting world of design systems.
What is an exporter?
Exporters are small plugins that take your source of truth — the design system — and convert it to whatever you desire: production code, resources, images, or something else entirely.
An example of an exporter could be a very simple transformation that takes all tokens within a single design system, converts them to CSS values, pushes the code to your repository, and opens a pull request. But exporters can be vastly more complex and can create entire libraries automatically for you.
Exporters can be invoked manually if you need your code once, or can be plugged into Supernova pipelines to deliver code, assets or anything else into your codebases automatically.
One source of truth, multiple flavors of code
Whether you're working on a web application in React, a mobile app in Flutter, or even a game in Unity, there’s an exporter package that’s got you covered — or you can build your own, fully customized exporters.
You can even export to various platforms at the same time, supporting even the most complex setups.
No human errors
Humans are prone to errors, especially when it comes to repetitive tasks. Exporters eliminate the possibility of those slip-ups by turning your design system data into error-free code. We welcome our robotic overlords (for particular tasks, anyway).
Build once, use everywhere
Exporters are like npm packages — they are purpose-built to produce deterministic results. This means you can use them across different projects and teams, assured that they will produce the same high-quality output every time. If you need to change how your code looks across all projects, change one exporter, and the updated code gets delivered everywhere.
To sum up
Exporters are code automation turned up to 11: error-free, and very efficient when deployed on scale, supporting any platform or tech stack you want. Best of all, it is really easy to start with them. Happy coding!
Available exporters
We are actively maintaining a number of exporters to help you get started delivering to your codebases right away. Here are two main places where you can find and explore all of the exporters the Supernova team and members of our community have created.
Exporter list
In the Code automation section in Supernova, you can browse a list of existing Exporters that you can easily install with a single click and integrate them into your delivery pipelines.
Core exporter repository
For those who are more technically inclined and want a closer look at the source code, or for those looking to collaborate and contribute, the Core exporter repository is the place to be. You can find many exporters there, as this is the place where the development happens.
Custom or private exporters
Supernova also offers the option to install exporters from private repositories, which is ideal for packages that are unique to your design system or if your company has strict security practices. You can self-host the exporters using GitHub, GitLab, Azure, or Bitbucket and make them securely stored within your organization this way.
Learn more about private repositories here.