Photo by Components
During the project analysis, we identify common design patterns that could be reused throughout the project. This includes header, footer, buttons, form fields, and other UI elements. Identifying reusable components can help save time and reduce code duplication.
It’s important to note that we don’t create components for every single element in the design. We only create components for elements that are likely to be reused throughout the project.
Let’s break down the process of creating a component into the following steps:
Identify
First things first, we need to scan the design provided by the client, which is usually a prototype in Figma, Adobe XD, or Zeplin. By reviewing it, we can identify the parts of the design that repeat, such as buttons, sections, menus, and more.
Naming
Once we have identified the components, we need to assign a name to each one of them. This is important because it will help us identify the component when we are working on it. We can use the name of the component in the design as the name of the component in the code.
Creation
Once we have identified the components and assigned a name to each one of them, we can start creating the component. We can create the component we prioritize the most first, and then move on to the other components. One pattern that we follow is to create the components in the same order that they appear in the design starting from the homepage.
Quality Assurance
Once we have created the components, we need to make sure that they are working as expected. We can do this by reviewing the component in the browser and making sure that it looks the same as the design.
Documentation
Finally, we need to document the component. This is important because it will help us understand how the component works and how to use it. We add the component to the Design System page in the documentation.
Next: Pages