Building a Typography Design System in React Native

[00:00 - 00:15] Next, we start defining the design system for this application and the first step to doing that is defining the typography. Before we go ahead, I highly recommend that students go through the first lesson in case you have directly jumped to this one.

[00:16 - 00:26] Where we talked about the concepts of atomic design pattern, it plays a critical part in building the whole system. So what is a design system?

[00:27 - 00:39] And how is it different from a style right? So a design system is a single source of truth which groups all the different elements together that come to build the app.

[00:40 - 00:54] And what this does is it allows the design and the development teams to always be in sync down to the last pixel to what we are trying to build as a product. Let's look at what are the different parts of a design system.

[00:55 - 01:12] The first one is the UI inventory and defining a pattern. So the admin design pattern comes into play here and as we saw, we will break down our entire UI into different elements like atoms, molecules and organisms and that 's going to form our UI inventory.

[01:13 - 01:22] But that's not enough because the product is more than just an aggregation of reusable components, right? It has a structure.

[01:23 - 01:35] It has a meaning and templates and pages is from the admin design pattern is going to provide us that. The next is typography which we'll look at in this lesson.

[01:36 - 01:50] It basically consists of three parts. The first is the font face, the font for the application and the third part is the color palette, the primary color, secondary colors and all the different colors that we're going to use in the application.

[01:51 - 02:06] We are going to define all of that in typography and the third part is the spacing and styles. So that's how our design system will end up looking.

[02:07 - 02:20] That's an example of how it can be. We have the main brand colors and then we also talk about all the variations like let's say we have a brand color that's this one but we also want to use a shadow in some of the use cases.

[02:21 - 02:33] So we'll be defining those the fonts probably nowadays the applications only work on a single font, right? But we'll still go and define that in a single place in case we want to switch over to something else far down the development cycle.

[02:34 - 02:43] We'll be defining the different styles, the title subtitles, the paragraph texts. We'll define the icons and the colors that they're going to use.

[02:44 - 03:03] So in case we decide to use SVGs, SVGs for passing colors and that is a great use case where let's say that we have certain icon in back and white and when the action is performed which want to change it to some other color, we don't need to really use two different images. What we can do is we can use an SVG and pass colors to it.

[03:04 - 03:28] So colors for the icons also need to be decided then how the buttons are going to look if they have a shadow, how they're going to look when a user interacts with it. Say that there's a continue to add button and the user clicks on it and we want to fetch user credentials or provide some more information that resides on the server side and while the user is waiting for that fetch, how is the button really going to look, right?

[03:29 - 03:56] And the input box is so basically we'll start with atoms and continue upwards from there. From a styles spacing perspective, we'll look at the paddings inside the components padding between the components, how big our header is going to be, how big our text boxes are going to be, what is going to be the font, what is going to be the size of our texts, all the different texts that appear in our application.

[03:57 - 04:07] This may sound like a lot, but trust me, it is not. Initially, what we need to do is we need to start with a certain set of these rules and define them and we'll keep building going forward.

[04:08 - 04:23] Once we have an established pattern, it will become much easier to maintain that and expand on that or even update that going further into the development cycle. So now that we have an overview, let's look at how would implement all of this in our application.

[04:24 - 04:32] So what we're going to do is we're going to define typography in this lesson. We'll look at defining the colors, the typeface will not do icons so much.

[04:33 - 04:42] We'll see if we need that in the later stages. The reason for that is I recommend using SVGs mostly for icons with the red to be vectors.

[04:43 - 04:58] So at this scale, quite well and we don't need to put in so many images in the application and send them with every React Native app bundle. Also SVGs are very light unless you have a very complex SVG, multiple layers that are not recommended.

[04:59 - 05:07] We'll talk about that in the next upcoming lesson that's called images and SVGs . So we'll define the colors, the typeface and typography.

[05:08 - 05:16] We'll also go on to define the style for our buttons. We can also define spacings and so on.

[05:17 - 05:26] So let's look at that. If you go to the project under SRC and view, we'll find the folder styles and it has typography.tsx.

[05:27 - 05:39] So this style has been broken down into how we described earlier. It has some constants like color, font, button and the entire subset is exported using the variable typography.

[05:40 - 06:02] Ideally, while development will get these information like the colors that we need to use, font we need to use and all other styles in detail from the design team and tools like Figma and InVision they allow exporting to different platforms. We would directly use those values for the purpose of this lesson.

[06:03 - 06:14] What I have done is we're going to use this image where I have marked the color codes that we have. We will go with some standard padding in spacings to create the typography file .

[06:15 - 06:22] So let's go ahead and do that. The green is probably a primary color as the primary action that we want to perform is done in green.

[06:23 - 06:30] So we'll just put that I have copied over the code. So I'll just do that.

[06:31 - 06:44] So that's our primary color and we have this 3939 for title. Let's add it to colors and we would also introduce for texts.

[06:45 - 07:07] So we'll have title and we'll have ash 3939. Then let's also add for a second data, a text.

[07:08 - 07:33] Then that seems to be like a background color or gray one. Let's do that and for this set it as some background color, BG color and we'll do F7.

[07:34 - 07:39] So mostly we're done. Let's try and set these on some elements and try and use it.

[07:40 - 07:48] Here we had buttons in this fashion, but what we want is this. So now we have defined the typography, right?

[07:49 - 08:09] What we're going to do is we're going to extend these typographies to define the buttons and just go ahead and demonstrate how we'll do that. Let's just open our homepage and there we have a button that says push screen.

[08:10 - 08:21] So we'll just go to the definition and we have a standardized button. This will probably act as an atom that we'll see in the second modules and it has some global styles already applied to it.

[08:22 - 08:33] Although there is a provision to override it, but it's only in very edge cases. What it does is it implements some default styles that are defined in globals.

[08:34 - 08:38] So let's go ahead and change that. So what we want is something like this.

[08:39 - 08:54] We'll set some height and color and values based on the design, but ideally this will come from the design team. Let's do this and justify content center.

[08:55 - 09:07] Let's see if that and just refreshing the app and the text it's in the center. And we'll probably have a height.

[09:08 - 09:11] This has a much bigger height. So let's just say Ed.

[09:12 - 09:29] Okay, that's too much and that's what happens when developers try to look at the design and interpret what's the actual space in the tech button is a more easy example. But what would be difficult is defining the space between these right.

[09:30 - 09:32] Someone is working on a listing space. Someone is working on the homepage.

[09:33 - 09:39] We said the margins as 12 pixels on this lifting space. We said to the 10 pixels.

[09:40 - 09:44] So we're going to avoid all of that using a design system. So it is too much.

[09:45 - 09:58] Let's just make it 60 and it'll probably have a lesser radius. So border radius is five and paring horizontal.

[09:59 - 10:21] And let's also we need to have text in a smaller and background color. So we'll do a background color as we'll pick from the typography.

[10:22 - 10:25] Now yeah, we don't need to we need a border. We don't need a border.

[10:26 - 10:31] So we'll do a bit border with. So that's mostly it.

[10:32 - 10:42] Let's just go back to the button and probably the style has some style. So it says style is primary text, which is this one.

[10:43 - 10:54] And what we can do is the primary text will be, you already have it and it's going to be the default is white. We'll just do that.

[10:55 - 10:57] So that works. It almost looks like it.

[10:58 - 11:06] But what we want to do is we also want to capitalize and we want that to happen for all the buttons. So this is a good place to do it.

[11:07 - 11:13] So that's how we can define our typography. I've been set the default colors and fonts.

[11:14 - 11:25] So for fonts, it's written Helvetica. So if we are using some of the system font that iOS and Android needle is ports , we just need to pass in the name here and it will work if not.

[11:26 - 11:45] What we can do is we can put them in the respective folders for the platform in the resources folder for Android and similarly for iOS and then just use the name here for any custom font. So that's how easy and modular it becomes to manage the entire design system.

[11:46 - 11:58] Now what we've also done here is centralized the entire design language of the app, right? So design language includes the typography, the font, the colors and also the components.

[11:59 - 12:15] So right now we have only looked at the first three, but what it helps us achieve is also this. Let's say that we have a design system and this is generally worked upon by design teams on tools like envision and Figma and they allow for exporting on different platforms.

[12:16 - 12:54] So what we can do is it will require some kind of a tooling, but what can happen is we can take those definitions of the design system like the variables and the values and print some kind of an orchestration over here and then pass it on. So like for a reactivity, what we can do is we can probably pass it on as a NPM library that says that this is the design system you're supposed to be working upon and the next time the design team wants to update something, they just update their own tools and through the orchestration, it automatically passes on to the app and similarly it can be for web and also for native platforms.

[12:55 - 13:08] What we can see here is we have really centralized the control of the design system of the app with where it should ideally live with the design team, right? And the developers don't need to worry about it.

[13:09 - 13:19] For them it's going to be a set of variables or JavaScript objects that they need to consume. So hope that helps and we'll continue building the design systems in the subsequent modules.

[13:20 - 13:19] Thank you.