¿Pueden encontrarse una herramienta de gráficos vectoriales y una de desarrollo web? La respuesta corta es no…
¡Abstraer el desarrollo web puede ser todo un reto! Desde los años 90 —¿te acuerdas de Dreamweaver?—, los desarrolladores han lidiado con sus complejidades. Por ejemplo, cada elemento HTML se apila de forma natural verticalmente, de arriba a abajo.
Además de este posicionamiento poco natural, es humano querer colocar elementos libremente en un lienzo, como lo harías en tu escritorio. Y para complicar las cosas, ¿qué es un "Div Block" o una "P"? Estos pequeños detalles desconocidos pueden desmotivar mucho y crear una curva de aprendizaje empinada en el desarrollo web.
Por otro lado, añadir formas, texto e imágenes a un lienzo resulta natural para cualquiera; ¡hasta mi abuela podría hacerlo! Nombres familiares como "Rectángulo", "Círculo" o "Texto" lo hacen aún más fácil. Estos son los bloques básicos de construcción de herramientas de gráficos vectoriales como Figma, Sketch o Adobe XD.
Definiciones:
Herramienta de desarrollo web: Una aplicación de software que permite a los usuarios crear, diseñar y desarrollar sitios web de forma visual, sin necesidad de escribir código manualmente.
Herramienta de gráficos vectoriales: Una aplicación de software diseñada para crear y editar diseños basados en vectores, como trazados vectoriales y puntos de anclaje, lo que permite obtener diseños escalables sin pérdida de calidad.
Sin embargo, las herramientas de gráficos vectoriales no captan la naturaleza dinámica e interactiva de la web. Por ejemplo, en la web los elementos tienen estados de "hover", "active" o "focus", que influyen en cómo los usuarios interactúan con botones, enlaces y otros componentes. Del mismo modo, los formularios van más allá de los marcadores de posición: requieren gestión de errores, flujos de validación y accesibilidad para garantizar que funcionen correctamente en un entorno de producción.
Además, la web es adaptable. Los sitios web suelen incorporar datos dinámicos: contenido que puede cambiar y que debe diseñarse para adaptarse a diferentes longitudes, estructuras y tipos. Se accede a la web desde distintos dispositivos: teléfonos, tabletas, monitores grandes y más. La interactividad puede ser muy compleja en la web, e implica carga de datos asíncrona, animaciones adaptables e interacciones de usuario intrincadas. En esencia, comprender y adoptar el entorno único de la web es fundamental para crear sitios funcionales, adaptables y accesibles en un contexto real.
Desarrollo web, pero de forma visual
Aquí entra Webflow.
Webflow es una plataforma de desarrollo visual que otorga superpoderes de desarrollo a todo el mundo. Esto significa que puedes crear sitios web sin tener que escribir código tú mismo. Lo que hace que Webflow sea tan potente es que está muy cerca de las primitivas del desarrollo web, lo que te permite construir sitios web escalables, seguros y hermosos.
Este poder visual tiene una pequeña pega: los usuarios de Webflow aún necesitan entender los estándares de desarrollo web, como HTML y CSS, para aprovechar al máximo la plataforma. Esto convierte a Webflow en la plataforma perfecta para cualquiera que esté interesado en crear para la web.
El viaje de un sitio web: desde la idea hasta la publicación
Crear un sitio web es un viaje aventurero: creativo, divertido y desafiante. Por lo general, comienza en una herramienta de gráficos vectoriales. Estas herramientas son perfectas para iterar ideas rápidamente, colaborar con tu equipo y explorar la creatividad. Como son simplemente una colección de formas reconocibles, es mucho más fácil y cómodo empezar por ahí.
El resultado práctico de empezar en una herramienta vectorial es que todas las ideas, la estructura del sitio web, el contenido y los recursos ya están presentes. Una vez que todas las partes interesadas están satisfechas con los diseños, llega el momento del siguiente paso. Esto implica transformar los diseños estáticos de la herramienta vectorial en un sitio web totalmente funcional. Supone añadir adaptabilidad, funciones de accesibilidad e interactividad: todos los elementos que hacen que un sitio web sea una experiencia en línea dinámica y atractiva.
Siguiente paso: empezar el desarrollo web
En el pasado, desarrollo web significaba "empezar a programar". Básicamente, convertir diseños estáticos en código. Hoy en día, la mayoría de las veces, desarrollo web significa convertir Figma a Webflow. Esto implica que los usuarios de Webflow tienen que convertir manualmente los diseños de Figma en sitios web de Webflow.
Esto es aburrido. ¡Súper aburrido! Tremendamente aburrido. Extremadamente... ya entiendes a qué me refiero.
Nuestra solución para esta aburrida tarea fue crear un motor de traducción que convierte automáticamente diseños de Figma en sitios web de Webflow.
El motor de traducción
Resulta que construir un sistema que traduzca de forma fiable dos "idiomas" diferentes es un desafío de ingeniería interesante. Para empezar, los elementos básicos de ambos son bastante distintos. Una herramienta coloca formas en un lienzo y la otra coloca elementos HTML en un lienzo para que el navegador los interprete.
Para los fines de esta entrada de blog, llamaremos a las formas y a los elementos HTML "nodos".
Esto significa que la representación de un nodo en Figma es completamente diferente a la representación de un nodo en Webflow.
Como ejemplo, aquí tienes una representación JSON parcial de un nodo de Figma:
{
"id": "node_id",
"parent": {
"id": "parent_id"
},
"name": "beautiful node",
"visible": true,
"opacity": 1,
"blendMode": "PASS_THROUGH",
"maskType": "ALPHA",
"effects": [],
"fills": [
{
"type": "SOLID",
"visible": true,
"opacity": 1,
"blendMode": "NORMAL",
"color": {
"r": 0,
"g": 0,
"b": 0
},
"boundVariables": {}
}
],
"strokes": [],
"strokeWeight": 1,
"strokeAlign": "OUTSIDE",
"strokeJoin": "MITER",
"strokeCap": "NONE",
"x": 0,
"y": 0,
"width": 1275.33056640625,
"height": 590,
"absoluteBoundingBox": {
"x": 7430.74609375,
"y": 1338.5733642578125,
"width": 1275.33056640625,
"height": 590
},
"type": "TEXT"
}
Y aquí tienes una representación JSON parcial de un nodo de Webflow:
{
"id": "node_id_1",
"tag": "div",
"classes": [
"class_id_1",
"class_id_2"
],
"children": [
"node_id_2"
],
"type": "Navbar",
"data": {
"tag": "div",
"navbar": {
"animation": "default",
"collapse": "medium",
"docHeight": false,
"duration": 400,
"easing": "ease",
"easing2": "ease",
"noScroll": false,
"type": "wrapper"
},
"attr": {
"href": "#"
},
"link": {
"mode": "external"
}
}
}
Bastante diferentes, ¿verdad? Son distintos porque ambas herramientas resuelven problemas diferentes. Fíjate en cómo los nodos de Figma tienen propiedades como `absoluteBoundingBox` y `blendMode` —relevantes para una herramienta de diseño gráfico—, mientras que los nodos de Webflow tienen propiedades específicas para el desarrollo web, como `classes` o `navbar`.
Para resolver este desafío, primero necesitamos una forma de leer los nodos de Figma. Para ello, desarrollamos nuestro propio plugin de Figma. Nuestro primer enfoque fue utilizar el sencillo concepto de copiar y pegar.
Primer enfoque: copiar y pegar
Copiar y pegar es, posiblemente, tu atajo más utilizado. ¿Cuántas veces has copiado y pegado algo hoy? Vamos, cuéntalas. Usar copiar y pegar significa que estamos aprovechando un flujo de trabajo muy común para traducir dos idiomas completamente diferentes. Necesitamos algunas barandillas de seguridad.
La experiencia de usuario es sencilla: abre el plugin de Figma, selecciona una capa en el lienzo, haz clic en "Copy to Webflow" y pégala en tu sitio de Webflow. ¡Pum! Ahí lo tienes: tus diseños directamente en Webflow.
Parece bastante sencillo. Sin embargo, encontramos tres desafíos principales que son indicadores claros de que casar una herramienta vectorial con una de desarrollo web es difícil.
Duplicación de clases
Para hacer esto realidad, nuestra hipótesis principal es que cada capa de Figma se convertirá en una clase CSS. Esto significa que cualquier nombre que le des a tus capas corresponderá al nombre de la clase en Webflow.
Un efecto secundario de esta decisión es que puedes duplicar y saturar fácilmente tus clases CSS en el lado de Webflow. Principalmente porque si dos capas de Figma se llaman "Botón" pero tienen estilos diferentes —por ejemplo, una tiene fondo rojo y la otra fondo azul—, Webflow duplicará las clases y generará una nueva llamada "Botón 2". Las clases CSS deben ser únicas: una clase, un conjunto de estilos.
Elementos de diseño
Otro desafío interesante es cómo organizar los elementos que vienen de Figma. Para evitar resultados no deterministas, decidimos traducir solo las capas con auto layout —una forma de reproducir el módulo de diseño de caja flexible CSS (Flexbox) dentro de Figma. Esto significa que podemos traducir fácilmente las propiedades de diseño de auto layout a CSS Flexbox, proporcionando una expectativa clara del resultado.
Sin esta guía, sería extremadamente difícil inferir correctamente cómo posicionar los nodos en la página web. Una vez más, las herramientas vectoriales tienen un motor de posicionamiento inherentemente libre, mientras que el desarrollo web cuenta con el contexto de apilamiento.
Formas y vectores
La base de nodos de Figma se fundamenta en formas simples como rectángulos, círculos o estrellas. También puedes añadir tu propia forma personalizada usando la herramienta "Pluma". Todas estas primitivas tienen un tipo implícito de `Vector`. Pues bien, en el desarrollo web, estas formas suelen representarse como SVG.
Esto significa que debemos transformar explícitamente todos los nodos `Vector` a SVG al traducir nodos de Figma a Webflow. Para añadir más complejidad a la traducción, los usuarios de Figma suelen "agrupar" sus capas. Para mantener la coherencia, decidimos invitar a los usuarios a convertir sus capas de grupo en "auto layout"; de lo contrario, tendremos que convertirlas en SVG.
Para mitigar algunos de los desafíos anteriores, decidimos aprovechar las primitivas de sistemas de diseño que ofrecen Webflow y Figma (componentes y variables) y desarrollamos una nueva forma de llevar tus diseños a Webflow: la sincronización de sistemas de diseño.
Segundo enfoque: Sincronización de sistemas de diseño
En Webflow, siempre estamos lanzando activamente nuevos productos. Hace aproximadamente un año lanzamos Variables y renovamos las aplicaciones de Webflow con nuevas API para el diseñador. Fue el momento perfecto para hacer evolucionar nuestro producto de Figma a Webflow y permitir que nuestros usuarios sincronicen sus sistemas de diseño directamente con Webflow.
Nos propusimos crear una nueva forma de llevar las primitivas de tu sistema de diseño, como componentes y variables, a Webflow. El objetivo era que Figma fuera la fuente de verdad y facilitar la actualización de componentes y variables. Para hacerlo realidad, lanzamos una nueva aplicación de Webflow llamada "Figma to Webflow".
El motor de traducción para la sincronización de sistemas de diseño es una instancia del que usamos para copiar y pegar. Esto significa que el trabajo pesado de recopilar datos de Figma ya está hecho.
El mayor desafío de ingeniería con este producto fue gestionar el estado de los datos transferidos. Queremos saber si tus componentes o variables ya existen para evitar duplicados en Webflow. También queremos que esta experiencia sea lo más fluida y en tiempo real posible. Para ello, creamos un sistema para conectar ambas aplicaciones (el plugin de Figma y la aplicación de Webflow) en tiempo real.
Sincronización en tiempo real
Para conectar ambas aplicaciones usamos WebSockets. Los WebSockets son un protocolo de comunicación que proporciona canales de comunicación bidireccionales a través de una única conexión TCP entre un cliente (como un navegador web) y un servidor. A diferencia de las solicitudes HTTP tradicionales, que son unidireccionales y requieren solicitar actualizaciones constantemente, los WebSockets permiten un intercambio de datos continuo y en tiempo real.
La sincronización de datos en tiempo real se realiza mediante WebSockets. Específicamente, el uso de la función de mensajería (publicar/suscribir) permite la distribución de mensajes desde un editor a múltiples suscriptores en tiempo real. También usamos la detección de presencia para rastrear el estado en línea de los usuarios en tiempo real, lo que nos permite ver quién está conectado, desconectado o sin conexión. Esta función se suele utilizar en aplicaciones como chats o juegos multijugador. Intentamos aprovechar estas tecnologías para crear una experiencia única para nuestros usuarios.
Importación de tu sistema de diseño
Cuando un usuario sincroniza un componente o variable con Webflow, primero debemos determinar si ese componente o variable ya existe en Webflow. Si es así, comprobamos si hay cambios o actualizaciones en sus estilos o propiedades. Básicamente, asignamos los datos existentes de Webflow a los datos entrantes de Figma, permitiendo a nuestros usuarios controlar lo que van a importar al resaltar las diferencias.
Crear esta "pantalla de diferencias de estilo" requirió comparar cada nodo de Figma con los nodos correspondientes en Webflow. Sin embargo, dado que las estructuras de datos de estas dos herramientas son bastante diferentes, necesitábamos crear una estructura común que pudiera representar datos de ambos entornos.
La estructura que utilizamos es la siguiente:
{
"id": "",
"name": "",
"styles": {},
"isInstance": false,
"imageUrl": "",
"assetId": "",
"variables": {},
"children": []
}
Analizamos los datos tanto de Figma como de Webflow para que encajen en esta estructura común. El resultado es una matriz de nodos de Figma y otra matriz de nodos de Webflow. El siguiente paso es comparar estas matrices para identificar qué nodos difieren en cada componente. El mismo proceso se aplica también a las variables.
Este proceso nos permite informar a los usuarios sobre las actualizaciones que van a importar, asegurando que tengan un control total sobre los cambios realizados en su proyecto de Webflow. Al resaltar las diferencias en estilos, propiedades y variables, los usuarios pueden tomar decisiones informadas sobre qué conservar, modificar o descartar. Este nivel de transparencia y detalle mejora, en última instancia, la eficiencia de todo el proceso.
Próximos pasos
Todo este proceso de convertir una herramienta de gráficos vectoriales en una de desarrollo web implica fusionar dos paradigmas fundamentalmente distintos: el diseño visual estático y el desarrollo web dinámico. Las herramientas de gráficos vectoriales se centran en la iteración del diseño, el color y la tipografía, creando representaciones visuales de alta fidelidad. Por otro lado, el desarrollo web se enfoca en construir sitios funcionales e interactivos que se adapten a diversos dispositivos y funcionen bien en distintas plataformas.
Creamos este motor de traducción para ayudar a nuestros usuarios a unir ambos mundos y acelerar su camino hacia la producción, dándoles superpoderes de desarrollo mucho antes. Mientras termino de escribir esta entrada de blog desde la comodidad de mi cocina, me muero de ganas por volver a programar. Estamos trabajando activamente en la segunda versión de este producto, a la que llamamos 'Figma to Webflow'.
Figma to Webflow es la evolución de ambos enfoques mencionados anteriormente. Tras recibir comentarios de nuestra comunidad y de miles de usuarios diarios, hemos simplificado la interfaz y la experiencia de usuario, consolidando las funciones en una interfaz más ágil.
Puedes probarlo aquí.
Si te interesa unirte a nuestro equipo de producto e ingeniería en pleno crecimiento, visita nuestra página de empleo para saber más sobre Webflow y descubrir nuestras vacantes.
