How to plan an enterprise design-system migration
Published
An enterprise design-system migration needs an inventory, a pilot workflow, and named owners for design and engineering releases. The plan should say which existing components will stay, which will change, and how teams will move without breaking current tasks. Publishing a replacement Figma library does not complete that migration.
This suggested plan is for organizations with products already in use. It assumes product delivery continues while the system changes, so every migration step needs a bounded release and a way to handle exceptions.
What should the inventory include?
Start with the interfaces people use and the code that renders them. Record the product, framework, component name, design-library reference, code package, owner, and known variants. Include local copies and custom implementations even when they resemble a shared component.
For each entry, choose a proposed disposition: keep, adapt, replace, or retire. Explain the reason with evidence such as an unsupported state, a repeated implementation problem, or a documented user need. Similar appearance alone is not enough to combine components with different behavior.
- List tokens and their purpose, including product or brand overrides.
- Record interaction states that exist in code but are missing from Figma.
- Identify accessibility issues and product-specific constraints requiring review.
- Mark unknown usage explicitly so a search gap does not become an accidental deletion.
Nielsen Norman Group’s design-system overview describes the ongoing effort involved in maintenance and adoption. Reserve time for that work before promising a library rollout across every product.
Which workflow should migrate first?
Choose a pilot that exercises useful shared patterns and has an available product owner. Avoid both an isolated showcase screen and a workflow whose failure the organization cannot safely tolerate. The pilot should expose enough complexity to test the migration method.
A hypothetical account-settings flow could include navigation, form fields, validation, a confirmation dialog, and a permission-dependent action. It would let the team check several component relationships in context. This is an example for planning, not evidence of a completed client migration.
Write the pilot boundary down: included routes, supported roles, supported devices, excluded integrations, and the acceptance owner. Keep unrelated redesign requests outside that release. Record them in a separate backlog so the system migration has an achievable endpoint.
How should Figma and code stay consistent?
Create a component mapping that connects each design component to its coded equivalent and documentation. Match names where practical, but verify behavior rather than assuming matching labels prove parity.
For every pilot component, compare default, focus, disabled, loading, error, and other relevant states. Review content limits, responsive behavior, and keyboard interaction. A design file cannot demonstrate all runtime behavior; the coded example needs its own checks.
Set a release rule: a changed component ships with its design update, implementation, usage guidance, and a record of breaking changes. If one part is intentionally delayed, mark the mismatch and its owner. Do not let teams mistake an unfinished variant for a supported option.
What does a component migration record look like?
Illustrative record, not a client migration: an account-settings page uses a local text field with an error label that differs from the shared form pattern. The team proposes replacing it with the shared component while preserving its validation behavior.
- Consumer: account settings. Record its route, code reference, design reference, and product owner.
- Reason: the local version lacks the shared error-description behavior. Confirm the discrepancy in the running interface.
- Replacement: identify the shared component and supported states, including long labels and server errors.
- Acceptance: complete the form with keyboard input, trigger an error, and verify that the label and message remain associated.
- Release: record the version, approval owner, rollback route, and remaining consumers. Keep the old component until its supported consumers have migrated or have documented exceptions.
Who approves new components and exceptions?
Name the design owner, engineering owner, and product representative who can accept a migration. Specify where proposals go, who resolves disagreements, and how teams request support. An agency can help build the system, but the organization still needs decision owners after the engagement ends.
The GOV.UK Design System contribution criteria ask for evidence that proposals address a shared need without duplicating existing patterns, followed by checks on usability and implementation. Its community-resource rules also identify ownership and support expectations. These are useful reference points, not mandatory enterprise policy.
A local exception should identify the unmet need, affected product, responsible owner, and review date. Review it when the shared system can support that need. Otherwise, temporary forks can quietly become permanent dependencies.
When can an old component be retired?
Mark a component as deprecated before removing it. Publish the replacement, migration instructions, known differences, and the planned support boundary. Product owners should know what must change and where to report a blocker.
Check actual consumers in production code and active design files. A completed Figma migration says little about deployed adoption. Track both, alongside unresolved exceptions and defects found during the pilot.
Before removal, confirm that supported products have migrated or have a documented exception. Test the release and its recovery procedure. If usage cannot be established, resolve that uncertainty rather than declaring the component unused.
What should an agency hand over?
Request the inventory, component mapping, pilot acceptance record, release notes, migration backlog, contribution process, and owner list. An internal team should be able to take an ordinary change through the documented process without the agency explaining missing steps.
Use those deliverables to scope an enterprise design-system engagement. The comparison of enterprise design-system agencies can help shortlist partners; the migration plan defines what the selected partner must deliver.