Gestiona variables a gran escala con acciones en lote y reordenación.

Diseñadores y desarrolladores pueden gestionar mejor las variables de estilo de sus sitios mediante el reordenamiento manual y las acciones en lote. Organiza tus variables exactamente como quieras, ya sea con escalas de tipografía y tamaño estructuradas, agrupaciones rápidas de colores semánticos o incluso haciendo limpieza de esos tokens de diseño que ya no necesitas.

Para los expertos en el uso del teclado, el panel de Variables actualizado también incluye navegación y controles más rápidos.

Reordenar variables

Para reordenar variables arrastrando y soltando, abre el panel de Variables en el Designer y:

• Pasa el ratón sobre el nombre de una variable (¡o el nombre de un grupo de variables!). Aparecerá un icono de arrastre a la izquierda del nombre.
• Haz clic en el icono de arrastre y mueve la variable o el grupo hasta que aparezca la línea indicadora azul en la ubicación que prefieras.
• Suelta el icono de arrastre para fijar la nueva posición.

Para arrastrar y soltar variables con el teclado:

• Navega hasta el icono de arrastre de la variable (o grupo de variables) a la izquierda de su nombre usando las teclas de flecha.
• Presiona ENTER o ESPACIO para "tomar" la variable.
• Usa las teclas de flecha arriba/abajo para "arrastrar" la variable. La línea indicadora azul seguirá tus movimientos.
• Presiona ENTER o ESPACIO de nuevo para "soltar" la variable, o presiona la tecla ESC para cancelar.

El orden de las variables también se mantiene al compartirlas mediante una Biblioteca.

Acciones en lote para variables

También puedes editar variables en lote en el Designer usando el panel de Variables:

1. Presiona el botón "Seleccionar" en el encabezado del panel de Variables para entrar en el modo de selección. Alternativamente, puedes pasar el ratón sobre el nombre de una variable y marcar la casilla que aparece.
2. Usa las casillas de verificación para seleccionar las variables que quieras. La casilla en el encabezado de la lista de variables selecciona todas las variables de la lista, y la casilla junto a cada nombre de grupo selecciona todas las variables de ese grupo.
3. Una vez que hayas hecho tus selecciones, puedes usar los botones del panel de Variables para agrupar o eliminar esas variables. También puedes usar los controladores de arrastre para moverlas todas a la vez.

Las acciones en lote también se pueden realizar con el teclado. Puedes presionar ESC para salir del modo de selección sin cerrar el panel de Variables.

Navegación por teclado más rápida

Esta actualización también trae un acceso por teclado más ágil para el panel de Variables. Para moverte por la lista rápidamente, puedes:

• Usar la tecla TAB para saltar entre grupos de variables
• Usar las flechas arriba y abajo para navegar entre las filas de variables de un grupo
• Usar las flechas izquierda y derecha para navegar dentro de una fila de variables (ten en cuenta que algunos controles se desactivan en el modo de selección)

‍

Empieza a organizar tus tokens de diseño hoy mismo en el panel de Variables o descubre más sobre cómo trabajar con variables en Webflow University.