Using Pipelines for Multi-Brand Code Exports
When managing a multi-brand or multi-product design system, it's crucial that your design tokens and assets reach the right codebases, in the right format, at the right time. Supernova's export pipelines allow you to automate this process by configuring dedicated export logic per brand, platform, or team.
- If you're using Setup 1 (single design system with brand layers), pipelines can be scoped to specific brands. This allows you to maintain a shared foundation while still delivering brand-specific token values and assets—ensuring precision without duplication.
- If you're using Setup 2 (multiple design systems), each system can have its own independent pipelines tailored to that brand or product's needs.
How Export Pipelines Work
Pipelines define how your design data (tokens, assets) should be exported to code. Once set up, Supernova will take care of syncing your data from Figma and transforming it into the correct format for your platform—automatically.
Each pipeline can include:
- Exporters: Pre-made or custom logic to transform your design data into code.
- Triggers: Define when the export happens (manually, on change, scheduled, etc.).
- Repositories: GitHub, GitLab, Azure DevOps, Bitbucket.
- Target Paths: Where in the repo the exported code should land.
- Token Formatting Rules: Naming conventions (camelCase, kebab-case), color formats (HEX, RGBA), etc.
This setup is especially powerful when you need to:
- Deliver platform-specific tokens (e.g. iOS, Android, Web).
- Maintain separate pipelines for different product teams.
- Sync multiple brands to different codebases.
Best Practices for Multi-Brand Pipelines
- Align Pipelines to Brands: Create a pipeline per brand, and connect each to the relevant Git repo and folder.
- Use Exporter Configurations: Customize token names, output formats, and file structures to match dev needs.
- Tag Pipelines Clearly: Make it easy for teams to identify which pipeline belongs to which brand or product.
- Integrate with CI/CD: Hook Supernova into your automation environment so tokens are always up to date.
Example Scenarios
- A retail company with three brands uses the Brand feature (Setup 1) in Supernova and creates a dedicated pipeline for each brand, exporting tokens in SCSS for Web, XML for Android, and Swift for iOS.
- A fintech team uses Setup 2 and maintains two separate design systems for internal and public-facing apps. Each has its own documentation site and its own pipelines to different GitHub repos.
- A healthcare company has a shared core design system and several brand-specific ones. Each brand has its own pipeline but shares the same base exporter logic.
Want to Go Deeper?
For a more comprehensive overview of how to configure pipelines, set up your developer environment, and build custom exporters, check out our Supernova Developer's Playbook. It's your go-to resource for everything from advanced automation to local development with our CLI and SDK.
Supernova pipelines ensure your tokens and assets always reach the right hands—automated, accurate, and ready for production. Say goodbye to manual copy-paste and let your design data flow effortlessly into code!
