3
.
5
Home
Mission 3: Automation Captain
3
.
5

Code Automation FAQ’s

Exporters and Pipelines

What are pipelines?

Pipelines use the power of exporters to automate the delivery of design tokens and assets into your codebase. Instantly generate and deliver corresponding changes to your repository to help you accelerate product development. 

Setting up pipelines takes only a few steps, and you can automate your code base even quicker with our new preset exporters.

What’s an Exporter?

Exporters allow you to control the output format and structure your pipeline code. Exporters are plugged into Supernova pipelines to deliver code, assets, and anything else into your codebases automatically. 

Whether you simply want to update CSS or achieve something more complex, like creating entire libraries automatically, Exporters are the answer.

What’s changed with Exporters?

Our Exporters have multiple configurations you can utilize to your use case(s) - these exporters are pre-built and configurable for different platforms.

For any configurations not available, you will still be able to create custom exporters. Read more about custom exporters here.

We’ll continue to build new configurations, so let your Customer Success Manager (CSM) or Support team (if you do not have a CSM) know about any feedback you may have.

Do the Exporters support themes?

Yes, all available Exporters support themes. You will be able to select what themes and how you want the themes exported when you set up the pipelines. 

You’ll have the option to select one or multiple themes.

Do Exporters support light and dark themes?

Yes, most of our Exporters support light and dark themes. You can select light, dark, or both when you set up your pipelines.

How can I export themed token values?

You can select one or more themes in the data tab of the wizard to apply themes to exported Tokens. 

What configurations are available for the Exporters?

Configurations will depend on the Exporter type. If a specific configuration is not available, you can still create custom exporters. 

If you have feedback about specific configurations, let your Customer Success Manager (CSM) or Support team (if you do not have a CSM) know.

What scenarios would you need to fork and create a custom exporter?

  • When you need a customization our pre-made exporters don’t provide you
  • Export code for a platform that Supernova doesn’t support (Unity, Xamarin, Bootstrap, etc)

What scenarios can we use the plug and play exporters?

Below are some scenarios. You can always create custom exporters to take your design system automation and product development to the next level:

  • Automate design token pipeline between Figma and code repository
    • E.g.: If you have a variable or style change in Figma, Supernova automatically makes those changes to your code repository
  • Automate pipeline for exporting icons from Figma to common formats (SVG, PNG, React components)
  • Export design tokens to common formats for your engineers to utilize for product development (CSS, CSS-in-JS, Tailwind, iOS,  Android, etc)
  • Scale your multi-brand, multi-theme, multi product Design System

Can we export assets into usable SVG icons?

Yes! There are two exporters you can use for vector assets:

  • Export vector assets as SVG
  • Export vector assets as React components

Eventually, we plan to have an exporter you can use to export icons directly to components.

How can we use exporters to help us scale a multi-brand, multi-theme, multi-product Design System?

Most exporters will support multiple brands and themes.

You will have access to a number of configuration options that will give you the power/flexibility  to customize how code should be exported. 

With the latest exporters, coupled with our approval workflows and our granular permissions, you have the flexibility and power of creating a scalable, multi-brand, multi-team, multi-product design system. 

Contact your Customer Success Manager if you would like to discuss how to do this further.

Will the Exporters support downloading fonts?

As of right now, no. Exporters currently support only exporting design tokens, vector assets, and documentation.

Let your Customer Success Manager or Support team know though if this would be a valuable capability for your company.

Will you be supporting new Tailwind versions?

Yes, our Exporters will support Tailwind v4. You can then have your Tailwind v4 configuration generated automatically from Figma Variables or Supernova tokens.

SDK and CLI

How can we use Supernova’s SDK?

Build on top of Supernova and extend the Supernova platform to help you continue to accelerate your product development process. 

Note, unlike a CLI, the SDK on its own is not executable and has to be part of a Node.js script/project

See this guide for more information.

What scenarios can we use the SDK for?

Below are a few scenarios. See extended list here.

  • Read and write Supernova design system data (design tokens, documentation, etc) from a Node.js project/environment
  • Perform actions programmatically
    • Trigger a pipeline
    • Publish documentation from Node.js project/environment 
  • Build plugins on top of Supernova data
    • Eg: To Figma or VS Code

How can we use Supernova’s CLI?

Our plug and play Exporters cannot perform actions in Supernova and can only consume data that already exists in Supernova (read-only). 

Customers can use CLI to perform actions in Supernova from a CI/CD pipeline.  

You can also use Supernova’s CLI with the Exporters if you want to deliver code generated by an exporter to a repository behind a VPN (not available outside of a local network). 

Below are a few examples of how you can utilize Supernova’s CLI:

  • Run exporters locally
  • Sync tokens between Token Studio and Supernova
  • Publish documentation
    • E.g.: publish documentation from a CI pipeline when markdown documents are changed.
  • Get workspace details
  • Get Design System details

Read more about our CLI here.

Other

Who do I contact if I have questions or feedback?

If you are a current customer on the Enterprise plan, contact your Customer Success Manager (CSM) directly or email csm@supernova.io, and we will route you to your CSM. 

If you are a current customer on a non-Enterprise plan, contact Support at support@supernova.io.

If you are new and would like to learn how Supernova can help you scale your product development, contact sales@supernova.io.