En este módulo hemos creado los fundamentos de nuestro Sistema de Diseño. Ahora, es el turno de documentarlos para que sepamos cuáles son las pautas a seguir y que esta sea la fuente de verdad para nuestro equipo tanto de diseño como de desarrollo.
Pero antes, quiero compartirte estas dos charlas/tutoriales del canal oficial de Figma en YouTube sobre Documentación de un Sistema de Diseño por si deseas profundizar mucho más en este tema:
Building blocks: Diving into documentation
https://www.youtube.com/watch?v=fvfzwOAM-fA
Build it in Figma: Create a Design System V - Documentation
https://www.youtube.com/watch?v=Yp_qfB1FA0Y
Ahora sí, ¡comencemos!
Para documentar nuestro Sistema de Diseño, es importante que revisemos cuál es el objetivo y cuáles son las cosas que debemos incluir para cumplir con ese objetivo.
Inicialmente, lo que queremos es que nuestro equipo conozca los fundamentos del Sistema de Diseño y cómo y cuándo usarlos. Por esta razón, debemos incluir a nivel general:
- Título e introducción
- Descripción de uso
- Tokens
- Do and Don’ts
Esto puede variar dependiendo del tipo de fundamento (si es color, tipografía, etc.) y de lo que el equipo de diseño considere pertinente para el diseño. Esto puede tener varias iteraciones y no necesariamente debe estar 100% perfecto y completo en un inicio. Lo importante es hacer una descripción detallada que de una clara idea del fundamento: cuál es su intención, cuál es su uso, qué cosas se pueden hacer y que otras cosas no, cuáles son los tokens, ejemplos, entre otras cosas. Imagina que estás escribiendo una especie de tutorial para personas de tu equipo que ya puedan llevar tiempo o que apenas están comenzando.
Aquí te comparto el link de nuestro proyecto base para que puedas ver la documentación para cada fundamento:
https://www.figma.com/file/JuV5kuVhA1vz4iqaJPjRot/Foundations?node-id=1%3A2&t=x4i7XhCTvbmC99NQ-1
¡Cuéntame en los comentarios cómo te quedó esta documentación!
Nos vemos en el siguiente módulo en donde comenzaremos a crear los componentes de nuestro Sistema de Diseño.