1

A couple weeks to rework a design system. Where to start?

4 years ago from , UX Designer @ Bluebeam, Inc.

Background: We've had a design system for our marketing site that has worked decently well for a couple years. Adapting it to end user application has been challenging though because it's missing a lot of components that are helpful in creating interfaces, some issues with typographic flexibility and accessibility in some cases.

Our CD has told our small team (about 3 of us) and our PM's that they want us to spend about two weeks retrofitting the current design system so that we feel like we have the tools to create interfaces we are happy with.

Problem: I'm glad we have some time to do this but I'm also a little nervous about making sure we come out of the time with a solid enough foundation to continue to build in the future.

I'm curious to hear how people here would approach this challenge.

5 comments

  • Elwin Ha, 4 years ago

    As Nelson has said, it really depends on what you're currently using.

    For my team, we were using Sketch and Marvel to handle our design system and developer-handoff. One of the issues we faced was as we were expanding our typography system to other languages, our Sketch library was getting massive because of the way it handles font and colour (Sketch's style system for fonts is very rigid and 1 style = 1 font + colour + alignment, so adding a colour, or horizontal/vertical alignment to our headers makes our styles exponentially larger).

    Figma has a more robust system where font styles only retain the point-size, tracking, and leading. Alignment and colour can be manually overridden, and the lack of 3rd party plugins makes it more accessible to our marketing, development, and C-team to export assets, as they do not require the app and can access the system via their web browser. However, Figma does not have Anima, so I'm limited to what I can do with respect to truly responsive components.

    With Sketch I had 162 font styles for 1 language (9 colours * 6 text sizes * 3 alignments = 162); with Figma I have 7.

    In the future, I would like to adapt my company's design system to a code library with better documentation... but my time is limited right now unfortunately.

    tldr my design system in Sketch has 162 font styles, Figma has 7, but Sketch has better plugins to deal with responsive components.

    1 point
    • Andrew Richardson, 4 years ago

      Figma is our current tool of choice, I built a wireframe library a long time ago that replicates the css library as much as possible

      0 points
  • Nelson TarucNelson Taruc, 4 years ago

    I have some ideas but depends on the answer to this question: Is your DLS backed by a code library or would everything new in your DLS get coded from scratch no matter what?

    0 points
    • Andrew Richardson, 4 years ago

      Currently it's only a code library and a wireframe library in Figma that tries to replicate the code library. Our lead dev's plan right now is to split our library into packages (One for the marketing site and one for the end user applications).

      0 points
      • Nelson TarucNelson Taruc, 4 years ago

        OK, here's how I've done it.

        1. Take inventory of all existing components, rate on scale of 1 to 5 (e.g. 1 is terribly broken to 5 perfect, no changes).
        2. Do a gap analysis of missing components, rate on same scale (e.g. 1 is urgent add to 5 not really needed)
        3. With these two lists, draw a bright line to define the absolute minimum list of components you need to launch the new DLS. This is your new launch roadmap.
        4. Show that list to the lead dev, product owner and/or executive sponsor, get them to agree on priority, make sure there aren't any technical challenges that might invalidate your roadmap.

        The goal is not to get everything done in two weeks, but to get everyone to agree on a component roadmap and timeline, which will likely be more than two weeks.

        FWIW we use Figma too and we build components way ahead of the developer roadmap, to explore, refine and get early feedback. Good luck!

        1 point