Cómo la creación rápida de prototipos ayudó a marcar el inicio de una nueva era de Webflow Apps

Queríamos priorizar las necesidades de la creciente comunidad de desarrolladores y emprendedores que rodea a Webflow. Muchos de ellos encontraban formas creativas de sortear las limitaciones de nuestra API para lanzar productos potentes para la comunidad en general, y sabíamos que debíamos ofrecerles una mejor manera de construir sobre la plataforma Webflow.‍

Comenzamos como un grupo pequeño con un objetivo central:“¿Cómo construimos una base sólida, fiable y extensible para que los desarrolladores puedan integrar experiencias de aplicaciones increíbles directamente en el Diseñador de Webflow, de una forma que Webflow pueda soportar y escalar?”

Nuestro enfoque

Para empezar, recopilamos todas las extensiones de Chrome para Webflow que pudimos encontrar y analizamos todas las estadísticas de uso que tuvimos a nuestro alcance.

Con la investigación en mano, pudimos trazar todo el recorrido del desarrollador y destacar casos de uso como la localización, los flujos de trabajo de diseño y la creación de componentes que estas extensiones de terceros hacían posible. Luego, conectamos los puntos para mostrar el punto de vista del desarrollador, exponiendo sus puntos de dolor, oportunidades y las soluciones alternativas que utilizaban para crear herramientas que ampliaran el Diseñador de Webflow.

A medida que explorábamos posibles soluciones, recurrimos rápidamente a la creación de prototipos para agilizar nuestra exploración y mejorar la toma de decisiones del equipo. Los prototipos nos permitieron pasar de ideas abstractas a conversaciones productivas y ciclos de retroalimentación sobre algo mucho más tangible. Durante este proceso, quedó claro que cuando las personas tienen algo concreto sobre lo que opinar, las discusiones ganan impulso y ayudan a los equipos a avanzar en la creación de grandes productos.

Nuestro proceso de creación de prototipos

Al sumergirnos en la creación rápida de prototipos, la variedad de ideas fue enorme. Algunas fueron brillantes y, para ser sinceros, otras fueron directamente a la basura. Para nosotros, era importante consolidar el concepto de extensibilidad dentro del Diseñador para poder tener debates basados en casos de uso reales.

Por eso, centramos nuestros prototipos en desarrollar casos de uso concretos, desde la generación de texto con IA hasta la inyección de SVG y la gestión de estilos. Esto dio origen a la idea de un Gestor de Activos Digitales, que básicamente separaba la capa de la aplicación en su propia ventana.

El prototipo del Gestor de Activos Digitales fue un momento revelador para nuestro equipo. Dejó claro que era necesario un espacio dedicado y personalizable que pudiera interactuar sin problemas con el lienzo del Diseñador. Con él, los usuarios ahora tenían la libertad de crear flujos de trabajo y configurar ajustes directamente dentro de una ventana de aplicación.

También significaba que los usuarios podían mover la ventana, lo que les permitía apartar la aplicación para concentrarse en su tarea actual. Crear este espacio flexible benefició tanto a los desarrolladores como a los clientes.

Una vez terminados los prototipos, el equipo de ingeniería comenzó a construir una prueba de concepto funcional para que la probáramos internamente. Esta prueba se convirtió en la base de las API de Javascript para extensiones del Diseñador, que nos permitieron crear una ventana flotante capaz de interactuar con el lienzo de Webflow a través de un puente API. Empezamos a pequeña escala, priorizando primero la capacidad de seleccionar y leer nodos del lienzo, para luego pasar a experiencias de manipulación y creación.

Mientras los ingenieros trabajaban en la prueba de concepto, nosotros —los equipos de producto y diseño— continuamos creando prototipos de conceptos para ampliar nuestros casos de uso y determinar las necesidades y limitaciones técnicas para el debate.

Algunos conceptos, como un validador de enlaces, provocaron debates interesantes sobre el alcance del poder que debíamos otorgar a la API de extensiones del Diseñador y el nivel de acceso que una aplicación debería tener dentro del mismo. Estas exploraciones nos ayudaron a consolidar nuestro principio de que una extensión del Diseñador debe poder ampliar cualquier cosa que un diseñador pueda hacer dentro del lienzo. Sin embargo, para eventos más globales, sería necesario aprovechar nuestras API REST para habilitar una capa adicional de autorización.

Retroalimentación e iteración

Una vez que nos sentimos seguros con nuestra dirección, lanzamos una versión beta a un grupo selecto de clientes y desarrolladores. Este paso fue inestimable para arrojar luz sobre las limitaciones de nuestras capacidades de API y la experiencia de usuario. Recibimos muchos comentarios excelentes, incluida una observación crítica: necesitábamos ofrecer más flexibilidad en cuanto al tamaño de la ventana de la aplicación.

Para solucionar esto, empezamos a crear prototipos que permitieran a los usuarios cambiar el tamaño de la ventana de la aplicación. Tras investigar más con clientes y desarrolladores, darles el control sobre el tamaño de la ventana resultó ser la mejor forma de mejorar la experiencia general. Queríamos capacitar a los desarrolladores para crear la mejor experiencia de usuario para sus aplicaciones, reconociendo que algunas requieren un espacio mínimo mientras que otras necesitan una ventana más grande y enfocada.

Identificamos los beneficios de introducir restricciones y decidimos permitir que los desarrolladores establecieran el tamaño predeterminado de su ventana a partir de tres opciones predefinidas. Esto nos permitió lograr un equilibrio entre la flexibilidad del desarrollador y la previsibilidad del usuario al utilizar una herramienta como Webflow.

También reconocimos la importancia de ofrecer vías de escape para flujos de trabajo enfocados. Aunque una aplicación puede funcionar bien en una ventana pequeña para la mayoría de sus tareas, existen razones válidas para ampliarla a mitad de camino en pasos específicos. Con esto en mente, creamos una API que permite a los desarrolladores aumentar dinámicamente el tamaño de una aplicación en cualquier momento para mejorar aún más la experiencia del usuario.

Cómo respondió nuestra comunidad

Desde el lanzamiento de nuestras nuevas API de extensiones del Diseñador junto con nuestra renovada plataforma para desarrolladores, hemos casi duplicado el número de aplicaciones en nuestro Marketplace, visto miles de descargas, sido testigos de cómo los expertos de Webflow generan nuevas fuentes de ingresos con aplicaciones y añadido múltiples aplicaciones SaaS de socios a nuestro Marketplace.

Y lo mejor de todo es que nuestra comunidad está entusiasmada:

Para obtener más información y descubrir todo lo que ofrecen las aplicaciones de Webflow, haz clic aquí.