Spectrum is now read-only. Learn more about the decision in our official announcement.


A network of designers and developers making the best podcasts, blogs, and resources for designers and developers.


Tips on gracefully migrating current code with new design system?

September 5, 2017 at 2:26pm

Tips on gracefully migrating current code with new design system?

September 5, 2017 at 2:26pm (Edited 5 years ago)
So at work we're getting ready to start using the new design system I've created. The components are created via Angular with HTML/CSS. We of course have an older system in place, but don't have the time to just update our entire app (it's an enterprise sized web & mobile app). We're trying to think of a way to gracefully do this. And I mean, this is EVERYTHING is practically refreshed. Even a new grid system.
We were thinking only new modules use the new system until we can go back and continue replacing the existing ones? Or do it by component across the entire app?
Any advice would be greatly appreciated. Our dev team is brainstorming as well, but figured I'd reach out for any tips too. Thanks!
(Hopefully this thread can be helpful to others who may go through the same thing too).

September 5, 2017 at 3:13pm
Component by component here.
We are starting to work in Styled-components, and then each new component gets the updated styles. And as needed adjacent components get updated.
It's a difficult transition for sure.

September 6, 2017 at 6:31pm
Yeah, that's what I'm thinking we should do as well. Component by component

September 7, 2017 at 10:47am
Same, component by component while trying to reduce the effects of globally-scoped CSS until it's brought to the absolute possible minimum, preferably gone entirely. 🙃

September 7, 2017 at 7:16pm
I'm doing this soon. My client's got four years worth of product built on Bootstrap and a big-ass CSS file of overrides and custom stuff. I've already got it to the point that as much legacy code as possible has been removed but at this point there's not much choice except go to all hands on deck for a sprint and completely rewrite everything. It's not glorious work, but it'll be worth it when we're left with a squeaky clean codebase.
I feel like there's going to be a flood of people going through this process since design systems seem like they're becoming more "main stream" now. Just a guess ¯\_(ツ)_/¯
I spoke with my developers and they wanna do it page by page, not by component. I guess with an enterprise size application, it's a lot more work and slower to go component by component across so many different areas of an app.
I thought component by component would work too but turns out to make that happen each page has to be rewritten to even accept the new components. So we opted for page by page. If possible, first rewrite the structure of the code but keep the same visuals and then change the front end to the new style.
Yeah looks like we're going to be taking that route Kev