If you're looking to seamlessly integrate design changes into your codebase, Supernova's pipelines are the answer. They're an automated system that detects design updates, converts them to code, resources, assets or whatever else you desire, and sends them to your specified destination, such as GitHub repository.
For example, when you update a styling choice in your project, Supernova's pipelines instantly generate and deliver the corresponding code changes to your repository, keeping your creative choices always in sync with your codebase. And they do so in any form or shape you desire because of the power of exporters.
How pipelines work
At the heart of every pipeline is an automatic observer. It continuously monitors specific events in your design system, such as adding or changing design system elements (like tokens).
For each detected event, you specify which pipelines should be activated. Pipelines specify how your design data gets transformed into usable code and also where and how they should be delivered.
Finally, code is generated and sent to your specified destination. This is usually a code repository where Supernova will open a pull request with generated code.
Setting up pipelines
Please refer to the Learn documentation for creating new pipelines in the Supernova design system platform.
Event types
Every time the event specified in the pipeline occurs in the design system, the pipeline will run. The following types of events can be watched for in the design system:
Source updated
The pipeline will run every time a data source is imported and it contains new or updated data. For example, if a Figma file is published resulting in updated design tokens. Effectively binds code delivery to the design library delivery.
Version released
Triggers the exporter every time a new version of the design system is published. Ideal for stable production environments with strongly defined release cycles.
Head changed
Supernova will run the pipeline every time anything changes in your design system, with a short buffer window so you don't get overwhelmed with updates. Suitable for dynamic design systems where continuous updates are desired.
No event
The pipeline will not run unless manually triggered. Learn how to run a pipeline routine manually in Managing pipelines.
Code delivery
Open a pull request
Once the pipeline is triggered, it will open a pull request with the resulting code against your targeted repository, following these rules:
- The PR is opened in a branch (automatically created) called supernova/[exporter-name]. Make sure there are no conflicting branch names before running the build.
- If there is already a PR opened by the exporter, code will be committed to the same branch, so it doesn't create multiple branches.
- If you close or merge the original PR, then the next commit will create a new PR.
Please note that pipelines are never directly committing to production branches, and you are always in control of when the data should be merged.
Exporters never delete any files from the repository — they can manipulate files for which they are directly responsible, but nothing else.
Configuration options
- Connection: The authentication method you would like to use for this hook (OAuth or personal access token)
- Organization or Workspace (if applicable): Your organization or workspace.
- Group or Project (if applicable): The group or project containing your repository.
- Repository: The repository you would like to use.
- Branch: The branch where the pull request will be opened.
- Relative path: Path relative to the repository root to which code will be exported.
Deliver to code repositories
Supernova supports all major source control providers. Select the one you want to use to learn more about how to set it up:
If you would like to fully integrate Supernova with your organization's account, you can grant Supernova access to any repository to create pull requests on your behalf. This is done by installing and authorizing the Supernova App for your provider.
- The repository data is not being stored in any way. The exported code is written as a pull request, the repository is only scanned at the moment it is pushed to deliver the code delta, and the code is never stored in Supernova.
- Users are always in control of their data. We ask for secure OAuth authentication when creating a pull request which allows the user determine repository access. We recommended that you only provide access to the necessary repositories.
If you prefer not to authorize access to a repository that contains production code, it is also possible to create a separate repository for Supernova-created data (to be used as a git submodule). This method eliminates any possibility for Supernova to access parts of the code not maintained by Supernova.
With the secure authentication, Supernova will have the following permissions:
- Read access to metadata
- Read and write access to code and pull requests
Using multiple pipelines
For those with intricate tech stacks or multiple design systems, Supernova supports creating an unlimited number of pipelines.
This allows you to fine-tune exactly how different design systems interact with different platforms or codebases. For instance, you can set up distinct exporters for iOS and Android while having a shared exporter for general design changes — and on top of that deliver your iconography anywhere you want, even to your marketing teams.