Cleaned transcript

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 for 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 is, oh no, Ricardo. Sorry, Nicholas. You were bumped. I don't know, Nicholas, you back up. I am just going to go with Nicholas's question. Got five upvotes, how to maintain spacing cohesively in a design system, especially 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 what we did was we used, I don't know if everyone's acquainted or knows about this system, but it's called "Tailwind" and we use Tailwind to keep our spacing cohesive. And yeah, we incorporated that same system with rims 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? Ooh, 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 where I am going to do with all these different bits. And once we got that whole cohesive libraries 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 like start off with the design team first to kind of get a, here's the sensor, here're the visuals, here's our ideas of what we want, and then we moved on to the engineering team to show that, I guess the visual of what we are trying to portray. So I hope that answers that question. Yeah. The next one is, I was gonna say, do you just want to read the questions out without me? Yeah, I can totally do. 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. 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 like a known pattern for everyone. Navigation, 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? Oh my gosh. This one was 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 was already an accessibility champion 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 like a little 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? Oh wait, how do you coordinate 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. 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. There, you know, it became a problem. So we moved on to a system like Tailwind. 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, it really depends on 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. Like, think about this, 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 very 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, 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 want 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. And yeah, Bootstrap couldn't do that. Unfortunately, we needed those 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 UI. I feel like that one did a bit more, I don't want to say damage, but 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.