Documentar componentes y sus casos de uso

No needless parts. Every design element, from the largest to the smallest, must have a purpose, and contribute to the purpose of a larger element it is part of. If you can’t explain what an element is for, most likely it shouldn’t be there.” (Alla Kholmatova)

Para recordar ¿Qué es un componente?

Los componentes son elementos que vamos a poder reutilizar en nuestro documento o proyecto en repetidas ocasiones. Son bloques de construcción interactivos para crear una interfaz de usuario.

¿A qué nos referimos con documentar?

Documentar es el proceso que realizamos al ordenar y registrar en un marco de trabajo nuestros elementos de la interfaz que proponemos. En ese sentido, es tener en un ambiente ordenado nuestros elementos/componentes de la interfaz.

Te compartimos un

vídeo⁠

que resume sobre este objetivo de aprendizaje que es clave.

¿En qué etapa se realiza?

Antes de diseñar nuestra interfaz y después de identificar y tener un listado de funcionalidades prioritarias para la propuesta de diseño.

¿Para qué sirve?

Durante nuestro trabajo estaremos interactuando con otros roles, como desarrolladores, quienes necesitarán conocer todas las casuísticas de los elementos de nuestra interfaz para poder implementarlo tecnológicamente.

Tener componentes iterativos y evitar diseñar varios elementos, e incluso para no duplicar pantallas en los testeos.

Ayudan a que podamos crear y administrar diseños que sean consistentes en todos nuestros proyectos.

¿Cómo crear la documentación?

Pre work

Definir como equipo y priorizar las potenciales funcionalidades de tu interfaz.

Hacer un benchmark de potenciales elementos que puede tener tu interfaz.

Realizar una propuesta de mapa mental de cómo se vería su propuesta de diseño (flowchart, userflow,etc).

Coordinar los elementos de tu interfaz con tu equipo.

Pasos

Identificar los patrones de comportamiento de los usuarios, te puedes guiar de los mapas mentales realizados anteriormente.

Identificar el componente primario y qué variantes tendrán con base a la acción que queremos que el usuario realice.

Validar con tu equipo tech alguna funcionalidad y cómo se comporta.

Ejemplos de documentación

Consulta el

ejemplo⁠

de cómo realizaron la documentación las estudiantes del bootcamp pasado.

Puntos importantes y buenas prácticas

Organizar los componentes principales relacionados en mesas de trabajo independientes. Por ejemplo, los botones de una mesa de trabajo y las barras de navegación de otra mesa de trabajo.

Nombra cada capa con un nombre claro y sintético, no utilices mayúsculas o espacios. Puedes separar con guiones.

En el trabajo donde laboremos puede suceder que ya existan patrones de diseño y en consecuencia componentes por lo que el trabajo de documentar nuestros elementos de interfaz puede ser más práctico al tener un historial de comportamiento del usuario.

Beneficios de documentar

Múltiples diseñadores pueden utilizar la documentación para generar de manera independiente.

Cuando los componentes o estilos de la librería se actualizan, todas las pantallas diseñadas se actualizan automáticamente.

Se evitan diseñar componentes duplicados con diferentes aspectos, esto favorece la consistencia en el diseño.

¿No sé cómo se llama el elemento de mi interfaz?

No te preocupes, te compartimos algunos recursos que te pueden ayudar para nombrar tus componentes:

⁠

Loading component.gallery⁠

⁠

Loading m3.material.io⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.