Jitta’s Design Language System | Part 2: Create a component
How we created design components from our base styles.
This is our second part of the series. In part one, we have already built the smallest parts which are called “Base styles” like typography, colors, icons, spacing and etc. Now, let’s build the bigger part in a basic design component!
What is a component?
Imagine that you want to build a lego house, what you will do first? We start from preparing the lego bricks, think about how many brick types and colors that you may need for building the house, right?. Yes, that is our base styles. And then, what you will do next? Just assemble it! It is the same idea here. Put simply, a component is a bigger part that assembled from small parts like you’re playing with the bricks. It sounds like fun, isn’t it?
Let’s start with a bird’s eye view
Before you create a component, I suggest you think about your final design from a bird’s eye view. You will get what you really need in a big picture. For example, let’s say we build a timeline page. We start from thinking about how it could be, how many conditions or states for this design component. and sketch it down. You can do it quickly as we don’t need a lot of details here, just cover all components we should have.
As you can see in the picture above, our timeline page has a list of timeline components which are almost the same components but there is a little thing that you should be careful of. Why?. Most of them are composed of icons and some typography styles but some of them have an arrow-right icon which tells the user that they can tap this row to navigate to another page and some are not. When you look at the big picture, you have to figure it out of how many components that you should create because sometimes we can reuse some component without creating a new one and that is helpful to the developers.
In this case, you can create two components. One has an arrow-right and exclude it from another one or just create one that can show or hide the arrow. But sometimes there are limitations in development which mean you should talk to your developers too.
Break it down
Now, look at your component and break it down. Think about what we can use from our base styles. In this example, you can see base styles that we used are as follows:
- Timeline icon: from the icon base style, please noted that this icon can be changed.
- Date: represented by the Caption style in our defined typography.
- Title: from the Title style in our defined typography as well.
- Description: same here, we use the Body 2 style in our defined typography
- Arrow-right icon: Also noted that this icon can be hidden in the component that doesn’t need the navigation.
Component vs Sketch symbols
If you are the ones who uses Sketch, I recommend creating a component as a Sketch’s symbol. As you can see, symbol can make it easier when you want to reuse icons or even change color.
In case you want to hide the arrow-right icon, just select “None” for that symbol. This is the same idea when developers are coding, they just hide the element as well and that makes them can reuse the component by-case basis, again and again.
For changing color in Sketch symbol, have you ever faced the problem that you want to change the symbol color but cannot do that? here is the solution. First of all, you have to create rectangles filled with color as a symbol. After that, just put the symbol color to our component symbol and change blending mode from Normal to Screen. This color will be blended with elements that have grayscale colors. So if you want it to be fully blended as a solid color, you should fill that element with black color before you blend it. As you see in this example, I want to make the change with an oval and the title text only. So I filled the oval and title text with black color and then just simply put the color symbol above them.
Reuse base styles in component with coding
In coding, we can make it much easier by defining all our base style elements in a javascript file and import that file to your component file when you want to use it. Finally, just call the base style that you defined and pick an element in your base style like a piece of cake.
Now, we have already got a component design so let’s put it all together next time.
Happy designing. :)
