Projects can be imported to reuse their components, styles, and other assets in other projects. This is useful for maintaining consistent designs and patterns across multiple projects (i.e. design system).
The following types of assets can be imported:
- Code components
- Style tokens
- Icons and images
- Default styles¹
- Responsive breakpoints¹
¹ A project may select default styles and responsive breakpoints from only one project (including itself). They cannot be merged, unlike other asset types. For example, suppose your project has responsive breakpoints for Mobile and Desktop. Then you import a project that has responsive breakpoints for Mobile, Tablet, and Desktop. You will be prompted to either keep your current project’s breakpoints or switch to the imported project’s breakpoints.
- Edit the components, styles, and other assets in your project.
- When you’re ready to share your work, publish the project. Only published versions of a project can be imported.
- Collaborators that have view access to your project can now import the assets and use them in other projects. Imported assets are read-only snapshots and listed in the corresponding left panels, such as the Components and Style Tokens panels.
- You can continue to edit and publish your project without affecting importing projects. Published versions will only take effect when a collaborator updates the imported project version.
Now that you’ve published a version, let’s navigate to another project that might want to use the published assets.
- Navigate to the “Imported projects” pane on the left side in the target project
- Import the project by entering its project ID to the dialog.
- The project ID can be found in the project’s URL e.g. 9pr9hBu15oVRTwBRL9Gnwi from https://studio.plasmic.app/projects/9pr9hBu15oVRTwBRL9Gnwi
Imported assets will now show up along side your local assets, which can be used in your designs.
Project assets that you import will not change unless you explicitly update them. You can check for updates in the “Imported projects” left tab. When the project has a newer version available, you should see an alert icon next to the dependency.
Click on the alert icon to update to the newest version.
- Published versions share the same permissions as projects: Anyone with view-access to your project can import published versions.
- Consistent versions for imported projects: If a project appears in multiple places in a dependency tree, then they must be at the same exact version number. This ensures that we have consistent designs across the project (e.g. all buttons in a page look the same).
- No circular dependencies: If Project A depends on Project B, Project B cannot depend on Project A anywhere in its dependency tree.