Creating code pipelines

Learn how to build a code pipeline and automate code delivery.

null

Pipelines automatically watch for events in the design system, run a specified exporter, and deliver the resulting code to your destination.

null

How pipelines work

  • Select the exporter you would like to run.
  • Configure an automatic observer that watches for events in the design system. Every time the specific event happens inside the design system, your exporter runs.
  • Set a delivery destination for the generated code. Once the exporter finishes, the exported code is delivered to your destination automatically.

For detailed information on code delivery, please refer to Automation in the developer documentation.

Create a pipeline

  1. Navigate to Code automation -> Pipelines.
  2. Click the New pipeline button.
  3. Follow the steps below to create your pipeline.

1. Select an exporter

null

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.

Select an exporter from our exporter list to use in your pipeline. You can also build your own exporter — learn more in our developer documentation.

  1. Enter a name for your pipeline in the Name field.
  2. Select an exporter from the Exporter dropdown.
  3. Choose which brand and theme you want to use the pipeline for in their respective dropdowns.
  4. Click Next -> to move to the Event screen.

2. Select an event

null

Choose the event that will trigger your pipeline to run. You can learn more about each event in Event types.

3. Delivery

null

You'll finally need to select the delivery destination for the generated code. You can choose to open a pull request in whatever platform you prefer, or choose to only build the code without delivering it to any repository.

You can learn more about pull requests here.

If you select Build only, your resulting code will be available for download from the Pipelines table.