51

Examples of Design System Sketch Files?

9 months ago from , UX Designer @ Lucid Software

Hi all,

I'm in the middle of reorganizing our component library for my team at Lucid (makers of Lucidchart). Our design system started out nice and clean about a year ago and has grown unruly, so I'm recategorizing and starting over fresh.

Can you point me towards any Sketch files of a neatly organized design system?

Thanks!

If you're wondering, here's what it looks like right now: Lucid design system

25 comments

  • Ashraf AliAshraf Ali, 8 months 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 Palmer, 8 months 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, 8 months 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.

      9 points
    • Thai HoangThai Hoang, 8 months ago

      Great! Thanks for sharing this Ashraf

      1 point
    • roberto pacheco, 8 months ago

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

      0 points
  • Ryan CarterRyan Carter, 8 months ago

    You can download Shopify's Polaris Design System here: https://polaris.shopify.com/resources/resources

    3 points
  • Jon MooreJon Moore, 8 months ago

    UX Power Tools is pretty well organized

    https://www.uxpower.tools/web

    2 points
  • Sean LesterSean Lester, 8 months ago

    I've noticed that none of these publicly available component library / design system files actually utilize Sketch symbols to set up for global changes or instant responsiveness or anything like that. Am I putting my time in the wrong place by investing too heavily in making a library of symbols where all colors and styles are linked and constraints are fully utilized?

    2 points
    • Jon MooreJon Moore, 8 months ago

      Hey Sean! If I can toot my own horn a little bit, UX Power Tools is built in a sustainable fashion using all of the techniques you highlighted: text styles, layer styles, and symbols (many of which are nested).

      You are NOT wasting time by prioritizing interlinking, style usage, and symbols. It will save you incalculable amounts of time in the future. So keep doing what you're doing.

      If you're interested, here's a link for the system we've built:

      https://www.uxpower.tools/

      4 points
      • Sean LesterSean Lester, 8 months ago

        You can — and UX Powertools was my starting place. I purchased it, but ultimately decided that for my needs it was maybe TOO flexible and, honestly, that I really needed to build it myself from the ground up to cross the knowledge/skills gap. I wanted to really understand why everything was the way it was and how to build things myself in the future... and reverse engineering files like yours and Jan Losert's helped me do that. So thanks :)

        2 points
        • Michael G., 8 months ago

          Same here. I started exploring UX Powertools, loved it, but found it a bit complex, especially to roll out to a team of people with mixed experience in Sketch.

          In the end, I've built a library from scratch, containing the most common components we use, along with basic wireframe elements (boxes, shapes, placeholder, etc.). I spent significant time testing each thing I created, making sure things resized appropriately. In creating it, I've organized around atomic design principles, but for my team, I've changed the naming convention to keep things simplified. Everything we use regular is in a folder called "Components," and the next step up from there is Patterns, consisting of groups of components. From there, we will collaborate on building out reusable templates that suit best practices and our POV on things.

          I'm definitely glad I took the time to build from scratch. I know it inside and out, which will help team members troubleshoot anything they have problems with.

          1 point
          • Sean LesterSean Lester, 8 months ago

            I was planning to do the same with naming, but ended up adopting atomic (even though I hate the metaphor [for no good reason]) because the developers were already using atomic — so it seemed that it would be wise to all use a common language.

            2 points
    • Adam Nelson, 8 months ago

      I can tell you from my own experience that the setup process is long and very very detail oriented, but worth it once you can build out a whole series of separate uis that all connect back to a single source of truth. So when that one icon needs to be updated, you tweak it once.

      I've settled on a model of two overlapping systems personally. Our UIs are based on Material Design, so I build out the Material standards first. Then, to keep that pure, I set up a second library that provides any custom elements we create. Finally, any actual UIs we create include both libraries, only deviating from the Material spec where necessary. This allows us to incorporate any changes from Google safely and cascade them down through the whole tree.

      Check out https://github.com/adamnel/sketch-material to try it out. It works for me as a single contributor but I'd love feedback and to extend the Material library for broader use.

      1 point
      • Sean LesterSean Lester, 8 months ago

        Wow, thank you — I actually need to make material variants of many of our components so as not to ruin the lives of our Android devs... so this is going to be incredibly helpful as a reference.

        1 point
  • Matt WalkerMatt Walker, 8 months ago

    Curious if anyone uses Sketch Libraries in addition or instead of a sketch file.

    2 points
    • Sean Smyth, 8 months ago

      A Sketch Library is just a sketch file though?

      1 point
    • Taylor Palmer, 8 months ago

      What Sean said. I need to organize a Sketch file so that I can use Sketch Libraries (and organize symbols into sensible hierarchies)

      0 points
  • Alex PateAlex Pate, 8 months ago

    There are a fair few links to design systems here. About half have 'designers kits' included. Not exclusively Sketch (some PhotoShop and Figma ones as well), but should point you in the right direction.

    https://github.com/alexpate/awesome-design-systems

    2 points
  • Gavin AnthonyGavin Anthony, 8 months ago

    I enjoyed this one by sketch https://www.sketchapp.com/elements

    2 points
    • Taylor Palmer, 8 months ago

      Thanks, Gavin. This looks like it might be more of a UI kit? I'll take a look.

      0 points
      • Gavin AnthonyGavin Anthony, 8 months ago

        I suppose. I thought you meant more on the technical side of how a design system can be built through Sketch. Lot of great techniques used in Elements.

        0 points
  • Chong GuoChong Guo, 8 months ago

    https://atlassian.design/guidelines/product/resources/web-product-gui-pack Atlassian one is great, all nested nicely in the symbols

    1 point
  • ahder junior, 8 months ago

    you can search sketch resources here : https://www.sketchappsources.com/

    and here https://adele.uxpin.com/

    0 points
  • Robin GoyalRobin Goyal, 8 months ago

    Thank you, guys. This is amazing. I will also make design system for my company's app :P

    0 points
  • Zoltan Totik, 6 months ago

    There's a plugin for that!

    https://github.com/Ashung/design-systems

    0 points