La posibilidad de copiar y pegar entre proyectos ha sido una petición constante, así que hoy nos complace anunciar que:
La espera. Ha. Terminado.
En qué consiste
En pocas palabras, esta nueva función te permite copiar y pegar diseños, elementos, interacciones e incluso páginas completas (¡solo tienes que envolverlo todo en un div!) de un proyecto a otro.
Webflow también reconocerá las similitudes y diferencias en los nombres de las clases y los estilos, lo que facilita la fusión de estilos duplicados al mover elementos entre proyectos. Hablaremos más sobre esto más adelante en el artículo.
Por qué es genial
Copiar y pegar entre proyectos puede parecer algo pequeño, pero abre un mundo de nuevas posibilidades. Estas son algunas de las grandes oportunidades que ofrece esta función:
Pon en marcha nuevos proyectos
¿Alguna vez te has visto reconstruyendo la misma (o casi la misma) sección hero y navegación para tus nuevos sitios? Ahora ya no tendrás que hacerlo. Simplemente toma esos patrones de un sitio existente, pégalos en tu nuevo proyecto, haz los ajustes necesarios y ¡listo!
Crea tu propio kit de interfaz (UI kit)
En la misma línea, ahora puedes crear un gran proyecto de "UI kit" para guardar tus diseños e interacciones favoritos (o más complejos), y luego extraerlos de ahí a medida que construyes otros sitios.
Bonus: hemos creado un kit de interfaz a pequeña escala para uno de nuestros vídeos educativos, que puedes clonar y reutilizar como quieras.
Planeamos crear más kits de interfaz en un futuro próximo, pero también estamos deseando ver lo que tú haces. Así que, si tienes un kit increíble que quieras compartir con el resto de la comunidad de Webflow, asegúrate de publicarlo y permitir que otros lo clonen. También puedes publicar el enlace de tu kit en Twitter con el hashtag #WebflowUIKit; recopilaremos nuestros favoritos para una futura entrada en el blog.
Importa una hoja de estilos
Como nuestro diseñador Ryan Morrison explicó en un artículo el año pasado, suele ser útil empezar los proyectos nuevos con una página de guía de estilos que te permita editar las etiquetas HTML base (como H1, H2, párrafos, etc.) en un solo lugar y ver cómo esos cambios se aplican en todo el sitio.
Pero crear una página con todos estos elementos puede ser un engorro. Así que lo hemos hecho por ti: hemos creado un proyecto clonable que contiene todas las etiquetas HTML disponibles para dar estilo en Webflow, que puedes copiar y pegar como quieras.
(Dicho esto, puedes crear tu propia versión de esta guía de estilos y pegarla en un proyecto al principio de la construcción para ahorrar tiempo durante la configuración).
Nota: los estilos aplicados a las etiquetas HTML base no se importarán al pegarlos de un sitio a otro, pero al menos tendrás una forma sencilla de tener todas esas etiquetas en una sola página. Para ver todos los casos especiales como este, consulta nuestra documentación en Webflow University.
Crea "temas" y marcos de trabajo de estilos
Del mismo modo, puedes usar varios proyectos como punto de partida para diferentes "temas".
Simplemente crea una página de guía de estilos en un proyecto nuevo que contenga todos tus encabezados, patrones de diseño, elementos comunes, interacciones —todo lo que quieras llevar contigo en una construcción— y luego pégalo todo en una página de guía de estilos vacía en un proyecto nuevo para trasladar esas clases. Y listo: tema de estilo importado.
Mantén la coherencia entre sitios
Aquí en Webflow, tenemos varios sitios grandes que comparten elementos y patrones (navegación, pies de página, formularios, etc.), los cuales hemos tenido que recrear minuciosamente en cada uno de ellos (y actualizar en cada sitio cuando hacemos un cambio). Ahora este desafío es mucho menos intimidante: simplemente actualiza en un lugar y luego pega tus cambios en todos los sitios que necesiten actualizarse.
Colabora en proyectos
En lugar de pelearte por el tiempo en el Diseñador para un proyecto en el que estás colaborando, ahora puedes duplicar el proyecto, trabajar en tus páginas o secciones respectivas individualmente y luego pegar el contenido actualizado en el proyecto principal cuando estés listo. (Dicho esto, puedes crear tu propia versión de esta guía de estilos y luego pegarla en un proyecto al comienzo de una construcción para ahorrar tiempo durante la configuración).
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Cómo lidiar con conflictos de clases
Algunos de ustedes se estarán preguntando: "¿por qué tardaron tanto en lanzar esto?". La respuesta reside, en parte, en la posibilidad de conflictos. Es decir, ¿qué hacemos con los nombres de clase y/o las propiedades de estilo que coinciden?
Las clases tienen dos partes básicas:
- El nombre. ¿Cómo llamas a esta clase?
- Los estilos. ¿Qué estilos específicos define esta clase?
Las clases pueden tener el mismo nombre pero estilos diferentes. Las clases también pueden tener los mismos estilos pero nombres diferentes. Entonces, ¿cómo diseñamos un sistema para reconciliar estos conflictos sin crear problemas en tus sitios ni introducir demasiada complejidad para el diseñador en el proceso?
Nuestra lógica principal al abordar este desafío fue que el proyecto de destino debe tener prioridad en caso de conflicto. Ponemos esto en práctica añadiendo un número al final de las clases pegadas en caso de discrepancias de estilo. Por lo tanto, si existe un botón rojo con la clase "botón" en el destino y pegamos un botón verde con la clase "botón", renombraremos el botón verde a "botón 2" para evitar conflictos de estilo. En estas situaciones, puedes renombrar rápidamente las clases pegadas para diferenciar las nuevas de las existentes.
Al mismo tiempo, queríamos que este sistema reconociera cuándo los nombres de clase y los estilos coinciden, para poder fusionar esas clases y evitar hojas de estilo sobrecargadas. Para poner esto en práctica, si vemos que los nombres de clase son iguales (ignorando cualquier número añadido), también comprobamos si los estilos coinciden exactamente. Si es así, fusionamos las clases pegadas con las existentes en el destino.
Adoptamos este mismo enfoque con las interacciones, buscando un sistema que se fusione de forma inteligente cuando sea apropiado, pero que renombre en caso de conflicto.
Para ver un análisis completo de todos los casos especiales y consideraciones al copiar y pegar de un proyecto a otro, consulta nuestra documentación en Webflow University.
¿Qué sigue?
A medida que te familiarices con este nuevo flujo de trabajo, haznos saber qué comentarios o inquietudes surgen. Trabajaremos constantemente para ajustar y mejorar la experiencia de copiar y pegar entre proyectos, y siempre nos viene bien tu opinión.
Mientras tanto, ¡cuéntanos en los comentarios qué flujos de trabajo y casos de uso te entusiasman más ahora que puedes copiar y pegar entre proyectos!
