Examples of Design System Sketch Files?

over 2 years ago from Taylor Palmer, UX @ Lucid + uxtools.co guy

  • Ashraf AliAshraf Ali, over 2 years ago

    Hey! I've been doing extensive research on this to build our own Design System for a client of ours.

    Here are a couple of systems I can recommend you take a look at:

    • Start with Design + Code's iOS 11 UI Kit and Android's Material Design. Those baseline libraries are a boon to how you can set up your own file (I definitely recommend creating a library icon for import)
    • Then, check out IBM's Carbon Design Kit (sketch file). It is incredibly detailed and filled with various views and components. You can pick up a lot of ideas from it.

    Finally, dig into these other systems including:

    Check out other Design Systems collected by UXPin here.

    I'm prototyping the design for our client's library by modeling it after Atomic Design by Brad Frost. I've tweaked the language (so instead of Atom, Molecules, Organisms...I opted for Basics, Elements, Templates, and Specs to make it user-friendly).

    Here is the Table of Contents: https://ibb.co/fN5kB6

    I'm also using a baseline of 8.5" x 11" to make it easier to export to PDF (though eventually, a website is the best form of management and distribution). Here is a preview of that work: https://ibb.co/mxOGJm

    And a close up of one view: https://ibb.co/gCSyW6

    Eventually, this will all be organized into beautiful, categorized Symbols that can be imported into Sketch as a Library for use from anywhere.

    Feel free to send any other questions you might have and also share your strategies in building your Design Library.

    29 points
    • Taylor PalmerTaylor Palmer, over 2 years ago

      Thanks, Ashraf! Some really great ideas here. I knew about many of these resources but hadn't found their Sketch counterparts. Will dive into this!

      1 point
    • Ryan Hicks, over 2 years ago

      Eventually, this will all be organized into beautiful, categorized Symbols that can be imported into Sketch as a Library for use from anywhere.

      Start now. Once you get down the rabbit hole it's difficult to go back and set them up. Time-consuming to say the least.

      10 points
    • Thai HoangThai Hoang, over 2 years ago

      Great! Thanks for sharing this Ashraf

      1 point
    • roberto pacheco, over 2 years ago

      great examples!. Do you know what "service" they are using for the online guides?

      0 points