How to remember and use the specifications of components better?

samirobin

Components are a topic that many B-side designers cannot avoid in their daily work. If you are also a component designer, you must also encounter this problem:

• I recently finished writing a set of specifications for the use of components, but team members do not always follow the design drafts, and many people always Latvia Phone Number List use them incorrectly.
• Even if the design draft uses components, many details are different, such as the card spacing in the same scene, some designers use 8px, some use 12px…
• I have released a new specification, why do some designers always say they don't know and still use the old specification?
  

I'm sure you've discovered that no matter how detailed we make the component specification, there are always users who incorrectly apply the component in ways that we can't predict.

So how do you ensure that all parties involved can use the component correctly and understand the specification? I hope some of the suggestions in this article will help you.

1. Start with the form of component specification

Optimize the component itself, and make the usage specifications of the component more intuitively reflected through some methods, so that it is easier to "use right" than "use wrong".

1. Details, what you see is what you get

You can put details that people often use wrong as part of the component, hinting on the component. For example, write some usage methods and precautions next to the component, or design it directly into the component to become placeholder text. for example:

Taking the "Alert" component as an example, when our team of designers was working on business requirements, we found that some requirements did not need titles, so we had to remove the titles in the component. However, many designers directly write the content of the information prompt in the position of the title for convenience and speed, and delete the text below the title. In this way, the text content in the prompt bar becomes the title, which has a bold effect:

Some developers also bolded the text according to the designer's draft, which resulted in a very inconsistent style of tooltips in the product.

After discovering this problem, the component designer optimized the component and directly wrote the usage method into the component's placeholder text, prompting the designer: "If there is no title, please use the text style at the content, do not add thick."