Pipelines automatically watch for events in the design system, run a specified exporter in your format of choice, and deliver the resulting code to your destination.
List of all code pipelines.
How pipelines work
- Exporters are packages (similar to an npm package, for example) that transform design system data into production code. Each exporter package is unique to which platform, technology or stack it targets, and in the code it produces.
- Pipelines are automatic observers that watch for events in the design system. Every time a specified event happens inside the design system, the pipeline will run an exporter with your chosen configuration.
- Builds are what a pipeline creates when it runs, and contain the exported code.
- The delivery destination is where the exported code is automatically delivered once the pipeline finishes running a build — for example, sent to GitHub as a pull request. You can also choose to not deliver the build results by choosing the “Build only” destination.
Create a pipeline
Choose an exporter and create a pipeline to get started. You can proceed right away with the default settings, or you can choose to customize your code output with our new configuration options.
- Navigate to Code automation → Pipelines.
- Click the + New pipeline button and select an exporter from the dialog.
- Alternatively, you can browse the list of exporters to fine one, and click Create pipeline.
- Follow the steps in the wizard to set up your pipeline.
Selecting an exporter to use for this pipeline.
1. Data
The following options are available in the Data step:
- Name your pipeline: Name your pipeline (if desired) by editing it in the top left corner. The default is the name of the Exporter
- Design system data: An overview of which data will be included in the exported code, depending on the type of exporter selected.
- Select brand: Optionally, choose which brand the pipeline should use
- Select theme(s): Optionally, choose which themes the pipeline should use by selecting them in the Add theme dropdown. How themes are applied to tokens may depend on your exporter configuration settings.
2. Configuration
The options available in the configuration step differ depending on the chosen exporter. Configuration allows you to customize settings for output such as:
- formatting (i.e. for colours and token names),
- themes,
- prefixes,
- file structure, etc.
All of the configuration options for each exporter are documented in the GitHub .readme, which can be found by clicking View Exporter in GitHub on the pipeline, or clicking Github from the exporter list.
Code preview
The code preview in the pipeline editor that allows you to preview the code that will be exported before creating the pipeline. After making your adjustments in the configuration tab, click Rebuild preview to see the changes reflected in the code preview.
3. Delivery
In the delivery step, you’ll choose to how deliver the results of your build.
- Event: Select an event that will trigger the pipeline. See Event types for more detailed explanation.
- Delivery method: Choose how the results of the build should be delivered.
- Pull request: A PR will be created or appended when this pipeline runs on a branch called main. Learn more about pull requests here.
- Build only: Your resulting code will be available for download from the Pipelines table.
- Delivery options (for PR): Some exporters have additional delivery options:
- Custom PR title: Override the default pull request title with a custom one.
- Custom commit message: Override the default pull request title with a custom one.
- Clear target folder: The destination folder will be emptied before exporting the new output.
Edit pipeline
To edit a pipeline, select Edit pipeline from the menu in the Pipelines list. This will open the wizard and allow you to make changes to configuration and delivery settings.
See Managing pipelines for more options.