Design Components: The Key to Efficient Collaboration

By Deborah Guarneros

05.25.2020


Components are a part of a design system, if you haven't read our blog post about design systems you can check it out here.

At 45/RPM, we use components because it helps us have a fast and efficient process. Components allow more than one designer to work on the same project and remain consistent.

It’s important to emphasize that we always start with the components as a wireframe, so we can focus on the content and functionality and after that, we start developing the design.

We suggest to follow these steps:

1. Start with the key features.

Key features are directly related to the main objective of our product. To guide your design, reference the user flow and information architecture to know which components are necessary.

2. Modify the components.  

During the process of creating the components, you will notice that some types of content don't adjust well to the ones that you already built, this will help you to enrich them or to create new ones.

3. Start with the generic and then get specific.

We need to keep in mind that one component is going to be used in different contexts. First, define the structure of the component and then the content. Anticipating the variants that a component could have will help us use it for different purposes. For example, a grid with cards could be used to visualize the members of a team with each of their pictures, or the differentiators of a company with each of its icons.

4. Think responsive.

When we design components we need to always keep in mind that this should adapt for different breakpoints. Most of the components will adapt with no problem, but some will need to be tweaked depending on the device.

5. Have a talk with the development team.

At 45/RPM we love teamwork and that’s why we always consider the advice from the development team before sending a proposal to a client or sending the design to production. Sharing the components with the development team is important because they can give ideas to improve or complement some of the components, also they can let us know if a component is going to take more time to develop.

6. Apply the design styles.

Once you are satisfied with the components, you can start to apply the styles of color, typography, white space, etc. to each of the components. It's beneficial to have a web style guide because it helps you maintain the consistency of the design. 

7. Share the components.

We use Figma, a software for web design and prototypes because it improves the collaboration between teams. With Figma, developers can see the CSS properties, receive notifications every time a component changes, leave comments, among other things. To learn more about the collaboration benefits of Figma, check out our blog post Better Workflows With Figma”.

Using components will help your team manage spending, timing, and efficiency with simple and complex projects. If at some point the final product evolves it’s easier to implement the existing components rather than to start from scratch. Components allow for more efficient and consistent collaboration between the design and development teams.