Build and reuse a local Design System

A Design System project is the source for shared variables, components and assets. A linked project keeps a complete local snapshot. It can reopen and export without the source folder, an account connection or an internet connection.

Create the source project

1. From Welcome, choose New project, then Design System.
2. Name the project and choose a local folder. MODO creates a free Playground for documentation and examples, with no publishing target.
3. Create components using the Components panel. Their variants, nested instances and variable bindings travel with the library.
4. Open View → Manage Design System…, or Tokens → Open Design System manager.
5. In Variables & styles, add variables and organize them with the Collection field. Select a variable to edit its name, collection and description. Renaming a variable updates its references.
6. Edit values in the mode columns. Alias references use {color.brand.primary}. String and boolean variables retain their types, including an empty string and false.

Collections organize variables; modes such as light and dark are currently shared across the project. Independent collection modes and collection-specific defaults are not available in this version.

Save a reusable library version

Open Libraries, enter a version such as 1.0.0, then choose Save & export version. MODO saves an immutable copy to the local library catalog and exports a portable .modo-library file. Choose a new version number after changing the source.

The package includes variables, component definitions, registered local assets and font files. System fonts still need to be installed on the receiving computer. Playground documentation stays in the source project. A library cannot depend on another library yet. Components that depend on pages or CMS content outside the package must be adapted before reuse.

Use it in another project

For a new project, enable Choose a Design System library after creating this project. For an existing project, choose View → Link a Design System library….

Select a saved local version with Review library, or import a .modo-library file. Review the version, resource counts and affected instances, then choose Apply library. Cancel leaves the project unchanged.

Linked variables and component masters belong to the source library and are read-only in the receiving project. You can insert components and edit supported instance properties and overrides. To work independently, choose Make an independent, editable copy instead during import, or Detach local copy later. Detaching keeps the resources and instances in the project and stops their library link.

Update deliberately

Save a new version in the source project. In the receiving project, review that version in Libraries and apply it. Stable component identities keep existing instances connected; local instance overrides are preserved. The update is one Undo step.

This first version blocks updates that remove owned resources, remove component layers/properties or change a variable type. It does not silently remove those resources or automatically migrate overrides. Keep the older version, adapt the source, or detach the receiving copy before making a breaking change. Importing a detached library again can conflict with the resources already present; detaching is not a reset.

Local ownership and limits

The project contains its linked snapshot, so moving or deleting the source Design System does not break the project. Keep backups of both the source and consumer projects. A .modo-library package is limited to 64 MB and an install transaction to 5,000 new nodes. Published versions are local; sharing the package is your choice. No online catalog, automatic background update or cloud dependency is introduced.

See also Create and reuse a component, Use color tokens, and Save, reopen and recover.