Cursos Empresas Blog Live Conf Eventos Precios

0:003:26

Documentación del UI Kit

Curso de Patrones y Componentes en Sistemas de Diseño

Clase 13 de 16

Clase 13 / 16

Comentarios (10)10 comentarios

María Guadalupe Mendoza Luna

Hace 5 años

¿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

¿Qué es el Code SandBox? 😮

Leiver Choconta

Hace 4 años

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!

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

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

Profesor

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

Diego Perdomo

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.

Excelente aporte!

Angela Illiano

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

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

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

Buen resumen! ;)

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

¡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!

Muchas gracias Dani :)

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

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.

@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

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

Documentación del UI Kit

Progreso del curso

Introducción

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD