Template Componente de Design

Antes de entrar no aspecto mais importante das especificações de um componente, você precisa conhecer o básico. Comece preenchendo as linhas em Noções básicas do componente: dê um nome ao componente, descreva o que ele faz e carregue um diagrama de anatomia com textos explicativos numerados. Use esses textos explicativos para criar uma chave e defina cada elemento da anatomia do componente. O objetivo desta seção é explicar às pessoas que usam o componente como tudo se encaixa nele.

É aqui que você começa a descrever as diferentes formas de usar um componente como parte dos designs para uma função 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.

Todo componente tem peculiaridades. Faça o registro delas 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 a dúvidas 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.