Test Gist

This_is_being_record.txt

This is being recorded, so we are going to upload it to Disco after. So if you need to stretch your legs or grab a cup of tea, feel free to do so. And if you're sharing this on social media, tag Dribble. We will repost everything that you guys share, okay? Without further ado, I would love to introduce our first Q&A guest speaker of this course week one. We have got Lenora, a senior product designer based in Miami. She's worked on design systems at Skillshare and Salesforce and is a super talented force to be reckoned with in the design systems world. So we're so grateful and happy that she is with us today. Start asking your questions. I already see one in there. And without further ado, we will get Lenora up. Hello everyone. Hi, you're right. I have worked on Salesforce and on Skillshare. I am now with Digital Ocean working through their systems and their design, so it's been awesome working with them. I think about four months. So yeah, nice. I guess beginning steps of working on a new system, which is awesome. So if you have questions about transitioning into a new system or working on a new system, let me know as well. Amazing. So pumped to have you here. You have got all this experience. I am in the Q&A tab now, and I will kick it off with the first question. Question from Nicholas, which has got five upvotes: how to maintain spacing cohesively in a design system in a complex design system? I will leave it to you, then I will be back up to the next question. Perfect. So what we have done at Heroku/Salesforce is we used, I don't know if everyone's acquainted or knows about this system, but it's called Telwin. We use Telwin to keep our spacing cohesive. And yeah, we incorporated that same system with Rems over to our actual design system as well on the Figma side. So yeah, that's how we created and maintained spacing cohesively on the system. Let us go to the next question. Next question, we have got Ricardo. How do you kickstart a design system project and keep it as practice inside a corporation company project? Here's the navigation because unfortunately, if you use Bootstrap, it will give you an app. It's like, hey, here's everything you will need with an F. That became a big issue when we wanted to add things or subtract things or change things about that actual system. It became a problem. So we moved on to a system like Tailwind. One of the issues that we found with Tailwind was not having enough customization. So I feel like it depends, you know? Coordinating a design system with third-party vendors, you really need to lean more toward what's the right amount of customization that you need for your system? And then what are things you actually do need from this system? Like, for instance, with us, we wanted a very cohesive color system. Our color system at the time was very dependent on exact values. Let's say you're trying to build a button, right? And with that button, you want to make sure the active state was a slightly different darker tone than the default state, and then with the hover state, you need a different color. Well, with those differences in hues, I wanted to create a system where we're able to use math to create the hues because unfortunately, with different devices like Android and iOS, just because you use a certain color doesn't mean that same color will be the color you will be using on Android. There will be a slightly different color variation within different devices. So I kind of wanted our system to create those colors for us, and to do that, we needed a system that could be flexible enough to calculate those colors for us. Bootstrap couldn't do that. Unfortunately, we needed systems like Tailwind or things like that to add a bit of math to it to keep consistency. When I moved to Skillshare, we used Material. I feel like that one did a bit more. It created more consistency issues for us. So Tailwind, in my opinion, was still the top-tier solution to use when it comes to consistency, and it was consistent no matter what device you're using. That's how we coordinated what customization we would use and what kind of system we would use to create that kind of consistency. We wanted a system that would allow us to create that consistency that we kind of couldn't create by ourselves. So I hope that answered that question. Thank you so much, Kristen. Next question, Fatima. All right. Do you use some plugins in Figma to make your work faster and Design Systems? If yes, which ones? Oh goodness. Now I need to go into my Figma file to see which ones I use the most. Now I know I definitely use there's a theme. I am actually checking right now to give me one second. Let me pull everything up. There is a plugin that I use that was vital when it came to theming, and that was me figuring out the name of it. Oh, so that was mostly about trying to figure out where to start. What was everyone's knowledge and understanding of what a design system was? Once we figured out what everyone thought it was, we're like, "Okay, here's what it is. Here's how we can start off with our designs." Then, here are some things that we can start off doing on the design side. Then, here's what we can do on the engineering side. It started with the design portion, of course, to just show, "Hey, here's what we're going to do with icons. Here's what we're going to do with the navigation. Here's what we're going to do with the component tree. Here's what we're going to do with all these different bits." And once we got that whole cohesive library set up, we moved on to the engineering team to say, "Hey, could we show this in any kind of way?" And of course, a lot of folks use Storybook if you've ever heard of Storybook before. But yeah, we kind of started off with the design team first to get a sense of the visuals and our ideas of what we want, and then we moved on to the engineering team to show that visual of what we are trying to portray. So I hope that answers that question. Yeah. The next one is, "In your point of view, how will AI influence Design Systems as a discipline and as a process?" Oh my gosh, that's a good one. I feel as though AI in Design Systems can be pretty new. I feel as though it can be perfect for the little smaller pieces like buttons, like areas where there's no particular pattern. I feel like buttons are a known pattern for everyone. Navigation is a known thing, side nav known areas. But when you go into certain patterns to fulfill certain needs, like for instance, in DigitalOcean, we're trying to figure out ways to incorporate different identity management systems. So when you focus on identity and management systems, you kind of have to think differently about what we're going to do holistically around the entire platform. So in my perspective, when it comes to those set patterns, that's more of a custom thing, but buttons, I mean, come on now, everyone uses buttons, everyone uses icons, everyone uses certain things. So I feel as though setting those normal pieces to design system can totally be taken over by AI. But when you have to think about things in a way of, "Here's how this particular user uses an identity management system, and an atom, and we use it totally different in a member or use it this way, and then I am Bill overuse it this way," that's when I think a human needs to be pulled into that bit. So yeah, I feel as though the smaller bits can be totally taken and created with an actual AI system. The next question we have is, "What are rookie mistakes you made earlier, Leon, that turned into major lessons for you?" Let me open up my design system now. Thank goodness, I still have access to some of them. I am going to open up my Skillshare system, right? And the plug-in was called, okay. There are two, there's one called "Themer" that one I found to be the easiest one to just quickly transition. So I was creating the Themer around certain products that we had. So we had Skillshare Core, and then we had, you know, Skillshare, what did we call it? Oh, goodness, it was Skillshare Core, and then it was also a Skillshare kind of like a teacher form that we were creating. So I kind of wanted to create a different color theme and different settings for those users. So if you were just a member, then you would have a certain thing. But if you were a teacher, you would see Skillshare from a different standpoint. So we're using Themer to just switch around those different things. Oh my gosh. This one was about accessibility? Oh yeah, I made some really big mistakes on that one. I am not happy. I am not proud of them. I made a lot of those mistakes on the cells for system, which to me was the best place to make the mistakes because with the cells for system, there were already accessibility champions part of that system. So a lot of my time was spent on reaching out and saying, hey, is this how this thing works? Is this the best way to do this? What are the areas that I worked on? I will give you some background on me a little bit. I am sure you probably, I don't know if everyone went to my website and saw the little video resume I have on there, but I tried to give a quick one-minute video of who I am, but it kind of separates my experience. So the very first year or maybe two years, it was about two years of experience. I was on the engineering team on the design system and then I transitioned to the design team for the last two years. So two years on the engineering team, two years on the design team, four years in total of working on designing systems, and that experience taught me so much about how to compartmentalize my understanding of how to build a cohesive system from both sides. So back to the question you asked, rookie mistakes. Rookie mistakes are about accessibility, and the areas that I kind of fumbled around with quite a bit were about tooltips. I know that's like the simplest area that you can ever think of, but tooltips were so hard. Oh my gosh, like creating a tooltip that automatically knows whether it's on the right or the left side of the page, no matter the actual device size. Like if you're on a mobile, it will move to the left side. If it's closer to the right, if you're on a desktop screen, it will transition to where it needs to be. That was so much math. I didn't realize how much math was incorporated in these bits. So I would say the most rookie mistakes I have ever made was just creating a tooltip without thinking about what it would look like on smaller device sizes, etc. So yeah, that was a big rookie mistake that I kind of don't want to ever make again. So the next question is, how do you incorporate a design system with third-party vendors that have limited customizations? So our third-party design system vendor was Tailwind. And although Tailwind is mostly around CSS, it wasn't so much about hate.