Plantilla de componentes de diseño

Antes de ponerte manos a la obra con las especificaciones de un componente, debes definir los aspectos básicos. Para empezar, rellena las filas de Componentes básicos: ponle un nombre a tu componente, explica lo que hace y carga un diagrama de la anatomía con rótulos numerados. Utiliza estos rótulos para crear una clave y define todos los elementos de la anatomía del componente. El objetivo de esta sección es brindar a las personas que usan el componente una idea de cómo encaja todo en él.

Llegados a este punto, empezarás a ponerte con las distintas formas de usar un componente dentro de tus diseños para una función más general. Explica para qué sirve el componente, incluido su objetivo en tu diseño en conjunto, y luego pasa a su apariencia y comportamiento en diversos contextos. Utiliza el código activo del repositorio de tu sistema de diseño para mostrar distintas variaciones. Por último, explica el estilo visual del componente. Asegúrate de incluir ejemplos de lo que hay que hacer y de lo que no se debe hacer.

Cada componente tiene sus peculiaridades. Regístralas en Instrucciones adicionales. Empieza por el contenido: ¿presenta este componente alguna regla de puntuación específica? ¿Y etiquetas estándares? Pon todo esto por escrito, junto con cualquier inquietud específica del componente en materia de accesibilidad y consejos para aplicarlo en entornos móviles. Si hay prácticas recomendadas estándares del sector sobre el uso del componente, plásmalas también. Por último, añade enlaces a todos los componentes o patrones relacionados.