27

Design System structure

over 6 years ago from , Design System Lead at Kiwi.com

Hi, folks, I would like to learn a little about how do you structure components in your designs systems/pattern libraries?

We tried a few ways but we don't have an ideal solution yet. It's not such problem to create design system. The main challenge is to maintain it effectively in future.

1st iteration - Atomic Design methodology

We liked a clear structure for components. Atoms are the smallest and simplest, molecule contains atoms, organism contains molecules, etc.

However, challenges - first of all with the naming. - one component was defined as molecule because it was very simple at first. But in time, we needed to add another molecule into that original molecule => so logically, it was transformed into an organism. The problem with changing types is that many team members are still looking to the molecules section, not to new one. Not to mention a problem with the naming conventions.

2nd iteration - Just components

We tried to flatten it a little. We removed previous structure (atoms, molecules, and organisms) and just named all of that as "components". It worked. Problems with changing types were gone, same with communication which type is what. Developers was very familiar with a word "component", designers too. Communication was good.

But after a while, we had almost one hundred components and orientation in that quantity was just bad.

Next iteration - Components with some logical structure

We need to create some logical structure which helps us with orientation in a whole design system.

Do you have some advice for that? Which challenges did you run with maintaining a design system? What tools do you use and how exactly? How do you version your design system?

Thanks for some insights!

18 comments

  • Jon MooreJon Moore, over 6 years ago

    I use UX Power Tools (https://www.uxpower.tools/) as the base for my design system(s), then customize it and build on top of it for each of my clients.

    I've been trying out brand.ai (https://brand.ai/) for maintaining my design system, and so far it's been much better than Craft Library.

    6 points
    • Duke CavinskiDuke Cavinski, over 6 years ago

      brand looks cool, but do I have to use their cloud to sync?

      1 point
      • Jon MooreJon Moore, over 6 years ago

        That's my understanding. What's cool is they have an API for developers to reference things like colors and font styles.

        2 points
    • Matthew BlodeMatthew Blode, over 6 years ago

      Is UX Power Tools worth it? It looks super nice and would save lots of time but are there any nitpicks or ways it gets in the way of the design? Do you use it for web or for mobile UI design?

      1 point
      • Jon MooreJon Moore, over 6 years ago

        I personally use it for both web and mobile. Because the kit is just the individual pieces (instead of components like cards or login screens etc), you can really use it on any project.

        Customizing it can take about 30 minutes to get colors and fonts all set up (when you change the font you'll have to update some of the base symbols), but in the long run, the kit will save you days and days of work.

        2 points
  • Lionel T, over 6 years ago

    Could be useful to exchange thoughts with people here — Slack channel created by Jina

    4 points
  • Art VandelayArt Vandelay, over 6 years ago

    At work we have the following:

    • Base (things that won't be used in isolation: font styles, link styles, visualizing grid structure, etc)
    • Components (single entities: social icon, button, etc)
    • Modules (made up of components: social link set, button group, media object)
    • Templates
    • Pages (sometimes templates and pages may be used in lieu of the other)

    Our biggest discussion point right now is determining when something goes from being a "component" to a "module". You could create a "card" that has an image, title, tags, body copy and a link. So we haven't yet decided if that is technically a "module" or if they whole entity of the card itself is one component as its a unique gathering of smaller components. It also has to deal with the relationship of the components together.

    We also treat layout 100% separately. So if we have a 3 column layout, that is markup around the actual component, it's never directly referenced in the component class name at all.

    We found Atomic design to be great in theory but its implementation became difficult as clients could never remember if they were talking about an Atom, Molecule, Organism, etc.

    3 points
    • Mike Wilson, over 6 years ago

      100% agree with your findings on Atomic design. I've encountered exactly the same problems.

      In theory, Atomic design sounds really good, I mean who doesn't like to posture as if their design system is something scientific...using words like molecules, and atoms, etc.

      But adding another layer of abstraction on top of your design system in the form of counterintuitive jargon is completely backwards. Design is supposed to clarify and simplify complex things, not make them even harder to understand.

      1 point
      • Mike Sarcone-Roach, over 6 years ago

        Design is supposed to articulate complex things in a useful and understandable format. To do so often requires design tools which meet the complexity of the system they seek to translate.

        I agree that the layer of abstraction has many negative side effects, but there are many instances where this depth and detachment are useful.

        0 points
  • Jonathan SimcoeJonathan Simcoe, over 6 years ago

    Figma is the only tool I know that has built an app that can natively build design systems with Atomic Design. It is incredible:

    https://medium.com/figma-design/team-libraries-in-figma-409fa5e20f7#.72hiuiexe

    3 points
  • Colm TuiteColm Tuite, over 6 years ago

    I'm in the middle of writing a whopper post on how to effectively design, build and maintain a design system. So stay tuned, hopefully I can help someone a little!

    2 points
  • Adam Hopwood, over 6 years ago

    I've struggled with following Atomic structure too. Similar to you there was too much granularity and we ended up with a lot of cross over between Molecules and Organisms.

    I've just started using:

    • Principles • Basics • Components • Patterns

    We have begun to categorise components which helps. This has been working so far though we're working with a relatively small team/system.

    We're using the usual Sketch / Craft Library set up with a submission of new components to be reviewed and included.

    Pretty standard I think, but really interested to hear how other people are managing - particularly in more Lean Agile environments. Changes being made to a component in dev without a design asset for example...

    2 points
  • Christopher Mansfield, over 6 years ago

    What I have worked with in the past is based on the logic behind Atomic Design but slightly simplified, the actual DLS system is split into the following categories to manage the UI:

    Components: e.g. buttons, input fields, labels, selectors and so on..

    Design Patterns: the combination of components e.g. the combination of input fields, selectors and buttons to create a form.

    Templates: the combination of design patterns to create a page with dummy content.

    1 point
  • Marcel van Werkhoven, over 6 years ago

    Yeah this is quite a challenge. At some point our team went with 'Objects' and 'Components'.

    • A component is just a piece of the puzzle, an object is combined pieces.

    The only drawback is that sometimes you get new objects that are just a variation of another object or someone basically makes the same object because he doesn't know there's already an object quite like it.

    I have someone on the team who's very good at maintaining this sort of thing. Always looks in the library to see if what he wants to build is already made. And then you have people like me who prefer rapid prototyping and build stuff first to see if it works and fits as expected and then afterwards adds it to the 'system'.

    0 points