No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Documentación del UI Kit

13/17
Recursos

Aportes 8

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¿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

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

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).

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/

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:

  1. 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.
  2. 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.

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.

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

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