Hello everyone. Today I'm going to talk about the biggest challenge that many designers and engineers and startups are facing is building a design system within limited time frames. So time constraints can make it tough to start, maintain, keep consistent and scale. So we'll explore strategies to overcome these obstacles over your approaches to protest components and dive into different plugins and AI tools to build design system faster. So first thing first, let me introduce myself. Currently I'm working at Poly AI and I'm designing better user experience for conversational AI systems. I have more than nine years of experience as a product UIx designer and also work with multiple design systems for large companies and tiny startups. Also in the past and right now, I have multiple degrees as an accountant and digital designer and I really love mentoring designers and help them at early stages of their career. But why design system? Probably you heard a lot, that design system is really helpful. It makes companies deliver feature faster, it helps engineers to reuse code and also it increases revenue and just reduce time spending on design components and tickets. It's really beneficial for companies, especially startups, to spend time on designing and creating building design system because using design system is all about saving time and money. But it's also challenging when you start working on design system, which means you, you should think about consistency. Also you usually have resource limitation and also communicational gaps and you need to align your stakeholders and other departments. And also usually you have technical constraints and issues with adoption. But when we're talking about startups, we have even more challenges. Like usually startups don't have time to anything, speed is really high and also roadmap is very dense. Usually there is no sign team to create design system and also there usually scalability issue with a platform and especially with the design system itself. And usually there is privatization conflicts due to roadmap. What you should do technically when you just create your company, when you start working on product, you can use happy path. And just by re already existing design system there is few platforms where you can make it happen. So you definitely should look at these platforms. There is a lot of design system for different type of products, for different size of company and different size of product. There could be a really complex design system for like hundreds of components and a really simple one for tiny startups who just start date path. So you can use this design system that already exists in. Usually they have Figma file and files for engineers and links to repository to use it and just use for your platform. But when we're talking about existing products, an existing team that already have design system or Uikit. It means that maybe they don't have this opportunity to use happy bug. Probably they can improve their existing design system or move forward creating design system. So first of all, what you should have to create very successful design system is to have roadmap and also long term vision. And your design system should be valuable for its users. So you definitely should have users. By users I mean engineers and designers and other teammates who can use the design system on daily basis. For example, usually it's designers, engineers, qi engineers or marketing team. And also it's all about value. So this design system should be really valuable to its users. And at the same time you should have metrics for a design system to check if this design system is okay. For example, this metrics could be satisfaction of your users and you also should create some specific adoption plan how to make these users used and love your design system. So when you realize that you have users and you need to create design system and it will be valuable, you should start from something. So you probably know that usually design system have really specific components, for example buttons, inputs, color palette, grids and icons. So you should think about prioritization, where to start, what components should go first, what element you should build first. In this case, there should be, there are existing few types of prioritization. First of all, you can use any prioritization tool you already use on your product, for example. So technically you have four columns, must have, should have, could have, and won't have where you can place any of your components. For example from experience, usually you should place color palette, grid system icons and fonts to must have. And for example, if you are early stage startup, so you probably don't need to think about creating some specific components like combo books or data pickers. So in this case it could be in a column of one half or one half right now. And there's another approach of prioritization. This is technically system methodology for designing called atomic design where you have subatomic components such as color palettes, typography and spacing, and also you have other components that is more complex like atoms. You see this could be icons, buttons, labels or inputs, molecules, organisms, and more complex elements such as pages. And usually work starts from subatomic and atoms. And then you go to the more complex one, one more prioritization thing. Prioritization methods is roadmap based. So technically you can see, just imagine this is your roadmap. You have features on this roadmap and it means that you can start working on design systems, you work on your feature. So technical case close to atomic design, atomic methodology, because at the beginning you should work on the most basic components such as colors, buttons, inputs, and then you go further with second feature, there could be different components, so it could be input. So usually with this approach, with this roadmap based approach, there will be lots of work. At the beginning with your design system and then closely closer to the middle of your roadmap, you will see that your design system is already ready. So most components are already used. I might say from my experience, I usually use atomic approach and roadmap based approach and sometimes I use something like collaboration mix of these approaches. But usually I start from subatomic components such as colors and color palette, and then I go with features and components that is connected to each feature. And I might say I really recommend these two approaches like roadmap based and atomic design approach. So since we agreed, and you agreed on moving forward with some specific approach of prioritization, it means you should think about process of creating your design system. So first thing first you should think about why do we need this component? So this is discovery stage, the same as working on every feature. You would have discovery, design development and release. And also you can go back and forward in some steps. And also you can see there's few additional steps in each of this phase. So there should be audit, discussion, scoping, kickoff. Then there should be exploration, user testing of course, and documentation at each step. And also when you release, you also should think about announcement because you have users and you should definitely share what's different, what's new in your design system. And also you should have metrics to check. Sometimes you may not have metrics. For example, there are five people who are using design system and the metrics you can have with just satisfaction. And technically yes, you have metric, but at the same time it's not that metric as you probably could have on your product because your metric is your user feedback, definitely. So what's next? We understand what approach to use, you understand what process can be. So next step is design phase. So color palette is the most basic element of your design system, but also time consuming. Work on color palette can take from few hours to few weeks, depends. So instead of spending time on this basic element, basic element of your design system, you should use these plugins on figma to generate your color palette. I will show on my presentation only plugins for figma because last five years I use figma only and I know that number for designers who are using figma is growing every year. So if you use sketch, I'm really sorry but currently I'm sharing everything about figma. So as you can see you can use this plugin on figma to generate your color palette. Then also you can use this plugin to create your color palette as the styles and variables. Or you can use this plugin that also have an AI to generate your color palette. Creates everything styles based on pictures or image or your printing guidelines. So I absolutely recommend to use any of this plugin to create your color scheme. Typography is also time consuming. You also can spend from hours today to create your typography styles and sometimes it's really challenging when you have already existing product and you need to gather everything together. So this plugin can really help you to save hours of your life by just some of them gathering all color styles that you already have on your mockups and figma. Some of them help you to create type scale specifically for your needs. So I definitely recommend to use any of this. Next is icons. Why icons? It's really interesting because designers already designed like thousands of different versions of home icon. You can find it everywhere. So instead of again spending hours on this basic element such as icon, you can buy already existing icon set on this website for example. Or you can use any of plugins that you can find on figma, for example material symbols or the same plugin from iOS. So it will help you save hours of your life on creation these icons. But again, there is a lot of other icons that you can find on different other websites. So I think you definitely could find something that's really suitable for your branding for your website to make a shiny and save time. What else? I would like also share my thoughts about these three plugins because these three plugins are just recently showed up and they're in beta version. But what they can do previously on previous slides I shared that you can create icons, colors and typography by using different plugins. And these plugins on this slide there can do everything, but you need to prompt, you just need to prompt what you would like to create. Unfortunately, these plugins again embedded version, it means they are not that functional as they can be. But in the future I see that by prompting them, by adding few lines of text, you can create your own design system. Currently they can create styles, color fonts and few really simple design components. Design system components, but that's it. But anyway, they're really powerful and instead of having like five or ten plugins for different reasons, you can use any of this and it's really could help you save time. And when we're talking about designing, it's not the end after design. Usually we should go to the development phase. So we should move up design for Figma two code. Unfortunately, and fortunately there is not that many plugins or tools that can help you move your Figma file or design on Figma to code because Figma already did it. Figma introduced depth mode that help you just copy this code that Figma generate and paste it to your repository, to your files and it's really helpful. Unfortunately, there is no other tools that can do something better and there is not that many tools that you can try really. But using dev mode is really beneficial for our team. So it definitely should help you to build your design system faster. And also when we're talking about building design system, usually I see that people and other companies and other teams use storybooks as a visualization of what you can find on Figma, what you can see on code. So it's really helpful. It helps engineers to understand what's going on, what other state, what other patterns or styles you should use, or it also help with version control. So storybook or its alternative is definitely really helpful to save time and help with communication between different departments. Also, when we're talking about design system, it's all about documentation and guidelines. I might say that when we're talking about documentation, first thing first, what we're thinking about is chat DPT. There is no longer need to have open tab of chat VPT because you can find this plugin and figma that also have chat DPT. So it means that you just open this plugin and prompt few lines of text about what you're gonna choose, what you going to generate and this plugin will do everything. I use it a lot in the past, I will use it already for my design system. I'm working on design system and it's really helpful. Also when we're talking about design system and components, it's usually all about anatomy of components, means you should use and you could use and I recommend to use this eight shaped specs plugin because it really helped to highlight these different measurements between components, space between components and everything and leave comments and some specific details for your engineer. Definitely should use it. And when we talking about documentation, these applications are hey is really helpful because this is perfect place where you can place everything, all documentation that you have for both engineers and designers and for third parties or other departments in one place. You just create one page where you explain everything about some specific component, or you can explain patterns or use cases for specific elements. So it's really helpful to use this app as a source of truth for everyone. And since we already discussed components and where to place it and how to move it from design to engineering, we also should think about scalability. Because yes, we have users, our design system is valuable and how to scale, because when you cannot scale, it means that your design system would be really hard, really difficult to maintain. You could spend a lot of hours on just creating new components and there will be no scalability at all. And eventually you can just lost your users and metrics gone wrong and there is no option at all. So you can try to make your design system scalable just to add a lot of collaboration between different departments and collaboration between users and people who are building this design system, because this collaboration can help to understand point of improvements or weak points or this strength of design system. So collaboration is essential for building scalable design system. And when we're talking about scalability is all about documentation. So everything should be documented and your design system should be flexible and modular. Because when you cannot create your design system, when your design system is not that scalable, not that flexible, sort, it means that every time when you need new component, when you need specific component, you cannot use existing one, you should create new one. And it means that you would end up with a lot of the same, very similar to each other components. You will end up with a lot of documentation for all of them. It's definitely should, you should definitely try to avoid creating a lot of components. And you should definitely think about adding flexibility to this component. And your design system is all about version control. Because if your design system is evolving, if you create a new component, if you add in documentation, you should definitely think about how to show versioning, how to help user to understand that this button is the most relevant one and previous one issue duplicated. So version control is everything too. And once you done with everything, you create scalable design system, next step is adoption. If your design system have value and also have users, it means that you should educate and train all users that can possibly work with your design system. Because training and education is the most essential one for adoption. Because people should know what to use and how to use this component. And also it's all about feedback. And if you would like to scale your design system and make it living and breathing, you should think about improvements and how to improve is just gathering feedback because user will say, will tell you what should be improved. And also to make your design system perfect for adoption is your design system should be impactful for users, for company, because if there is no impact, there is no chance that company will use it and users will use it. And we're talking about people who are creating Zen systems. So it's all about recognition because people who build Zen systems should be motivated and they should be recognized. So it's just tiny thing, but recognition is something that should be done for better adoption. So thank you so much for listening. My presentation about design system.