Comprehensive Review of Top Design System Management Tools for UX Designers and Developers

What's up everyone. My name is Ritzy Williams and I wanna talk a little bit about design systems and some tools that I have found and tried out that I wanna share with you guys. Um, maybe this will spark some conversation and introduce some new tools, uh, or also maybe, uh, some new tools that you guys have explored that I haven't, or maybe, uh, it'll introduce you guys to some new age things that might be pretty sick too. Um, let's, let's dive into it. But first thing I wanna talk about specifically is really the, the beginning here, the old Bootstrap. Back when I first started doing design, responsive was booming. People are using Bootstrap to streamline the process of creating websites, responsive websites, and theme them to match, you know, their branding and things like that. So basically, you would slap a CSS library into your file that had some predefined components or some styles to components. That allowed you to, you basically override it and have something that matched and you'd keep some consistency with your entire website. Um, or you use their theming or, you know, something like that. But I just wanted to take a look at this because I feel, I feel like it would do it injustice to not know the need for a design system and, you know, kind of talk about how you keep that component lifecycle or you keep the, the components standardized. But I always thought Bootstrap was, kind of an early pioneer for this, utilizing these, um, frameworks that had it broken down into different type of components. Like you can see, uh, buttons. Everyone likes to look at buttons, but they had these button types, you know, primary, secondary, success, danger, warning, info, light, dark, link. These button types. Now the problem is some of these, like there's so many, right? Some of these are successful, like you need some of them, you don't. There's no real documentation on usage, but Nonetheless, it had these different styles and all this documentation around buttons. It just kind of gave too much flexibility. People were overriding things with classes and, and things like that, but it, it still kind of gave the original documentation on design systems and people would take Bootstrap, they would theme it. Here's an example, uh, to make their responsive websites. Right? So here's an example of a Bootstrap website, completely themed, visually aesthetic, completely responsive. And, you know, just wanted to show that, that example of Bootstrap. Now later on, let's get into design systems, right? Design systems are a lot more complex. They're componentized. They include not just utilization documentation— documentation. I mean, utilization, I mean, on the code end, it also includes design documentation on how you should be using these components. Now I've got a couple, you know, examples here that, that are super popular. Let's start off with the first one. Material. Material is basically Google's, Google's design system, if you will. But it, it also kind of connects with how Android apps are built. And like this framework. So it's, it's themeable. There's a lot more, almost like Bootstrap, how you are creating a website and then able to theme it differently. Material's very similar. So I, I think some of the goal here was flexibility. And with that, it's, um, it's, it's a little vague. So some of the components, let's look at button again. You know, they've got common button, uh, common buttons, floating action button, They've got so many things, elevated, filled, tonal, outline. They have documentation on choosing buttons, um, hierarchy, placement. Uh, let's look at some of the other ones. You see, they have, they have quite a few components here, but one I was looking at recently was chips, which has an overview. It's got specs, it's got guidelines and accessibility, navigation rail. I, I had to use this recently at a company I worked for. And I, um, I thought this was pretty good, but basically it's got some resources around it. You can get the, the design kit and Figma, some implementation packs, how it's in Flutter from web. Um, the differences from the last version, you can get to see the specs on how to use it. You see what's themeable, the color states, uh, very good documentation. Now I do just want to like, let's, kind of breeze through some of these and just look at like how other companies are documenting their design system. You notice there's a bunch of websites right here. Um, that's super useful. So looking at Lightning, this is Salesforce. Uh, also similar stuff. They've got component blueprints. Um, they have how to use them, things like that. All right. You see similar documentation, some sections, and notice the layout overall of the, of the design system and what you're able to see. Usually starting some overview, um, a way to see your components, a way to see the type of components, potential code, uh, implementation for developers and things like that. Looking at Atlassian, you can see their navigation's more up top. You can look and see their components up here. Let's look at the old button. Whenever you talk about design system, everyone has to talk about buttons, examples, code usage. Migration Guide and changelog. Another one that's pretty— it's heavily used, especially if you're actually going to develop an app, is the, uh, um, is Apple's Human Interface Guidelines. I usually go to Design, you see the Human Interface Guidelines. Let's read the Human Interface Guidelines. So Platforms, Patterns, uh, theirs is Components. Let's look at Content layout, menus, menus and actions. Kind of hard to find. The IA could be a little better on how to navigate this, but I do think there are some benefits. I've kind of gone through this kind of thoroughly and looked at some of this and put some of these together. But some I think are a little tough, right? Like menus and actions. Hmm. You know, some, some thoughts around it. There is also another website that shows you a list of a lot of companies' websites just for your own reference. It's called Adele. It's from UXPin, but it has consolidated a lot of design systems together, um, so that you can easily find them. Okay. So that's, that's the overview of design systems overall. Now, just thinking about design systems, the problems they solve is how do I use it if I am a designer? How do I use this component if I'm a developer? And the rules and guidelines around that, uh, where to find them, what exists, stuff like that. Now, in my design experience, uh, having a componentized library streamlines your design process significantly faster so that you're not building every component from scratch every time you create a new file. So there's a lot of benefit in terms of speeding up the process overall. And, um, most of the time this lives in Figma, uh, the, the designs, design usage, right? There are plugins to help align this with Storybook that your developers use, or a code base where it pulls in coded, uh, components that align. Uh, but not, not really, not something we want to talk about. For me, I want to really review the documentation. Now I've worked at companies that try to keep their documentation on Confluence, which was okay. It's, it's kind of still did this similar, um, you know, layout, but it was, you were kind of stuck, right? Your documentation was only for only behind bars, only certain people had edit access, only people— because certain people could see it. You may potentially streamline this documentation to, um, like other companies you work with, vendors and things like that. So it may have some, some value being in a public, public or maybe a password-protected location so people can access the, the details of how to use a a design system that's associated with your brand. So where do you do this besides Confluence and, you know, some wiki site or Figma? I have found a couple platforms that their job is to try to, to do this. Let's look at them. The first one is called Fig Mayo. You can see right on the top, it says like zero height, but with zero effort. Now Figma is pretty cool because it, you know, creates this documentation. Now I've also created an example site for us to look at so that you can see it. So I have a Figma design system already put together and I have imported it. So I'm going to continue with Figma. It should automatically connect me, allow access. And I have the free trial or the free version. So I, it only allows me one, one library, but let's take a look at the library. Um, you know, from the dashboard, you can see there are some tutorials. Uh, you can add a library, you can view site. There's all the management, but realistically, just kind of giving you the heads up on setting this up. This was the easiest one, namely because I just connected, you know, basically went to add library. Connected the, the site and it created this. So all it, the documentation pretty much still lives in Figma. It just has, uh, it pulled it into a, you know, a design system. Now you can see it's all, uh, arranged the way some of my, uh, I, I don't know if this is actually how my design system is arranged. Um, how this arrangement happened. Uh, but it is arranged. So if you look at button set, I can access it in Figma. Let's see what this does. Okay. It opens on a Figma embed. It allows you to see it. Cool. See the whole page. It looks like, oh, edited it 8 days ago. Cool. Um, you can see the button itself. It opens like a playground. It shows you some Variants. Let's close this. You can see this is the button set. Let's change these. This is really cool. Let's look at the 3-button. Uh, we can change it between stacked and inline. Let's look at stacked and you can change the width to full or auto. Really cool. Oh, you can change both. So checkbox for playing around with the variants. Really nice. I like that feature. Um, you can also see the properties down here. So the count, the layout and the width. I added these notes in Figma with their text editor and their text editor actually has more rich text editing than this output because some of these were bolded and had more detail. Kind of cool to know, but I don't know. Within the same, within the same page, I also have this pieces/button component. and that's the individual button. So I actually have button and button set together, and the button is a piece of the button set component, and it has all the properties too. Trailing icon, leading icon, the label, the type, the size, the variant. Um, it's got a lot of values, the default value. Pretty good. I feel like that's, that's good for translating it into development from the, uh, the property settings. So if I was like doing this in React, this is really good. I need to, I'll, I'll know what these are, right? Uh, the props for, uh, trailingIcon true or false, leadingIcon true or false, buttonLabel. So if I was creating a componentized version of this, it gives me what I need in order to build the original component and then make it into another component, ButtonSet, that has these props. Really cool, really easy to do. Uh, it does lack the code base, right? If I wanted to see this, I'm pretty much going to have to build or use Figma to look at the specs. If I have a code, uh, like a code base associated, um, like in, you know, this is the, like, the button set component for React, but the set button in Vue are different names. Like, I'm not getting that. And it looked like On the, the website itself, it showed, it showed that it had Storybook connections. It might be something I just don't know cuz I don't have this, this coded specifically, but I, it's, it's not, I don't know, lack of customization that I've seen. It's, it's one of the dings, super easy, just not customizable as much as I'd like. So that's the first review. Second review is Supernova. Supernova is really cool cuz the, the website itself, uh, let me log in. You can just see it's, uh, the future of product development is here. Uh, access a Forge, build better products faster. Um, this to me looks exactly like one of the design systems we had looked at, uh, before. And it lives, it gives you a lot of flexibility in order to customize it like you want. So I, Let me sign in. One second. You can see the, um, this is one I created. This is some basic found, uh, just kind of preset, um, documentation that was already here. But the real, um, kind of the real details come here. So you can add the, uh, your design system in here, import it from Figma. Uh, there's a Figma variable sync, and then there's a Token Studio if you use that plugin. But I imported my design system here, and the first thing you have to do in order to like create some of the documentation stuff is select which components you actually want to import here. So if you notice, I have to go to New component. I need to create all this information. I need to select the Figma component. Let's— you can see all— some of these are on the same page and the organization is a little— okay, see, it's under branding logo. Let's go to— we already have button set. Let's go to avatar. So avatar has my base avatars, and then it's got the avatars itself. So they're not named differently. I mean, you can't even see the like slash naming on here, which makes it a little more difficult. I hope that's the right one. Uh, truthfully, I don't even know if it really matters. Move me over all day. Okay, I guess it's showing me on here which one it is. Status, that's nice. The documentation, if you say yes, you can select a page that has documentation. Blah, blah, blah. All right, let's look at Button Set. We can pull this open. I've already done this one. Here's the description. I think this— I'm not sure if this passes to Figma or not, or what happens, but here's the information. Here's the documentation that's been linked. And if you go to the documentation section, you can see the Button Set documentation here. So in the Figma layers, it's got all the, the properties. I can add more. It's very wiki-esque for adding documentation. It does give you a lot of flexibility. You can add tabs, um, a lot of flexibility. Let's actually look at what this looks like on the— what, what a normal person sees. So here's what we see. This is the private preview. And it's pretty much exactly what that looks like. Give you some other examples of the documentation you can create. This is all like wiki style. It's a lot, it's a lot of work, but it's also pretty nice visually, right? You have like a whole website here for it. Last but not least, my personal favorite has been, uh, Zeroheight. Let me start from the beginning here. Here we are. Zeroheight, helping build design systems that everybody loves. I have the free trial. Let's sign in. I have the, the free plan and I created the Active Design System. So this uses another one of my design systems from Figma. I had synced it with Figma at some point. Um, I forgot how, but it was a pretty easy, uh, sync. Like I pretty much just shared the, uh, the link to Figma and kind of connected it. You can see there are some introductory pages or an overview page that's already, uh, that's prebuilt showing you some, some examples, principles, release notes. Here's just some. Examples of what you can build. Uh, some of the, now I kind of got into this one cuz I, like I said, this has been my favorite so far. So I started really building it out and I'll show you in the in one of the, the early, uh, layouts. But you can see there's a component, there's a subcategory, and then there's a page. So looking at components, you can start adding information around this whole components page. And then going into the, the button set, you can see I created a page that has style and usage, and then it's got, uh, a side nav here. And I'll show you what it looks like for like in the real site. But I also was able to kind of customize these the way I wanted and have them laid out and show the, the variants, which I really liked. Um, I broke this into different ones where I have a variant, the layout, the width, the button count. Um, I could create a different page or add the pieces onto this. I can also go into usage. I typed in some of the usage, but you can import different types from Figma. And let me show what that looks like here, why I like this. So design upload, and then you just click this. And from the design system, you can pull in components, instances, color styles, text styles, frames. And effect styles. So say I wanted to just pull in like a, an example of what not to do. I can go here and pull in this frame and here's the, like the base component. So I, this is not something I would normally use, but say I created like a layout that says like example 1 or something. Um, and I want this to be big. You can adjust the image size. To really big. Um, you're gonna make it a list view. Um, you can change the alignment, you can have, uh, annotations, all kinds of stuff. So I really enjoy that aspect of pulling in different, you know, layers and features from, from Figma to create this documentation and then the flexibility to rearrange it. Now the flexibility was something that I felt Supernova lacked. Um, and Figma, I thought it just really did a good job of the flex, like of the layout. So I kind of didn't have a complaint about that. If I did want to adjust it, I do know this kind of syncs with your Figma, um, layers and things like that. For example, like I have buttons set first and then I have the pieces button on the design system. So it, that's how I got that order with this one. It gives me more control, but that being said, more control equals more work, right? right? I laid this out. If I wanted to add a code, um, you know, code tab, I could, and then customize that page for that. Now let's look at what the actual site looks like. And I had changed some of the branding. Um, but I'm not sure if all of it, like I added this Active logo. You can see here it still has this style guide created with zero height. That's probably cuz I'm on the free plan. Let's, uh, I created this navigation. Let's go to components. This is empty, but, but we can go to the button set. We can see these tabs here. I want to check out the width component. We can see it here or here. Let's inspect it. It's going to open it up big. You can see it contains the base button set, button 1, button 4. You can see the style. I'm not quite sure what that— maybe I have to click on one of these. Yeah, so If I click on this, it's got the fill, it's got details. Uh, it looks like there's an export, so you can add assets in Figma. Um, add items to export pane. So if I had make this exportable, uh, developer would've been able to, uh, download this asset. That's really cool for like icon libraries or, um, you know, image libraries or anything like that. It looks like there's version history. That's really nice. Yeah. So a lot of really good stuff, uh, on this one. I, I'm kind of a big fan of this, um, Zero Height one overall, but I thought I'd show you the other ones because I do think there are some pros and cons to each one. Figmaio, super easy. 1, 2, 3. Really nice. Um, if you type the documentation in Figma, now you have it in both, which is easier to manage in my opinion, right? Managing your entire design system in Figma and hitting upload. Easy peasy, done deal. If you don't really have the bandwidth to create a bunch of different pages, that becomes problematic. For Zero Height, if you do have this, the time to create this and go through it and enter this documentation, which is a pain, right? Like you have to literally go in how to use it, show dos and don'ts. If you have a connected code base, you have to connect it. It's a lot of work to do. And then maintaining it, who's gonna update it when things change or when things happen, right? There's a lot. That actually goes into the management. And if you don't have a dedicated team, it becomes a little bit more challenging, but aesthetically it is much easier. I'm, uh, Supernova's also really good, very similar to this. I'm sure you can achieve very similar. I think it's kind of a preference thing. For me, I just ended up liking this one a little better. Uh, but I like the flexibility on both and it was pretty easy to, to do. Now the, the question that I'm trying to see is like, now that I've reviewed these, I haven't fully implemented them at, uh, enough companies without a design system team. Like I've worked with a co— with companies that have a design system team where you have to review with a design system team that manages, like that ensures the success of like using your, your design system. But I've also worked with designers that don't check, uh, documentation. So now the, the problem I'm looking to solve is it, is this going to help designers know what and when, right? Are they going to go look and see how do I use, um, here's one that's like not super common. How do I use activity icon? Okay. I see it's a, it's a, you know, it's an icon with a badge counter. Let's see. Yeah, it says badge counter and an icon. Let's take a look at the usage. Okay. It says to do this and it says to do this and maybe there's some visuals I can add to show. The dos and don'ts, is that, you know, is that going to, to be that? I guess the question, thinking about from the design perspective, how would I know to look for this? Right. Unless I went and maybe there is a page that just shows all the, all of them, right? Maybe this page, the component shows all of the, uh, components and has a, some details around it. And when, when am I gonna really look and see how to use it? I feel like depending on your level, you may get designers that are guessing and trying to, uh, just kind of use it how they feel instead of properly. And that being said, it may be beneficial to review that and then add it to the dos and don'ts and the, the documentation around that too. But, you know, one step at a time, I wanna see. So these are my reviews for the design system tools. Let me know if you know of any other ones that, you know, may be better. Or if you've used these and seen success, um, I'd love to, to learn more about the design system management that's been successful, and maybe we can find a way to share it with other designers and help build out design systems overall. But until next time, thank you, and I will see you later.