Charla sobre Diseño Tokens y Sistemas de Diseño

Presentación del Ponente

• Ponente: Juan Carlos, Front-end en Devinta Spain.
• Intereses: CSS, buenas prácticas, UX/UI.
• Experiencia: Desarrollador de sistemas de diseño.

Concepto de Design Tokens

• Definición: No son solo variables, son una metodología y arquitectura independiente de la tecnología.
• Objetivo: Escalar productos de forma sencilla y mejorar la comunicación entre diseño y desarrollo.
• Errores comunes: Confusión en cambios de diseño debido a malentendidos en nomenclaturas.

Sistema de Diseño

• Elementos clave:
  • Color, tipografía, espaciado.
  • Componentes: Diseñados a partir de decisiones de diseño.
  • Patrón de diseño: Atomic Design.
• Patrón de librería: Catálogo de componentes desarrollados con documentación.

Herramientas de Diseño

• Elección de herramientas: Adaptarse a las necesidades del equipo (Figma, Sketch).
• Recomendación: No usar Photoshop para sistemas de diseño modernos.

Creación de Design Tokens

• Proceso de definición:
  • Paleta de colores: Colores primarios, neutrales y de estado.
  • Tipografía y espaciado: Espaciado recomendado en base 8.
  • Otros tokens: Radio, sombras, bordes, etc.
• Construcción de componentes: Pensar en bloques de LEGO.

Integración en Desarrollo

• Tecnología agnóstica: Aplicable a cualquier framework o tecnología ( React, Web Components, etc.).
• Generación de variables: Exportar tokens para ser consumidos en cualquier aplicación.
• Flujo de trabajo:
  • Manual y automático: Con ayuda de plugins o herramientas como Style Dictionary.
  • Base de datos de tokens: Generada desde herramientas de diseño como Figma.

Uso de Figma

• API de Figma: Permite obtener datos y valores de diseño para crear tokens.
• Automatización: Cambios en Figma se reflejan automáticamente en el frontend.

Aplicación y Ejemplos

• Ejemplo práctico: Modificación de un tema web utilizando tokens y comandos.
• Repositorio: Disponible para descargar y probar.

Consideraciones finales

• Responsabilidad y comunicación: Colaboración crucial entre diseño y desarrollo.
• Recursos compartidos: Documentación y guías disponibles para seguir aprendiendo.

Preguntas del Público

1. Base 8 en diseño: Consistencia y uniformidad en diseño y desarrollo.
2. Uso de otras herramientas (Sketch, Zeppelin): Posible con limitaciones.
3. Integración en CICD: Posible con herramientas como Chromatic para verificar visualmente los cambios.

Agradecimientos y Recursos

• Agradecimientos a patrocinadores y organizadores del evento.
• Disponibilidad de documentación y recursos para profundizar en el tema.