Alineación de Patrones entre Diseño y Desarrollo

♪♪ {{^}}♪♪ Soy Jake. Soy un defensor de desarrolladores en Figma. Para aquellos que no lo saben, Figma es una plataforma para que los equipos diseñen y construyan productos juntos, construida en la web. Un producto bastante genial si lo digo yo mismo. Antes de esto, fui ingeniero de software durante 12 años. Recientemente estuve trabajando en una biblioteca de componentes de React y TypeScript para una plataforma de reservas de restaurantes. Pero basta de eso. Solo tenemos tanto tiempo. Así que voy a hablar sobre la alineación de patrones entre diseño y desarrollo.

Así que este cubo aquí representa un patrón. Esto podría ser un token, un componente, una página. Es un concepto que se comparte tanto en diseño como en desarrollo mientras pensamos en cómo vamos a construir esta cosa juntos y hacerla realidad. El diseño a menudo mira el efecto deseado de este patrón. ¿Cómo se puede presentar de una manera que sea efectiva y convincente? Y por supuesto, como sabemos, como ingenieros, ¿verdad? estamos pensando en esa superficie, pero también estamos pensando en la construcción implícita e inferida, lo que está debajo del capó, detrás de escena. Y así, mientras los colaboradores buscan construir este patrón juntos, venimos de diferentes puntos de origen.

Y es importante reconocer eso cuando pensamos en cómo colaboramos juntos. Mientras viajamos hacia este destino compartido, ¿verdad? a menudo se piensa que el objetivo es trabajar lado a lado. Pero como la mayoría de ustedes saben, siempre hay este espacio percibido entre nosotros. Una pequeña referencia a Flexbox. A menudo llamamos a ese espacio la brecha, ¿verdad? Y esta es la brecha entre diseño y desarrollo, y vemos el objetivo como cerrar esa brecha. Pero esto a menudo es muy difícil y se siente más aspiracional que realista. Así que tengan paciencia conmigo por un segundo. Vamos a hablar sobre el principio del menor tiempo de Pierre Dufourmat. Así que para aquellos que no lo saben, Pierre Dufourmat, un producto del siglo XVII, un poco de polímata, genio, pensó en muchas cosas. Una de las cosas que hizo fue observar el comportamiento de la luz. Y si no están familiarizados con este concepto, es bastante, es algo en matemáticas, pero en física, pero basándose en observaciones previas, se dio cuenta de que la luz pasa entre dos puntos en el menor tiempo posible mientras viaja a través de diferentes medios, y tiene que ver con la refracción, ¿verdad? Y ese camino es el camino óptimo. La forma en que necesitaba escuchar esto, lo vamos a hacer ahora mismo. Así que aquí estamos. Estamos en el océano, ¿verdad?

Entonces, lo que puedes hacer, la opción B aquí, es reducir la cantidad de natación tanto como puedas, pero para hacer eso, tienes que agregar distancia, distancia total. Y así, lo que Fermat observó es que el camino óptimo está en algún punto intermedio, y depende de factores como la fricción o las olas o la arena o la condición física del salvavidas. Y estos factores, entender cuáles son estos factores, te dicen cuánta distancia necesitas agregar para alcanzar el camino óptimo.

Así que volvamos a esto. Aquí estamos. ¿Qué fuerzas están actuando en este escenario? Bueno, creo que la mejor manera de pensarlo es casi como una atracción gravitacional de vuelta a nuestros puntos de origen, ¿verdad? Los desarrolladores bajando, el diseño subiendo. La clave para la colaboración es entender cuándo las personas con las que estás colaborando están entrando en sus áreas de mayor resistencia, cuando estás agregando la mayor distancia para tus compañeros de equipo, y la realidad es que a menudo un poco de concesión puede ser muy útil. Una adición para ti podría ser una reducción para tu equipo. Así que necesitamos entender esas fuerzas para hacer feliz a Pierre.

Muy bien, hablemos de esto en la práctica. Así que aquí está el elemento de UI favorito de todos, el botón. Aburrido pero hace un gran trabajo al explicar estas cosas de manera simple. Así que clásicamente, si queremos tener un ícono en este botón, en Figma la forma en que lo pensamos es un toggle de visibilidad booleana porque ese nodo necesita existir, y por lo tanto necesitamos desactivar esa visibilidad con un toggle booleano. Pero en el código lo pensamos como una propiedad opcional. Tan pronto como eso se vuelve verdadero, obtenemos una segunda propiedad en Figma. Es un intercambio de instancia es el tipo de propiedad. Y esto es como ergonómicamente para los diseñadores es una realidad increíble para los diseñadores. Les ayuda a adoptar el sistema de diseño, entender lo que está pasando. Es fundamental para la estructura de cómo se crea este archivo de diseño. Pero en el código solo estamos agregando el ícono, ¿verdad? Y así, la forma en que pensamos en esto es similar pero un poco diferente. Otro ejemplo de esto es la variante de estado. Los diseñadores necesitan dar el hover, el focus, ¿verdad? El estado predeterminado que necesita ser diseñado y existir en el componente. Pero eso es como CSS para nosotros en el lado de la ingeniería hasta que llegamos a deshabilitado. Y en este caso, es una propiedad booleana en el código, pero es una variante, un valor enumerado dentro del diseño. Y así, aunque estamos hablando de lo mismo, la realidad es que hay estas diferencias, ¿verdad? Y así, en cierto sentido, cuando volvemos a esto, estamos pensando de manera similar. Nombramos las cosas de la manera correcta. Lo llamamos un ícono y no otra cosa. Lo pensamos como deshabilitado, no otra cosa. Hemos optimizado esos caminos. Hemos dado un poco, recibido un poco.

Pero todavía tiene brechas, y ahí es donde entran en juego las herramientas. Así que rápidamente, en Figma, tenemos algo llamado Code Connect que esencialmente es una de esas herramientas que puede llenar esa brecha, esa brecha inevitable. Y la forma en que funciona es que permite a los equipos publicar fragmentos de código de componentes informados por el código a Figma que traducen entre la lógica de los componentes de Figma y la lógica en nuestro código.

La forma en que se ve, al igual que una historia de storybook o cualquier tipo de cosa que co-localizarías con tus componentes y tu base de código, tienes un archivo de Figma para el componente, y luego eso se publica en Figma con nuestras APIs. Entonces, cualquier ingeniero full-stack, ingeniero backend, quien sea que esté implementando frontend puede beneficiarse de no tener que pensar en la capa de presentación mientras están cargando todo el material funcional que están tratando de consumir cuando miran el diseño. La API es bastante sencilla. Cosas de Figma, cosas de código, ¿verdad? Y nos permite cerrar estas brechas, ¿verdad?, y transformar, ya sabes, valores primitivos de variantes en booleanos y ese tipo de cosas.

Y luego sacas el fragmento dinámico que quieres ver al otro lado. Ahora, los botones son súper simples. Puedes hacer algo así como plantillas recursivas, todo tipo de cosas. No tenemos suficiente tiempo para entrar en eso. Pasa por el stand, busca cosas en línea si estás en línea ahora mismo. Figma slash CodeConnect en GitHub, pregúntanos. Pero también, actualmente soportamos HTML, Web Components, Angular, Vue, React, obviamente, SwiftUI y Jetpack Compose.

Pero si eres, como, un fan de Svelte o un fan de Ember, lo que sea, háznoslo saber, danos tu opinión, porque nos encantaría soportar más lenguajes con CodeConnect. Muy rápido antes de irme, Simple Design System es una biblioteca de componentes de React que creé con un defensor de diseñadores en Figma. Básicamente muestra cómo todas las características de los sistemas de diseño de Figma pueden usarse junto con una base de código de React para formar una imagen completa de un sistema de diseño responsivo. Incluye un archivo de Figma con un montón de cosas, una aplicación React funcional, storybook, instancia de storybook autoalojada, integraciones de Figma que hacen cosas como tomar variables de Figma, transformarlas a W3C, diseño, token, borrador, especificación, JSON, y luego convertir eso a CSS. Así que tiene ejemplos de ese tipo de cosas. Y, por supuesto, cada componente en el sistema está respaldado con CodeConnect. Así que obtienes, ya sabes, tu definición de React, tu CSS con cosas fáciles de propiedad personalizada, y luego obtienes el CodeConnect allí también. Así que si estás interesado en eso, eso es figma.sds en GitHub. Nos encantaría recibir tus comentarios sobre eso. Y con eso, gracias. Si tienes preguntas, LinkedIn, jake.fun, contáctame. Te quiero.