Monitorar todos os componentes que a equipe usa nos designs pode ser complicado, ainda mais quando a equipe está crescendo. O template do componente de design ajuda a documentar cada um, desde os princípios básicos, como o que o componente faz e como ele funciona, até como ele se parece e age em contextos diferentes. Existe até uma seção para orientação adicional, em que você pode explicar regras específicas do componente, acessibilidade, mobilidade, etc. Crie uma biblioteca inteira de componentes do zero!
Como usar o template Componente de Design
Passo 1. Comece pelo básico
Antes de entrar no aspecto mais importante das especificações de um componente, você precisa conhecer o básico. Comece preenchendo as linhas em Fundamentos de componentes: dê um nome ao componente, descreva o que ele faz e faça o upload de um diagrama de anatomia com textos explicativos numerados. Use esses textos explicativos para criar uma chave e definir cada elemento da anatomia do componente. O objetivo desta seção é dar às pessoas que usam o componente uma compreensão de como tudo se encaixa nele.
Etapa 2. Descreva as especificações
É aqui que você começa a descrever as diferentes formas de usar um componente como parte dos designs para um recurso maior. Descreva como o componente é usado, incluindo o objetivo geral no design, e como ele se parece e age em contextos diferentes. Use o código ao vivo do repositório do sistema de design para exibir variações diferentes. Por último, descreva o estilo visual do componente. Inclua exemplos do que fazer e do que não fazer.
Etapa 3. Documente dicas, truques e práticas recomendadas
Cada componente tem suas peculiaridades. Faça o registro deles em Orientações adicionais. Comece com o conteúdo: existem regras de pontuação específicas para esse componente? E quanto às etiquetas padrão? Anote cada uma delas junto com quaisquer questões de acessibilidade específicas do componente e dicas para aplicar o componente em ambientes móveis. Se houver práticas recomendadas padrão do setor sobre como o componente é usado, também faça uma lista delas. Por fim, adicione links a quaisquer componentes ou padrões relacionados.
Tony Starr
Líder de Design de Conteúdo @ Atlassian
Tony é Líder de Design de Conteúdo na Atlassian. É redator de conteúdo e técnico multidisciplinar que ama estabelecer padrões e superar as fronteiras de onde a diretriz de conteúdo pode ficar.
