TAILZ Design System con Figma, Zeroheight y Zeplin

Para este curso utilicé un proyecto personal llamado PAWZ que trata sobre una red social de mascotas, algo muy parecido a instagram.

Proceso:
A partir del archivo compartido de Figma, fuí creando:

1. Styleguide:
-A partir de la tipografía ya establecida cree una escala para su uso
-Definí algunos colores que me hacían falta como por ejemplo los colores de feedback y como se aplican los colores en la interfaz.
-Utilicé los lineamientos de material design para crear los layouts.

2. Elementos
-Categoricé mis iconos y definí algunas casos y estados en un solo icono solo para visualizarlo en la documentación
-Definí botones primarios y secundarios aunque solo se utiliza el primario en las pantallas.

3. Componentes
-Cree los componentes necesarios para poder construir el home de mi proyecto.

4. Patterns
-Uno de mis componentes es una search bar, por lo que cree como se visualiza en pattern de busqueda en la plataforma.

5. Screens
-Represente el home en los diferentes tamaños de pantallas definidas por material design, desde mobile hasta monitores bastante amplios.

6. Guidelines
-Cree algunas reglas de como se deben usar los componentes con ejemplos algo exagerados para que se pueda identificar que sí y que no se debe hacer.

A medida que iba generando el contenido, iba subiendolo y dandole formato en Zeroheight. Lo que más se gustó es que si después realizaba algún cambio en el Figma, podía actualizar la info que ya estaba arriba de Zeroheight lo que hizo trabajar con la plataforma algo bastante sencillo.

Esta es la liga para el Zeroheight: https://zeroheight.com/70628fed7/p/06cc01-tailz

En Zeplin documenté el Home en cada uno de los tamaños de la pantalla y los agrupé como variantes de pantallas para tener más ordenado mi archivo.

También en Zeplin pude documentar el pattern, aquí llamado flow, del proceso de busqueda. Estas pantallas también las agrupé como variantes y les dí su propia sección dentro del archivo.