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

over 2 years ago from Andrew Richardson, UX Designer @ Bluebeam, Inc.

  • Elwin Ha, over 2 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, over 2 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