Hay una conversación que se ha estado filtrando desde que he estado en la industria del diseño y desarrollo web. Se centra en el conflicto entre las herramientas de diseño y las herramientas de desarrollo. El producto final del diseño web suele ser una maqueta. El viejo chiste decía que los desarrolladores web crean sitios web y los diseñadores web pintan los sitios web. Esa desconexión es una fuente de inmensa fricción. ¿Cuál es la fuente de la verdad?
¿Qué pasaría si realmente pudiera haber una única fuente de verdad? ¿Qué sucede si la herramienta de diseño funciona exactamente con el mismo código que el sitio web de producción? El último capítulo de esta conversación épica es UXPin.
Vamos a configurar los hechos para que puedas ver cómo se desarrolla todo esto.
UXPin es una herramienta de diseño basada en código y en el navegador.
UXPin es una poderosa herramienta de diseño con todas las características que esperarías, particularmente enfocada en el diseño basado en pantallas digitales y la creación de prototipos avanzados.
El hecho de que esté basado en código es muy bueno aquí. El diseño de sitios web con todos los componentes visuales realmente enraizados en el código acerca el diseño mucho más al producto final real. Lo que diseñe no solo se verá como un sitio web o una aplicación, sino que también funcionará como tal. Por ejemplo, un campo de entrada no es un cuadro estático con un contorno, pero le brindará la experiencia real de llenarlo con texto.
El diseño basado en código ya proporciona todas las especificaciones para cada elemento, como con este componente de tarjeta; colores exactos (en los formatos correctos), así como las dimensiones exactas en píxeles, etc. En algunos casos, incluso se puede extraer el código correcto exacto del componente de la interfaz de usuario para su desarrollador.
Esto lo presenta muy bien Ania Kubów en un video sobre UXPin.
Hace más de una década, Jason Santa Maria pensó mucho en cómo sería una herramienta de diseño de próxima generación. ¿Podríamos simplemente usar el navegador directamente?
No creo que el navegador sea suficiente. Un diseñador web saltando al navegador antes de abordar los problemas creativos y de mensajería es similar a un arquitecto martillando piezas de madera y luego midiendo. El proceso imaginativo se ve interrumpido por las herramientas disponibles; y es esa imaginación, o chispa, al comienzo de un diseño que marca el camino para todo lo que sigue.
Jason Santa Maria, “Una aplicación de diseño web real”
Quizás no sea el navegador directamente, pero una herramienta basada en código que haga que la interfaz de usuario funcione como su sitio web o aplicación podría ser lo mejor de ambos mundos:
Las páginas web son espacios vivos y dinámicos donde la más mínima interacción de un visitante puede cambiar el alcance de un sitio completo. […] Debido a que no estamos lidiando con un medio estático, debemos poder diseñar para las interacciones y los paisajes cambiantes de una página web. […] una aplicación necesita ver elementos en lugar de bloques de color o texto. Photoshop, Illustrator y Fireworks tienen algunas funciones de bajo nivel en este sentido, pero la necesidad de un manejo más dinámico y no destructivo es clara.
Puede trabajar en sus propios componentes de React en UXPin.
Aquí es donde el única fuente de verdad la magia puede suceder. Una cosa es si una herramienta de diseño puede generar un componente React (o cualquier otro marco). Ese es un buen truco. Pero es probable que sea un viaje de ida. Los componentes en los proyectos del mundo real están llenos de otras cosas que no son completamente del dominio del diseño. Tal vez un componente use un enlace para devolver los permisos del usuario actual y deshabilitar un botón si no tiene acceso. El botón desactivado tiene un elemento de diseño, pero la mayor parte de ese código no lo tiene.
No es práctico tener una herramienta de diseño que no pueda respetar otro código en ese componente y esencialmente dejarlo solo. Esencialmente, la herramienta de diseño no es tan útil si exporta componentes como código pero no permite a los diseñadores importar esos componentes de UI en primer lugar.
Aquí es donde entra en juego UXPin Merge.
Ahora, justo es justo, esto va a tomar un poco de trabajo para configurar. Puede tomar solo un par de horas, o puede tomar algunas semanas para un sistema de diseño completo. UXPin, por ahora, solo funciona con React y usa una configuración de paquete web para integrarlo.
Una vez que te has puesto en marcha, los componentes que usa en UXPin son literalmente los componentes que usa para construir su sitio web de producción.
Realmente es bastante impresionante ver una herramienta de diseño digerir componentes preconstruidos y permitir que se usen en un lienzo completamente nuevo para la creación de prototipos.
UXPin lo ayuda a implementar esto en su proyecto, que incluye:
- Documentación sobre la integración de sus propios componentes
- Ejemplo de repositorio: uxpin-merge-boilerplate
Como debería, es probable que influya en la forma en que construye los componentes.
Los componentes tienden a tener accesorios, y los accesorios controlan cosas como el diseño y el contenido en su interior. UXPin le brinda una interfaz de usuario para los accesorios, lo que significa que tiene control total sobre el componente.
<LineChart
barColor="green"
height="200"
width="500"
showXAxis="false"
showYAxis="true"
data={[ ... ]}
/>
Sabiendo eso, es posible que tenga una interfaz de utilería para sus componentes que le brinde mucho control de diseño. Por ejemplo, integrando el cambio de tema.
Todo esto es aún más rápido con Storybook.
Otra herramienta muy popular en JavaScript-components-land para probar y construir sus componentes es Storybook. No es una herramienta de diseño como UXPin, es más como un zoológico para sus componentes. Es posible que ya lo tenga configurado, o también puede encontrar valor en el uso de Storybook.
¿La gran noticia? UXPin Merge funciona maravillosamente junto con Storybook. Hace que la integración sea súper rápida y fácil. Además, es compatible con cualquier marco, como Angular, Svelte, Vue, etc., además de React.
Mira qué rápido:
El CEO de UXPin, Marcin Treder, tenía una visión sólida:
¿Qué pasaría si los diseñadores pudieran usar los mismos componentes que usan los ingenieros y todos estuvieran almacenados en un sistema de diseño compartido (con documentación y pruebas precisas)? Muchos de los frustrantes y costosos malentendidos entre diseñadores e ingenieros dejarían de ocurrir.
Y un plano:
- Conéctese al repositorio de Git o a la biblioteca Storybook.
- Importe componentes desde allí a la herramienta de diseño UXPin.
- Todos los cambios en el repositorio se sincronizarán automáticamente en UXPin Watch para cualquier cambio en el repositorio y sincronizará esos cambios en el editor visual.
- Deje que los diseñadores diseñen y entreguen especificaciones precisas y un diseño completamente funcional a los desarrolladores.
Y eso es lo que han conseguido aquí.
Pruebe la combinación de UXPin