Tras el adelanto que presentamos en la Webflow Conf en noviembre, nos emociona abrir hoy DevLink a todos nuestros clientes en fase beta.
Como recordatorio, DevLink te permite crear componentes en Webflow para usarlos en proyectos de React; así, los equipos de diseño y desarrollo pueden lanzar diseños perfectos al píxel rápidamente y simplificar su colaboración.
Llevando el desarrollo visual más allá de los sitios web
Creamos Webflow para poner el poder del código en una interfaz visual, creando una forma eficaz de desarrollar interfaces front-end con la potencia de HTML, CSS y Javascript en una interfaz de usuario. Y aunque nos hemos centrado en aplicar este poder para cambiar la forma en que la gente construye sitios web, siempre supimos que nuestra herramienta de desarrollo visual podía hacer mucho más.
Es por eso que nuestro equipo de Webflow Labs ha estado trabajando arduamente en DevLink, un nuevo método para usar Webflow y crear componentes de React listos para usar. Tanto si los usuarios de DevLink reutilizan componentes de Webflow fuera de la plataforma como si desarrollan visualmente nuevos componentes de React, podrán lanzar aplicaciones web y sistemas de diseño rápidamente y sin complicaciones técnicas. Incluso hemos visto a algunos usuarios utilizar Webflow y DevLink como su método preferido para realizar prototipos de alta fidelidad y acelerar el camino hacia su MVP. (Junto con nuestro nuevo plugin de Figma a Webflow, el tiempo necesario para pasar de la idea al MVP se ha reducido exponencialmente).
Tras una pequeña vista previa para desarrolladores, lanzamos DevLink en beta abierta para todos los clientes y estamos ansiosos por ver lo que esto les permite lograr a ti y a tu equipo.
Para obtener acceso a DevLink, regístrate aquí con el correo electrónico de tu cuenta de Webflow. Te enviaremos un aviso cuando esté habilitado. Luego, consulta nuestra Guía de documentación para desarrolladores y nuestra Guía de DevLink en el Designer para comenzar. También tenemos plantillas y elementos clonables con un repositorio de GitHub complementario.
Entonces, ¿qué es DevLink? ¿Y cómo se usa?
DevLink ofrece a diseñadores y desarrolladores una mejor forma de colaborar y una manera de evitar el trabajo tedioso y duplicado de recrear componentes de Webflow fuera de la plataforma.
Para usar DevLink, hay 5 pasos básicos:
- Habilita DevLink en tu cuenta. Visita la página de DevLink y haz clic en Empezar a usar DevLink.
- Crea componentes en Webflow. Asegúrate de revisar qué elementos son compatibles actualmente.
- Configura las propiedades de los componentes. Para componentes más complejos que requieran anidamiento o javascript, configura slots o props de tiempo de ejecución.
- Conecta el proyecto de Webflow a un proyecto de React. Desde el Designer de Webflow, copia la configuración de DevLink y pégala en tu proyecto de React.
- Sincroniza Webflow con tu proyecto de React. Instala el paquete npm de DevLink en tu proyecto de React e importa tus componentes de Webflow como componentes de React listos para usar.
Nota: Actualmente, DevLink no permite importar React de vuelta a Webflow.
Para ver en detalle cómo empezar, consulta nuestra documentación.
Lo que DevLink aporta a tu equipo
Con DevLink, podemos crear experiencias web o de React realmente sólidas conectadas a datos, y exportar todo directamente desde Webflow. Este potente flujo de trabajo de desarrollo, con el que podemos avanzar mucho más rápido, nos ha dado una gran ventaja competitiva.
- Ilya Kroogman, fundador de Digital Panda
Lanza aplicaciones web y productos más rápido
Hay muchísimo que hacer al lanzar funciones, aplicaciones o startups desde cero y, por desgracia, se pierde una cantidad enorme de tiempo en el tedioso trabajo de programación del front-end. Por ejemplo, imagina que tu desarrollador pasó el día ajustando todos los radios de borde y las sombras para que coincidieran con los diseños de Figma, pero no tuvo tiempo de conectar la base de datos al sistema de facturación.
Con DevLink, el equipo de diseño tiene total autonomía y control sobre sus decisiones de marca clave, mientras libera a los desarrolladores para que se centren en los aspectos más complejos de la construcción que son fundamentales para la funcionalidad principal.
Amplía los servicios que ofreces a tus clientes
Aunque es posible que ya utilices Webflow para entregar sitios web a tus clientes, el sitio web suele ser solo una pieza de un paquete de diseño y marca más amplio que ofrecen las agencias y los freelancers. Un componente común de esos paquetes es un sistema de diseño para el producto o la aplicación en sí, que, a falta de un equipo de desarrollo, suele presentarse en forma de un archivo grande de Figma o algo similar.
DevLink te permite entregar mucho más que un archivo estático; te permite ofrecer un conjunto completo de componentes de React responsivos con animaciones que sus desarrolladores pueden integrar directamente en el código base del cliente, ahorrándoles un sinfín de horas que habrían pasado construyendo esos componentes ellos mismos.
Conecta el marketing con el producto
Uno de los casos de uso más interesantes de DevLink para empresas más grandes es la creación de un lenguaje compartido entre los equipos de marketing, que gestionan el sitio web, y los equipos de producto. Históricamente, ha sido un reto mantener a estas dos partes de la empresa sincronizadas, por no hablar de reutilizar el trabajo de los demás. DevLink crea una forma sencilla para que los embajadores de marca que trabajan en Webflow compartan sus sistemas de diseño con sus homólogos del equipo de producto. Ahora, los desarrolladores pueden aprovechar los componentes creados en Webflow en el producto principal: componentes de React listos para producción sin ninguna carga técnica, para que puedas crear rápidamente puntos de contacto coherentes con el cliente en todas las plataformas.
Cómo empezar
Para obtener acceso a DevLink, regístrate aquí con la dirección de correo electrónico de tu cuenta de Webflow; te enviaremos un correo electrónico cuando se haya habilitado. Luego, consulta nuestra Guía de documentación para desarrolladores y nuestra Guía de DevLink en el Designer para empezar. ¡También tenemos plantillas y elementos clonables con un repositorio de GitHub complementario!
¿Qué sigue para DevLink?
Como mencionamos antes, DevLink se encuentra en sus primeras etapas de desarrollo y estamos aprendiendo mucho de usuarios como tú. Ya estamos en proceso de planificación y desarrollo de algunas mejoras importantes:
- Compatibilidad con más frameworks de frontend
- Una integración con Storybook
- La capacidad de traer componentes de React de vuelta a tu sitio de Webflow
- ¡Y mucho más!
¡También nos encantaría saber cómo podemos hacer que DevLink sea más útil para tu equipo! Únete a nosotros en el espacio de la comunidad DevLink Circle para darnos tu opinión y enviar errores y solicitudes de funciones aquí.
Como recordatorio, durante el periodo de beta abierta, DevLink será gratuito para todos los usuarios, pero es probable que introduzcamos precios acordes a la escala que requieran los equipos una vez que comprendamos el uso en el mundo real.
Estamos muy emocionados por tu interés en DevLink y deseando saber de ti: cómo lo estás usando, qué mejoras te gustaría que hiciéramos y hacia dónde quieres que se dirija en el futuro.
Reinventando los equipos de desarrollo web
Descubre en nuestro ebook cómo el desarrollo visual facilita la colaboración entre equipos y libera valiosos recursos de programación.
