 What's up? My name is Abhinav. I'm the head of design at Unacademy. Unacademy is a ethics startup. We're a test prep platform. We have learner apps and educator apps. We're a platform for educators to come and find an audience that they can teach. And we're a platform for learners to come and study for what they want to. I also run a bunch of other things. I run this website called UI Sources, which is a design inspiration site. I recently wrote a book called Pajama Profit about freelancing. Previously, I did a music app called Listen. I was at housing.com as well. So at Unacademy, we're a team, we're a pretty small design team. So we're three product designers, one illustrator. Tech product and design overall is about 40 people. So I'm going to be talking about what are our goals with the design system? What are the considerations that we had at our site? And hopefully some takeaways that you can apply to your own organizing. So for me to get a read of the room, how many people in here are developers? Okay. And how many here are designers? Any other folks who are in between? Not pure development, not design? Okay, cool. So this is uisources.com profit. All right. So if you sort of zoom back to web, how we got here, the current state of design, um, the years around 2010, before 2010 and somewhere around that, most designers, and I'm talking about 99 or 95% of designers used Photoshop. And Photoshop is an extremely powerful tool. But when it comes to screen design, like you're designing screens, it's websites and apps, it can be overkill. Like it's got a lot of bloat that can make working harder. And so somewhere around 2010, a new entrance came into the field, which was sketch. And within the next few years, so sketch came out in 2010. But by 2012, most designers, most design teams all over the world had switched to sketch. And the reason they had done this was because sketch just took one slice out of Photoshop and made it really efficient to design screens and websites and screen based design, basically. And if you're in a tech company right now, designer or developer, there's about a 95% chance that this is your design stack or some variation of this. So for design, you use something like sketch storage, version control, use Dropbox, maybe you use GitHub, maybe you use something like abstract for communication. You know, of course, you have Slack, but you use maybe more specialized tools like Envision. Handoff typically happens in Zeppelin, or you use something like Marvel, or maybe even Envision to prototype, maybe complex prototypes happen in principle of framework. So this was our design stack as well at Unacademy about six months back. And as part of designing or coming up with a new design system, we made a few changes to this. And this is what our stack looks like right now. So most tools, like we didn't know it at the time when we were trying out Figma, but Figma started with replacing sketch for us and then slowly it moved into everything else. And by slowly, I mean within three days, right? Figma made it really simple for us to completely migrate from all these tools that we were using to just one single tool. And this happened at the same time that we were figuring out what our design system needs to be. So some of the goals that we had with this. So of course, the first goal with designing any design system, wherever you are, is consistency. So at Unacademy, we have four apps. We have the learner app is on iOS and Android, and the educator app, which is also on iOS and Android. And one of the things we wanted to do was be able to move really fast. So we were switching to react native and we were starting with one of the apps. And the goal was to switch all four apps to react native eventually. So this was the perfect time for the design team as well to come up with a new system that ensured consistency moving forward. The second goal that we had was we wanted it to be real time. And what I mean by that is if we're pushing out and update every single week, right to our apps, we want everybody to be on the same page no matter what part of the process it is. So let's say I'm designing a new feature. I don't want the developer to know about it five days later when I'm done with it. I want everybody to know that we're working on this so that when I am ready to sort of pass the baton, the other people can take it and run forward. So we wanted real time to be one of the core goals of the system. The third was collaboration. So often with tools like sketch, what happens is so sketch is only installed on the laptop of designers, MacBooks, right? It's a MacBook only tool. What would happen is I start designing something. I'm sort of halfway there. My PM maybe knows about it. The developer finds out only when it's his time to find out or his or her time to find out, which is not right. When you're building new features, it needs to be a collaborative process so everything can run efficiently. The fourth was communication focused. Now communication has the tendency to become an overhead because there are always questions like, you know, have you started with this or is this on zeppelin yet? Or the version on zeppelin is that the right one? You showed me something else yesterday or, you know, you'll send me the link to that design file or send me the Dropbox link or it's looking different on my computer. Do I not have the fonts installed? Like just things like that can add up every single day, months, right? So with these as our goals, let me talk about how we sort of transitioned into figure one of the main things about it is figure was the multiplayer tool. And this is probably the first design tool ever to be multiplayer. What this means is it's a web based tool with Mac, Windows, apps and in a single design file, a single source of truth, you can see everybody who's on it. You can see whether it's a PM, whether it's a designer, whether it's a developer, they're all in the same file and they're watching updates happen real time. Like literally as I'm drawing rectangles, putting text, they can see this happening on their screen. And I can just click one of the names here to observe what they're looking at right now. And Figma is completely online. So all you need to do is share view access or edit access. This is just the same as Google Docs. You share edit access, it's for designers, they can edit your file. You share view access, they can get the values out of it, the same values that they would get out of Zeppelin. And since it's all in one place, everybody is on the same page. So if you have a screen, the designers and developers both know that this is the final thing that I need to be working with. Communication happens within Figma as well. So while a design is going on, let's say I'm on day two of my design, a developer can ask me, hey, have you accounted for that flow when you don't have this one thing and then this needs to happen right there? And I'm going to be like, yeah, I'm working on it. This is where it is right now. And I can just mark it as resolved. So all these communications happen within the design tool. And this makes it very, very efficient and avoids unwanted surprises in the future. And of course there's transparency. So anybody who's added to the team, on the left side, you have all projects. And then you can see everything that's going on right now. The first file was edited five minutes ago. That file was edited two hours ago. Then you see the colored circles. It means there's activity there. So like four people are currently on that file right now. One person is currently on this file right now. So there's never a question of asking for something. If you need to know, you can just go here and you immediately get what you need. So this cuts off a lot of overhead around communication. And of course it's multi-platform, so it works whatever computer you have. So now let me give you an overview of our design system. How we've structured it. What are the parts to it? So the design system as well, it's one of the projects. Everybody has access to it. Not everybody can edit it. Only one or two designers on the team can. We have colors. So we have a fixed set of colors. The colors have names. These names are consistent in the design files as well as in the React Native code base. And anytime a designer draws something in Figma, they can just choose, these are the onacademy colors. These are other colors. And you can just, it's never a case where there's multiple shades of green just because over time slippage happened or something like that. The same thing with typography. So the styles are very clearly defined. Anytime you write something, you can say, okay, this is an H1. This is an H2. These are titles. The rules around this, the designers typically know that P2 is to be used in cases like that. The icons as well. So we have a custom icon set of about 150 icons. Some of these are category icons. Some of them are actions in the app. And we made this a component as well. So anytime you're working on something, you can just, Figma has a search. You can just search for components and drag and drop into your file. So the way we sort of structured our components, so typically in design systems, you think about atoms and then you think about molecules. Atoms are like the smallest elements that need, that probably repeat across the system. So things like buttons, dropdowns, dividers. Now buttons, I still call them atoms, although there's text and then there's a rectangle because text is not a component. It's just a style that's applied. Molecules could be something like list items or hopeful sections in your app or maybe the app bar, common Android and iOS elements. And so our main component file, it has all the base components here. The composite components are all sort of arranged like this as well. So at any point of time, if a developer, for example, needs to know what primary buttons look like or primary buttons with pressed state or a loading state, they can come here. Of course, the development team also has their own set of documentation once they develop this. So both of these always take consistency and accessing components. Now one of the things with design systems is that when you have new designers that join your team, it can be hard to sort of onboard them and get them to start designing at 100% efficiency in the same way that the rest of the designers have been doing for a few months or a few years. And the way the component system helps with this is that every single file, every single design file in Figma, like you say new file and you start. Along with your layers, you have a list of every component that exists in the main library. And you can search. You can see visual indications of each. And when you have a screen, you can just drag out header status bar button. And within 30 seconds, you have a full screen ready in front of you. So this also makes it really fast prototype. Let's say you have a concept in mind, you sketch it out, but and you show it and they're like, you know, I don't really see it. Just go to this within a minute, you have actual screen ready. And this might not be what actually goes out in the end. This can at least help you communicate what the concept is. And now one of the, another hard part about design systems. So if you've tried building a design system in sketch, one of the hard parts about that is sketch is a native Mac app. So you have sketch files that you store in Dropbox and then Dropbox syncs this to everybody's computer. Let's say I make the change to my team library. There is sometimes a chance where the changes are not reflected when they need to be. And this can creep in the form of an old version of a component versus a new version of a component. So in fig mother, the way we handle this is anytime I go to the main component file, I make a change. It says, do you want to publish this? I type a message very similar to GitHub. Uh, anybody who's used a component that I just changed will get a notification in every file that they have opened right now that uses those components, which has component updates available. This is what was changed. You want to update it and updates throughout the entire file. So that's about it. That's it for how we did this at on Academy. Any other questions? Is there any possibility of versioning designs? For example, you have a drop down, okay? And the next version is like a disable button. Disable the drop option may have one hour. So is it possible? I'm just curious to version it. And because in Sketch or something, which is just a binary file, you don't want to see, I don't know if you can see the previous differences like that. Is it possible for versioning? Who did it? So let's say you have a component like a button. I'm going to talk about two cases here. The first is when the button itself changes. What we typically do in those cases is we take the old component and we put it into an archive file so that if ever in case we need to bring it back, we can always do that. Talking about multiple states of a component. So based on how you name your components in Figma. So let's say I do button slash primary, button slash primary with loading. These are all states of the same component. Yeah, yeah, I get it. The states of same but they're all different. But I'm talking about one specific version like drop down one component, right? So and then the design team or the management team want another version and who wanted it? I don't know. Typically when you're like in a code, when you say, when you change it, you can see it because it's text. You can see it, who changed it, why they changed it, I mean like that. But typically in a design, like if you're talking about binary files, they're photoshopped and all. So there and then you cannot see who changed it, why they changed it. The way we do that is we also restrict access to the main component file. So if you look at big organizations like Flipkart for example, they have dedicated design managers who just whose job is just to maintain the design system. In our case, we design like access to edit the components is given to just one designer, never change of somebody overwriting that. But in the case of new features, let's say we need a new component, the process usually goes like the designer comes up with a new version of the component or let's say the PM wants something and it doesn't fit into the current implementations. This is then discussed with the person who manages the design systems. Then we figure out whether there's a need for a new component or we can use the old one or add a state to an existing component. And then in design as well as in the react native component set all of these. Hey Abhinav, I have three questions. Performance online only and how does it fit in with prototyping? You mentioned you're still using Framer and principle in some situations. So firstly, performance, Figma is web based. So the tools, the apps that you have on windows and Mac, they do load web, but it's faster than Figma. So for example, just something as simple as something as simple as panning between your design file, it's much faster than Figma. So and the way I say this is that when you use Figma and you use it for about 10 minutes, going back to sketch piece that going back to Photoshop. And I've seen this with a lot of designers, which is why it's something that you can just get hooked to. Right. Second is about online. So by default, all files are online and you do need an internet connection to work. So when you're working in your offices, usually it's typically fine. But in case you do need to work offline, let's say you're you have a flight, you want to go into the field, you can download these Figma files as dot pig, which means you can work on them often. And when you do work on offline, certain features are out. So like you might not be able to access the library might not get changed. But this is like a temporary measure when you do have a question. So buddy, yeah, I know you I have worked with you in the past. I have a question that that now you, when I was there in your company on Academy, so you used to work with different tools. Now you have moved to Figma. So what is your take on, like how, like, is there any story when you shifted your team from this particular tool to now this tool? And can you just hear? Switching is really fast. The reason is for that is Figma, you can actually import sketch files. So even if you have your entire system in sketch, you can directly import that and within that 10 minutes, all your files are in Figma ready to go. When it comes to other tools, so developers were apprehensive because they were used to Zeppelin, for example, they're like, what is this new Figma thing? Why do I need to use it? But the sort of communication overhead that it cut out, like every time I would add something to Zeppelin, I would message saying, you know, new version on Zeppelin. And then somebody tells me to change it and I send a message again, new version added to that, like this was totally cut out. And developers were missing the thing where they get to see the design as it's being made. They would only see it in the end. So just benefits like that of being able to see it anytime. Switching happened for us like within a week. Hi, I'm a developer and I'm, I mean, this is the first time that I hear about Figma. So my question is, like, is there an extension like that, like we create components in Figma? And is there any extension that it can be exported to a direct, maybe a React component? No, no. So the best it does is it gives you the same values that you would get on Zeppelin. Okay, so SCSS those parts. And I will also, your question about prototyping as well. Sorry, I missed on that is, Figma lets you do basic prototypes in the same way that gets you. So clickable prototypes, same as Marvel. But working, we don't really work with Figma. We haven't found the need to work with real data. But principle so far, did work only with Sketch. They've recently now added a frame Figma import as well. So workflow wise, it stayed pretty much the same. One thing that we do miss in Figma is the use of plugins. So if you're plugin heavy, this thing you need to figure out alternatives. And a lot of these alternatives are built into Figma as native functionality. Hi, so I am a developer as well. But I was in the conference room. And I just came, so I do not know whether you've heard this or not. But I've recently started using Figma. And I usually used to do stuff on illustrator. And it was a pain, you know, to just transfer, I mean, transfer the files from illustrator to Figma. Because whenever I used to, you know, like copy and paste it, like, you know, there was no documentation on the website. And when I used to copy and paste it, it just used to, you know, like transfer into images. So do you have any idea? Like, you know, how do I do that? Because there were like a lot of files I have to individually, you know, like, say, like individual groups, and then copy it as SVG and then, you know, paste it and stuff. So if you have our icon set, for example, our icon set was made in illustrator and then brought into Figma. For us, SVG import was the way that we did it. Okay, you guys also do it. Yeah, we just use it. Okay. But in fact, one of the illustrator on our team, he was exclusively using illustrator. Now a lot of illustrations directly happen in Figma. Because Figma has a really advanced pen tool that's way better than illustrator. Yeah, it's really fast. I mean, I started using it and I fell in love with it. I wouldn't be surprised if you switched from Photoshop and illustrator also marketing. Yeah. Thanks. So have we compared Figma with Figma? Like, as I asked this question before. So with Figma, Figma initially started as a prototyping tool, but they're trying to become an all in one design tool. So now they have something which is Framer X, which is a full tool. So we did compare, but I think two things about it why we didn't switch. One is that Framer X can be really useful if you're doing stuff and react, because it lets you get react components very easily. It doesn't for react native. Secondly, Framer X doesn't yet support design system. So you can do screens, you can design this, but if there's multiple people working on it, you can't really create a system for it. You would just have to have one sketch file which has your component. But there's no concept of updating versioning. Do we have any more questions? Okay. So thank you Abhinav. Thank you so much.