Documentación del UI Kit

Clase 13 de 17 • Curso de Patrones y Componentes en Sistemas de Diseño

Clase anteriorSiguiente clase

María Guadalupe Mendoza Luna

student•

¿Qué debemos inlcuir?

Nombre del componentes
Descripción/Función
Estados (si hay)
Casos de uso
Buenas y malas prácticas
Bonus para devs: Code sandbox

Yusting Andrés Mora González

student•

¿Qué es el Code SandBox? 😮

Leiver Choconta Gomez

student•

Yustin, un placer saludarte. en el caso para desarrolladores un SandBox es un entorno de pruebas externo del entorno de producción. Los beneficios en esencia hacer QA de componentes y validar sus funciones.

Saludos!

María Guadalupe Mendoza Luna

student•

Beneficios de la documentación Ayudará a todas las personas que trabajan con el sistema a:

Tenerlos localizados
Entender su función
Conocer los casos de estudio

Jorge Trujillo

student•

Este es una documentación que considero debe llevar cada componente:

Nombre del componente
Tipo de componente (según modelo atómico)
Descripción del componente -Reglas de uso del componente.
Variaciones y tipologias.
Estados
Como luce en temas light y dark.
Comportamiento responsive (mo se comporta en desktop, tablet y web mobile).
Anatomía y especificaciones de medidas.
Especificaciones de Interacción.
Accione de teclado (como se usa el componente con teclado).
Indicador de foco del componente.
Etiquetas aria de roles y propiedades.
Lectura de voz para asistentes de lectores de pantalla (para casos donde nuestro usuario es ciego).

Marta Monterde Alonso

teacher•

Es una documentación muy completa, Jorge. Este es el ideal que debemos perseguir. :D Muchas gracias por este valioso aporte!

Diego Perdomo

student•

Si su sistema tiene tablas, piensen en cómo van a cambiar las flechas de desplazamiento del contenido (esas que nos dicen si estamos en la sección 1, 5, 10 etc), dependiendo de la cantidad de resultados o de la sección donde estemos. . Ejemplos:

Si sólo hay 5 resultados el sistema. La tabla ya muestra toda la información posible, por lo cuál el sistema no tiene porque mostrarle al usuario las flechas de desplazamiento, ya que no hay ningún lugar a donde dirigirse.
Si estamos en la última sección, el sistema no tiene que mostrarnos un botón para movernos adelante, ya que ya no hay más resultados en ese lugar, pero sí se debería de ver que lo podemos hacer hacia atrás. .

Pueden usar la función de variantes de componentes de Figma para hacer los diseños para cada caso de uso.

Leiver Choconta Gomez

student•

Excelente aporte!

Angela Illiano

student•

Una de las herramientas que me parece que tiene mucho potencial para documentar es Zeroheight (Además tienen unos ejemplos de uso geniales)

También tienen un blog donde dedican una seción completa asociada a los sistemas de diseño: https://zeroheight.com/blog/tag/design-systems/

Pedro Isaac Aguilar

student•

Opciones para documentación del UI Kit: Dentro de tu UI Kit, con Figma, tenemos 3 opciones para documentar:

URL´s directas a nuestro Sistema de Diseño - Al añadir una URL se accede a información específica sobre un componente al seleccionarlo en Figma.
Páginas de archivo con documentación - Sobre todo cuando hay equipos grandes o se incorporan personas nuevas al equipo de Diseño que necesitan trabajar con el UI Kit.
Descripción breve del componente - Figma: posibilidad de añadir en los componentes una breve documentación sobre su uso.

Breylimar Andreina Castillo Monsant

student•

Opciones para documentar con figma

URLs directas a nuestro SD Añadir una URL: acceder a información específica sobre un componente al seleccionarlo .
Paginas de archivo con documentación Es una metodología muy buena, que es importante sobre todo cuando hay equipos grandes o se incorporan personas nuevas. . Tener explicaciones dentro del propio archivo de la librería puede ser muy útil para facilitar el aprendizaje de uso del Kit
Descripción breve del componente

Marta Monterde Alonso

teacher•

Buen resumen! ;)

Diego Perdomo

student•

Si nuestro producto tiene una App Web y su misma versión pero en móvil... ¿Necesitamos crear una sección para cada una (web y móvil)? Es decir, recrear todo pero sólo con los componentes de la versión móvil, ¿o es mejor separar en el mismo lugar los elementos, haciendo una categoría extra que sería para diferenciar los componentes y elementos de ambas versiones?

Dani Landa

student•

¡Hola Diego! Sí es correcto, se deben hacer dos presentaciones. ¿Por qué? Porque las medidas cambian y el equipo de desarrollo las va a necesitar :)

¡Saludos!

Diego Perdomo

student•

Muchas gracias Dani :)

Yusting Andrés Mora González

student•

¿Cómo puedo generar un link de un componente en Figma?

Diego Perdomo

student•

Hola Yustig. Una pregunta, ¿para qué necesitas generar el link? Hay una forma de añadir links a componentes pero no estoy seguro si es lo que necesitas.

Yusting Andrés Mora González

student•

@diegoperdomo No puedo responderte directamente, así que me tocó en un comentario aparte XD, espero y te llegue.

Lo necesitaba para poder hacer una documentación más completa de mis componentes, pero ya alguien me dio una solución hace tiempo y ahora sé como se hace, igual muchas gracias Diego! 😁

Emanuel Panarello

student•

Comporta cpatura de la documentación del UI Kit para un producto en fase de MVP