¿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
Introducción
Lo que aprenderás sobre patrones y componentes en sistemas de diseño
Patrones en los SSDD
Diseño atómico
Principios de diseño
Introducción a los patrones en los SSDD
Patrones funcionales
Patrones perceptivos
Definición de patrones en tu sistema
Documentación de los patrones
Quiz: Patrones en los SSDD
Componentes en los SSDD
¿Para qué utilizar los componentes?
Tipos de componentes
Requisitos mínimos
Quiz: Componentes en los SSDD
UI Kit y SSDD
Consejos para el UI Kit
Documentación del UI Kit
Design Tokens
Resumen y despedida
Autoevaluación del Curso de Patrones y Componentes en Sistemas de Diseño
Quiz: UI Kit y SSDD
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 8
Preguntas 2
¿Qué debemos inlcuir?
Beneficios de la documentación
Ayudará a todas las personas que trabajan con el sistema a:
Este es una documentación que considero debe llevar cada componente:
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:
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:
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?