Código con diseño: cómo creamos una herramienta para exportar prototipos de reacción desde croquis

Todos los años, justo antes de las vacaciones, dedicamos una semana de nuestro tiempo en Tictail a hacer algo que no es parte de nuestro trabajo normal. A esto le llamamos la Semana Demo, y es una gran oportunidad para explorar nuevas ideas y colaborar con personas con las que generalmente no puede trabajar. Esta puede ser una nueva característica experimental del producto, una mejora del proceso de una empresa, un mapa LED de compras en vivo o cualquier otra cosa que mejore Tictail. Sin embargo, como su nombre lo indica, debe ser algo que se pueda demostrar al final de la semana.

Este año, yo y el diseñador Petter Nilsson decidimos explorar la posibilidad de construir una herramienta que conecte los flujos de trabajo entre diseño y desarrollo. Más específicamente, queríamos crear una herramienta que pueda exportar nuestros diseños de Sketch a aplicaciones React totalmente interactivas. Como React Sketch.app de Airbnb, ¡pero al revés!

Ahora esto puede sonar como un gran proyecto para terminar en solo una semana, pero decidimos un par de limitaciones de la herramienta para que esto sea posible:

  • El diseño en Sketch solo puede consistir en símbolos predefinidos que se asignan a nuestros componentes React UI ya implementados.
  • El código exportado solo servirá como un prototipo interactivo para mostrar el diseño de la aplicación y los flujos entre diferentes pantallas, similar a lo que Framer pretende hacer. El código se puede usar como punto de partida para la implementación de producción, pero no contendrá datos de producción reales ni lógica comercial.
  • Es posible exportar un diseño receptivo, pero el diseñador tendrá que hacer el trabajo pesado de descifrar la estructura de filas y columnas definiendo aquellos como grupos con nombre en Sketch.

Esto es lo que terminamos al final de la semana:

Teniendo en cuenta el tiempo limitado que logramos llegar bastante lejos en la visión que nos propusimos lograr. En esta publicación de blog intentaré dar una descripción de alto nivel de cómo creamos esta herramienta.

Lectura de archivos de croquis

Con el nuevo formato de archivo abierto de Sketch, un archivo de Sketch es solo una carpeta comprimida con archivos JSON (y cualquier imagen de mapa de bits que se haya utilizado en el diseño). Para poder acceder fácilmente a esta información y obtener la recarga automática vista anteriormente, creé un cargador Webpack personalizado. El cargador descomprime el archivo Sketch en la memoria y devuelve los archivos JSON en un solo objeto:

{
  documento: {...},
  meta: {...},
  usuario: {...},
  páginas: {...},
}

La parte más interesante aquí es el objeto de páginas, que contiene cada página en el documento de Sketch como un árbol de capas. Una capa puede ser un grupo, componente de texto, símbolo, rectángulo, etc., y cada capa posiblemente tenga más capas secundarias.

El cargador también utiliza la API emitFile de Webpack para hacer que cualquiera de las imágenes de mapa de bits esté disponible por sus rutas en el servidor de desarrollo. Por último, dado que la mayoría de los datos de texto se almacenan como listas binarias, desempaqueta estos campos para que sean legibles en el cliente. Puede ver el cargador en su totalidad en este Gist.

Componentes y accesorios

Ahora que accedemos a los datos de Sketch, podemos comenzar a asignarlos a los componentes React. Afortunadamente, dado que los datos en Sketch están estructurados como un árbol de capas, se traducen limpiamente al árbol de componentes React que queremos crear. Simplemente podemos atravesar el árbol recursivamente y crear el componente Reaccionar correspondiente para cada capa que encontremos.

Una capa en Sketch es, en su mayor parte, un Grupo (una carpeta de capas secundarias) o un Símbolo predefinido (por ejemplo, un botón o un cuadro de selección). También tenemos un manejo especial para las capas de imagen y texto. Los grupos siguen una convención de nomenclatura acordada que podemos analizar para asignarlos a los componentes del contenedor con espaciamiento y accesorios de alineación.

Para poder configurar todos los accesorios de los componentes de la interfaz de usuario, abusamos ligeramente de la función Anulaciones de símbolos de Sketch. En el siguiente ejemplo, tenemos un campo de etiqueta que se representa visualmente en el documento de Sketch, pero también tenemos una serie de campos ocultos que solo se usan en el componente React asignado.

Estos campos se configuran automáticamente desde la opción seleccionada en el campo desplegable. El símbolo de botón que creamos en Sketch viene con varios tipos y estados diferentes, por lo que puede seleccionar, por ejemplo, entre botones secundarios y primarios, y si el botón está deshabilitado o no.

Diseño

Si bien hubiera sido muy fácil leer las dimensiones y coordenadas del documento de Sketch y posicionar absolutamente todo, decidimos que una característica importante de la herramienta era la capacidad de hacer que la aplicación exportada respondiera.

A menudo nos encontramos con situaciones en las que tenemos un diseño hermoso para los tamaños estándar de dispositivos móviles, tabletas y computadoras de escritorio, pero una vez que comience a cambiar el tamaño de la ventana entre estos puntos de interrupción, puede encontrar varios problemas que no se anticiparon en el diseño. Esto sucede porque el diseñador no tiene las herramientas para ver el diseño en todos los tamaños intermedios posibles antes de que el desarrollador lo implemente.

Para hacer esto posible, decidimos que depende del diseñador estructurar el diseño en términos de filas y columnas que se adhieran a un diseño de cuadrícula estándar de 12 columnas. Esta tarea es algo que generalmente se deja al desarrollador cuando es hora de implementar el diseño, pero dadas las herramientas adecuadas tiene más sentido tener este paso ya resuelto en el proceso de diseño.

Todo lo que el diseñador debe hacer es crear grupos llamados Fila y Columna dentro de los cuales se colocan los elementos. Al igual que con la mayoría de los diseños de cuadrícula, una fila puede consistir en varias columnas, y las columnas pueden contener sus propias filas anidadas, continuando hacia abajo recursivamente tanto como lo desee. Cuando el código recorre esta estructura, puede detectar automáticamente los tamaños previstos para las columnas, y al observar los diferentes tamaños de pantalla para los que hay una mesa de trabajo, podemos asignar estos valores a sus puntos de interrupción correspondientes.

Beneficios

La forma en que React le permite expresar su IU de manera declarativa realmente abre la posibilidad de crear herramientas como estas. Una vez que haya implementado los componentes de la interfaz de usuario que son sus componentes básicos de la aplicación, tiene mucho sentido usar una herramienta visual para trabajar con el diseño en lugar de un editor de código. Los editores de código siguen siendo geniales cuando hacen un trabajo pesado de programación, como implementar la lógica de su negocio, pero creo que nosotros, como desarrolladores, no deberíamos tener miedo de comenzar a adoptar más herramientas visuales que puedan manejar parte del trabajo duro de la programación para nosotros. .

Tener un flujo de trabajo más estrechamente integrado entre el diseño y el desarrollo conlleva algunos beneficios enormes:

  • El ciclo de retroalimentación para los diseñadores se acorta enormemente, ya que no necesitan esperar la implementación real o construir prototipos utilizando otras herramientas para probar la experiencia del usuario.
  • El tiempo dedicado al diseño contribuye al código de producción, ya que se puede ahorrar mucho tiempo de implementación trivial basando el código en el trabajo que el diseñador ya ha puesto en la definición del diseño y los componentes.
  • Al tener un mapeo uno a uno entre los elementos de la interfaz de usuario en el diseño y los componentes React implementados, el diseñador puede comprender mejor dónde se puede reutilizar el código actual y dónde se deben implementar los nuevos componentes.
  • Dar las herramientas para definir cómo debe comportarse una aplicación de manera receptiva le permite al diseñador contribuir a descubrir cómo los componentes encajan en la cuadrícula en diferentes tamaños, en lugar de dejar toda esa responsabilidad al desarrollador.

Avanzando

Si bien la herramienta que creamos durante esta semana nos permitió previsualizar rápidamente nuestro diseño como un prototipo interactivo, nunca llegamos a la funcionalidad de exportación real. Sin duda, crear la herramienta fue una experiencia de aprendizaje divertida, pero el resultado final no fue mucho más que una prueba de concepto.

Dado que la herramienta está fuertemente acoplada a nuestros propios componentes de interfaz de usuario, desafortunadamente no hay mucho que podamos compartir con el resto del mundo. Pero no temas, ya hay un montón de herramientas interesantes de código abierto que están comenzando a aparecer en este espacio:

Será interesante seguir el progreso de estas herramientas, y estamos entusiasmados de ver cómo podemos incorporar esto en nuestro flujo de trabajo de diseño y desarrollo frontend.