Develop your product design system with Sean Weisbrot

Listen or watch on your favorite platforms

Sean has founded multiple companies and done multiple 8 figures worth of business.

He’s currently advising, consulting, and investing in business just like yours.

He knows where you’ve been, and he knows where you’re going.

Book a call with him today to see how he can help you get there smarter, faster, and in a way that aligns with your life goals.

Timestamps

00:00 – Introduction
02:39 – What is a Design System
03:35 – Parts of a Design System
09:05 – Prototyping
11:40 – Final Thoughts

Transcript

Read the transcript
Welcome to We Live to Build. My name is Sean Weisbrot and I’m an entrepreneur, investor and advisor based in Asia for over 12 years. Join us every week to fast track your personal growth so you can meet the ever-increasing demands of the company or companies you are passionately building. Time waits for no one. So let’s get started now.

Welcome back to another episode of the We Love to Build podcast. I took two weeks off, which is why you may not have seen an episode come out recently, and I did so because I was approved for my visa from Portugal and I moved my grandmother into an assisted living facility. Don’t worry, it was her choice. She’s a complete sound mind. She’s just got bored living at home by herself, so she wanted to be around other people and she’s happy. It was a huge project, took me about six months to organise everything, but it’s finally done.

My father just had his 65th birthday, so a bunch of family members came down from Georgia to Florida to visit, so a lot of things were going on. That just made it really difficult for me to be able to publish. So I decided to just enjoy the time I had with them. Not to mention a lot of things are going on with my company right now Nerv.

So we’ve been thinking about what we need to do next, and actually we’re in the process of doing those things in order to prepare for scale, which is really important. And that’s one of the reasons why I wanted to do this episode, which is going to be about design systems. Now, I am not a designer. I have learned how to do design, but the designs that I am using are created from UI elements that a designer created for us.

So I am by no means an original designer. I was just following up with the things that we had, so please keep that in mind. But essentially the goal of this episode is to share with you, from a founder to a founder, what it’s like to create a design system and why you need one. So let me first start explaining what is a design system. A design system is something that your company can use to establish standards for how your company creates new screens or new website pages, however you want. Both of those are acceptable use cases.

You may even find that you have something slightly different for each side’s website. Application. So there are applications out there like Figma and Sketch. My company uses Figma, so I’ll be talking about how Figma works because I don’t know how sketch works. I’m sure there’s other companies out there.

I’m just going to stick with Figma for today, so that if you don’t know about Figma, hopefully you’ll check it out. I am not an affiliate with them. I’m not making any commission by talking about this. They haven’t sponsored this episode or anything. I just really love Figma and I love what I’ve learned. So. And I wanted to share it here with you. Now that you know what a design system is, let’s talk about the different aspects of a design system or the different parts of a design system. So first you have your typography. So that’s like what is the size of your title.

What font style are you using. Is it going to be a regular or bold or semi bold or medium etc.. So you’ve got your typography, you’ve got your color schemes right. So is your primary color blue and your secondary color white. Or are you working with a yellow or green or whatever it is. So your company will have a color scheme and all of these things that I’m talking about, the typography and the colors, those are things that you’ll discover with your marketing team.

Or, you know, maybe you as a founder are really good at this stuff and you’ve come up with your own styles. Either way, that’s fine. But for this episode, let’s assume you already have your typography and your design done. You know your colors, so let’s assume you also have some UI elements created. Now a UI element could be a button. It could be an icon that you use on your menu. Right. So there’s all different kinds of UI elements. If you use Figma, once you have these things set up, you can create each of these things as an asset that goes into your library. And what’s really great is you can save them so that let’s say you create a new screen in your application. Later on, you’ll be able to make sure that that title text is using the title asset so that every time the title appears across your application, you know that it is standard.

There will be no chance that it’s different whatsoever. And this is really powerful because through the use of something called a component, you can actually make it so that if you update and publish that update to your library in Figma, you’ll be able to change that text from that title across every screen all at once. If you don’t use something like this, you may have the title appear 50 times across your application or your website, but if you don’t have the system set up, you’ll have to go through and change it every single time.

You’ll say, oh, I want to make this two pixels larger. But now Figma has to make sure that you have them all lined up. They’re all matching, right? So by setting up this design system, you put yourself in a position where you can just change the master component in the library and then it will automate. Change it across the entire system, which is beautiful. So this is one aspect. So once you start to set up your design system in Figma and you’re creating these assets that go into the library, we’re talking about the typography, we’re talking about the color schemes, we’re talking about the UI elements. Everything can be an asset. Let’s say you’ve created all of your typography assets. You’ve created all of your color scheme assets. You’ve created all of your UI element assets.

Now you can go to build your first screen so your screens can be done in a way where you have visual grids, and the grids make it so that you can see exactly what your margin should be. Let’s say you want to have, you know, ten pixels on the left and ten pixels on the right that you’re not using. Right? I know I’m getting technical here, but bear with me.

Essentially, these grids make it so that you can determine these things, and it’ll automatically help you understand from the entire picture how much space you have. And instead of using a calculator to figure out where it should be in order to center it, you could just follow the grids, and the grids make it a lot faster for you to set up each individual screen. Not only that, but you can use these things called auto layouts inside of Figma on the screens so that the different layers can have the different elements you’re working with in a way that they can automatically be laid out. So let’s say you want there to be 15 pixels of space between each element, or, you know, ten pixels between each icon, you know, horizontally or vertically.

So you can automatically lay these out and all you have to do is pop the element into their layers and it’ll automatically lay it out, which I think is beautiful. Another thing is called a constraint. When you’re dealing with constraints, you can make it so that they are either forced to the left, forced to the middle, forced to the right, forced to the top, forced at the bottom, forced to the center right so you can make it so that all of the things you’re building inside the screen are going to appear in a certain way. So this is really cool as well. Another thing is, uh, scaling. So one of the things that you have to think about when developing an application or designing an application is the screen sizes that you’re going for.

So maybe you’re using a mobile application. Okay. So let’s say you develop this for mobile, but you also want people with like an iPad to be able to access it if you design it so that it only works well on a mobile device. But then someone with an iPad tries to access it, all of your elements are probably going to appear really strange.

It’s just not going to function right. So if you design in Figma the ability for each of your elements to scale, to be responsive, the code output for your developers is just something that they just plug in. And then when you have something like a tablet user come in, they’ll be able to use it and it’ll automatically scale the resolution for that device in a way that makes it easier for them to use. So this is in the case you have like a web application that’s a mobile friendly or tablet friendly. These are just some of the.

Things that you can do in Figma that make it an amazing tool. Now I’m going to tell you one more thing about Figma that is going to blow your mind and make it so that you can seriously create an MVP from scratch without code. I mean, obviously it’s not going to work. It’s not going to be its own application because you have to actually code it at some point. But you can have everything click through. All of the screens are connected. Everything is working. It’s just not functional in a real application sense. So you could very quickly create an MVP prototype that is workable in Figma very, very, very fast. So the prototyping system in Figma is designed so that you can take your screens and you can literally create connections between the different screens.

So let’s say for example, you’re developing a workflow where you want to allow your user to create an account. Let’s say creating an account is five different screens. You can take one screen and let’s say there’s a button. And when you click that button, that button sends you to the next screen, right. That’s how you would experience an application. But with the prototyping system in Figma, you can actually connect these different prototype screens together so that when you press play inside of Figma, you’ll be able to literally click and it’ll show you the next sequence of the workflow so you can connect all of these different screens together.

As a result, it’s almost as if you’re using the application. So you could essentially come up with an idea for a future application or a future feature set, and you could show it to your investors, or you could show it to your advisors or your team or potential users without having to code a single line. And they’ll be able to test it and play with it and tell you what they think. And you can go back and improve the experience before you even go and develop it and find bugs and all that. So creating a design system is an amazing, amazing way for you to quickly and rapidly prototype as well as design so that your developers have the best code.

It’s reusable, and you know that every time an element or a text or some icon or whatever it is appears in your application, that it’s going to be the same exact thing every time, there’s not never going to be a button that’s 70 pixels high, but then the same exact button somewhere else that’s 69 pixels high. You will never have these problems if you follow a design system that’s implemented in an automated way on something like Figma, and then turn them into prototypes, because it’ll help your developers understand better how these things should function.

It shows your QA team, your your software testers, how it works, your investors, your users, your board of directors, whoever your marketing team, it will make everything so much easier for everyone. I really hope that this has been valuable for you. Sorry it got quite technical, but this is just one of the things that I’ve been working on for my team, and I’m so excited to see how it comes out, because it’s not something that takes a day. This is something that takes, you know, a month or 2 or 3 months because we started all of these things at.

After we created our screens, we we weren’t aware we weren’t using this kind of a system, but as soon as we became aware of it, we were obsessed with doing it right. Because only once you have everything in a very standard and scalable way can you scale up to have multiple design teams, multiple development teams, and multiple software testing teams. If you don’t have something that works right in the beginning, it’s impossible to scale. If you try to scale, you’re going to break it hard. You’re going to break your team, or you’re going to break your processes for design and development.

So the best way to save your time, energy, money and headaches is to get a design system and implement it, standardize it, make sure everything is connected to it inside of your design application, and that will be the most amazing thing you could do for your team in 2022. I hope you liked this episode. Stay tuned for more!