Your design system lives in your own sources, like your design documentation, component library, Storybook, and other files. When those sources change, you can sync your design system in Bolt to pull in the latest version.
How syncing works
When you sync your design system, Bolt does the following:
- Pulls the latest content from your live sources, like your design system website, component libraries, and NPM packages.
- Incorporates any new sources you add or new versions of static files you upload.
Bolt identifies only what’s changed rather than regenerating everything from scratch, so syncing is generally faster than the initial generation.
After a sync:
- New projects use the latest version of your design system automatically.
- Existing projects have the updated components available, but Bolt doesn’t change any code in your existing projects unless you prompt it to. This gives you control over what gets updated and when.
Sync your design system
- Make sure you’re logged in to your Team account.
- From the Bolt homepage, hover over the left side of the screen, then click Settings.
- Under your team settings, click Design systems.
- Select the design system you want to sync.
- In the top-right corner, click Sync.
- In the Sources pane, review your existing sources, add any new sources, or upload new file versions.
- (Recommended) Update your Agent Instructions.
- Click Sync design system.
You’ll receive an email when the sync is complete.
Switch to a previous revision of your design system
Bolt keeps a version history of your design system each time you sync. If you want to align a project with an earlier state of your design system, you can switch to a previous revision.
Switching to a previous revision affects all projects that use this design system. You can’t switch revisions for individual projects.
- Make sure you’re logged in to your Team account.
- From the Bolt homepage, hover over the left side of the screen, then click Settings.
- Under your team settings, click Design systems.
- Select a design system.
- In the top-right corner, click the revision dropdown, then select the revision you want to switch to.
Update components in an existing project
After syncing your design system or switching to a previous version, your existing projects don’t change automatically. To apply updates to a project, open it and prompt Bolt to update the specific components you want to change.
After updating your existing components, any further work in the project uses the new version automatically.
Update specific components
To optimize token usage, be as specific as possible when prompting Bolt to update components after syncing or switching versions. When you precisely describe what to change, Bolt needs to read through less of your project code, which keeps token usage lower.
For example, instead of “Update my project to the latest design system,” try “Update all uses of the PrimaryButton to the new style, but leave the layout the same.”
Update your entire project
To update your entire project to use a new version of your design system, use a detailed prompt that helps Bolt understand the scope of the updates you want.
You can use this prompt as an example to help you get started:
Audit the entire project against the active design system. The design system was recently updated with a new revision. Review all components, pages, and layouts in the project and:
1. Read the design system to get the latest tokens, components, and guidelines
2. Scan every component and page file for:
- Hardcoded colors, spacing, font sizes, or other raw values that should use design system tokens
- Standard HTML elements (for example, <img> or <button>) that should use design system components instead
- Deprecated component APIs or renamed props from the previous revision
- Missing or incorrect utility classes
3. Update all files to align with the current design system revision
Do not skip any files. Be thorough.
