Si abriste el Designer hoy, es posible que hayas notado un pequeño interruptor en la parte superior del importantísimo panel de estilos, junto con un mensaje que dice:
El panel de estilos tiene un nuevo aspecto y algunas funciones nuevas. Pruébalo antes de que esté disponible para todos. (Y vuelve al anterior cuando lo necesites durante la versión beta).
«Entonces», te preguntarás, «¿de qué va esto?». Pues bien, aquí tienes la respuesta:
Llevamos tiempo trabajando en una versión renovada del panel de estilos y, tras meses de uso interno, vamos a lanzar el cambio para todos los usuarios de Webflow: primero en versión beta mediante un interruptor, y luego para todo el mundo después del miércoles 13 de febrero.
Durante la fase beta, podrás cambiar entre el panel de estilos antiguo y el nuevo tantas veces como quieras. (El Designer también recordará qué versión has estado usando, así que no tendrás que cambiar de una a otra una vez que te acostumbres a la nueva).
Al finalizar el mes de prueba, haremos el cambio definitivo y este nuevo panel de estilos será la norma para todos los usuarios de Webflow. Si tienes alguna pregunta o te encuentras con algún problema inesperado durante la beta, únete a la discusión en nuestro foro.
Por qué cambiamos el panel de estilos
Llegados a este punto, surge una pregunta lógica: ¿por qué hacer este cambio en primer lugar? Aquí tienes las razones principales, resumidas:
Mejoras de rendimiento
Reconstruir el panel de estilos con una base de código más limpia ha mejorado la velocidad y la capacidad de respuesta en varias áreas del Designer casi al doble, y sienta las bases para mejoras de rendimiento sustanciales en el futuro.
Desarrollo más rápido
Este proyecto también estandariza los componentes de interfaz que usamos para crear nuevas piezas en el panel de estilos, lo que nos permitirá mantener y desarrollar nuevas funciones más rápido, de una manera más coherente y sostenible. Esto significa que tendrás las novedades en tus manos antes. (Dato curioso: gran parte está construido con CSS grid).
Organización más clara
Además de un montón de pequeñas mejoras de experiencia de usuario (de las que hablaremos más abajo), hemos cambiado la forma en que se agrupan las distintas propiedades de estilo para que el diseño sea más intuitivo. Por ejemplo, las sombras de texto ahora se encuentran en la sección de tipografía, en lugar de en la sección general de «sombras».
Estilo modernizado
Al mismo tiempo, hemos limpiado la interfaz del panel de estilos en general, dependiendo menos de los iconos, ajustando los espacios y mejorando la legibilidad de las distintas secciones.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
Nuevas funciones
Esto es mucho más que un simple cambio de imagen de la interfaz: este nuevo panel de estilos introduce un montón de pequeñas funciones y mejoras. Aquí tienes un resumen rápido de las novedades.
Position: sticky
Una de las novedades más emocionantes de este nuevo panel de estilos es la nueva propiedad «sticky» (fija) en la sección de posicionamiento. Esta propiedad te permite anclar elementos en una posición específica mientras te desplazas por la página. Los usuarios veteranos de Webflow saben de sobra cómo se hacía esto con código personalizado, pero, afortunadamente, esos días han quedado atrás.
Espaciado y posicionamiento rediseñados
Uno de los cambios más notables es cómo hemos reorganizado y rediseñado la sección de diseño, dividiéndola en tres nuevas secciones: espaciado, tamaño y posición. Esto hace que la interfaz sea más legible y esté mejor organizada. También hemos pulido la interfaz de márgenes y rellenos para darle un aspecto más limpio y moderno, además de ampliar las áreas de clic para que estos controles sean más rápidos y fáciles de usar, siguiendo la ley de Fitts.
También notarás que los controles de relleno y margen tienen un nuevo menú contextual que te permite aplicar valores de espaciado preestablecidos.
Menús desplegables mejorados
Si alguna vez te has frustrado por tener que hacer tanto scroll al elegir fuentes o filtros en un menú desplegable, tenemos buenas noticias: el nuevo panel de estilos cuenta con menús desplegables mejorados de altura completa que hacen mucho más sencillo encontrar lo que buscas.
Selector de color rediseñado
Otra pequeña mejora: el selector de color ha recibido un poco de cariño, con un nuevo control deslizante de opacidad y soporte adicional para valores de color HSB (tono, saturación, brillo); también puedes hacer clic para alternar entre HSB y RGB.
Controles de degradado más precisos
El panel de degradados también se ha rediseñado, incluyendo una nueva entrada de porcentaje para lograr una mayor precisión al crear los distintos puntos de color en tus espectros de degradado.
Controles de radio de borde rediseñados
En cuanto al radio de borde, hemos añadido un control deslizante que te permite ajustar las cuatro esquinas a la vez, junto con una nueva vista que te permite controlar cada esquina por separado.
Menú de unidades ampliado
Verás que los campos de estilo ahora cuentan con una mayor variedad de unidades, incluyendo vh, vw, em y rem. Aunque siempre podías introducirlas manualmente, esta vez hemos querido que sea mucho más evidente.
Cómo puedes ayudar
Hemos probado este nuevo panel de estilos a fondo, pero siempre existe la posibilidad de que se haya colado algún error inesperado que pueda afectar a tu flujo de trabajo.
Para que la transición al nuevo panel sea lo más fluida posible, por favor informa de cualquier problema o comportamiento extraño que encuentres en el foro y le echaremos un vistazo.
(¡Muchas gracias de antemano por tu ayuda!)
