Design Systems con React-Sketchapp
Un Sistema de Diseño a diferencia de una librería de Componentes visuales, una guía de estilo o un patrón de diseño ES el centro de la verdad que agrupa los elementos primitivos que permitirán a cualquier persona en el equipo a diseñar/desarrolla un cualquier elemento.
Los Sistema de Diseño permiten a los designers a reutilizar todos sus elementos y permitirles enfocarse en un nivel mas alto de creación y habilita a los ingenieros a componer features sin tener que romper accidentalmente con los parámetros que los designers compusieron para el equipo.
Painting with Code
React-Sketchapp es una biblioteca creada por Airbnb que habilita a designers e ingenieros a colaborar de forma intensiva en sistema de diseño que funcionen, y lo hace a través de React creando composiciones en Sketch.
Upgrading the current process
Los elementos en el diseño siempre sufren cambios a través del tiempo y se requiere un gran esfuerzo para que el equipo este siempre actualizado los entregables que se están trabajando
Una gran ventaja entre desarrollar diseñando con sketch-app es que cada cambio al sistema de diseño automáticamente actualiza todos los componentes ya que modificando la base todo el diseño se ve refactorizado en lugar de ir recomponiendo cada elemento por aparte, agilizando igualmente el proceso de que todo el equipo se sincronice con los nuevos parámetros.
Desventajas
- El efecto unicornio: El sentir que se requiere que cada persona en el equipo sepa diseñar y codificar puede ser una barrera.
- React es un requerimiento: React es súper popular pero no es de todos, existe Vue, Angular, Android y iOS
- Actualizar el diseño en Sketch: Sketch-app no es un camino de dos vías y requiere que los diseñadores tengan un entendimiento de lo que esta pasando en código
Algunas Soluciones
Si quieres aprovechar al máximo esta herramienta sin sentir que se limite a un grupo privilegiado de personas es que un sistema de diseño una vez compuesto puede siempre exportarse a cualquier otra herramienta una vez generado.
La base siempre es HTML/CSS siempre puedes traducir las propiedades de los objetos JSON y las estructuras de markup a cualquier librería para construir interfaces visuales
Como funciona React-Sketch en la comunidad de JavaScript Mérida
Como antecedente cuando comenzamos en la comunidad nosotros creamos accidentalmente un sistema de diseño, y es accidental por que no teníamos idea de que era un sistema de diseño como tal, solo sabíamos que si creábamos los elementos raíz de cada parte de la identidad de la comunidad
Enlistamos colores y tipografía. Así es como se ve:
Y en cada publicación y creación que tenemos de la comunidad tenemos que cuidar el cumplir con este sistema siempre.
Para la comunidad no es tan difícil ya que son imágenes que generamos una vez al mes y aunque el equipo no es grande no hemos tenido problemas en la capacidad productiva.
Cuando quisimos generar nuevos programas como Away from Javascript y Shipping Code comenzamos a tener mas problemas manteniendo la integridad del sistema de diseño en cada publicación, comenzamos a hacer el sitio web de Away from Javascript y Shipping Code.
Acción
Comenzar a implementar sketch-app es muy sencillo, siguiendo la guía del sitio oficial es muy directo
Para esto usamos el starter de profile-card
Instalación:
Necesitaras tener Node instalado.
curl https://codeload.github.com/airbnb/react-sketchapp/tar.gz/master | tar -xz — strip=2 react-sketchapp-master/examples/profile-cardscd profile-cardsnpm install
npm run render
Y solo tuvimos que remplazar algunos elementos clave (Migramos el objeto plano del sistema de diseño a React Context 😃)
Y comenzamos adaptando las tarjetas de los eventos a un componente de React.
Lo dividimos en un layout y un content para poder reutilizar el layout en cualquier otro tipo de card que podamos crear en un futuro
Finalmente, a través de un JSON que remplazamos con las platicas del mes
Pudimos generar de forma dinámica cada tarjeta conservando siempre los sistemas de diseño.
Conclusión
Con estoy no solo creamos un sistema que puede escalar a un nivel de organización, cerramos el gap entre el trabajo de un designer y un developer y creamos un sistema automatizado para generar elementos gráficos para las publicaciones en redes sociales.
Esperamos que disfrutes React Sketch.app tanto como nosotros en la comunidad. Cada día aprendemos a extender esta herramienta y siéntete libre de descubrir sus posibilidades y crear herramientas que trabajen para hacer tus procesos más productivos.
Todo el código podrás encontrarlo acá:
