Crear y gestionar variables y colecciones

Antes de empezar

Quién puede utilizar esta función

Cualquier persona con cualquier plan

Cualquier persona con acceso de edición a un archivo puede crear y editar variables

¿Buscas más recursos sobre variables? Consulta nuestra guía de variables.

Acceder al modal de variables

Utiliza el modal Variables para crear y gestionar:

1. Colecciones de variables
2. Variables
3. Modos para variables
4. Grupos de variables

Para acceder al modal de Variables:

1. Deselecciona todo en el lienzo pulsando esc o haciendo clic en el lienzo.
2. Desde la barra lateral derecha, localiza la sección Variables locales.
3. Haz clic en Abrir variables.

Puedes hacer clic en Alternar barra lateral para ver opciones adicionales en el modal de variables.

Crear una variable

1. Desde cualquier colección, haz clic en + Crear variable.
2. Selecciona un tipo de variable del menú desplegable.
3. Dale un nombre a la variable en la primera columna y un valor en la segunda columna.

Cada colección puede tener hasta 5000 variables.

Para duplicar una variable, selecciona una o más variables y pulsa ⇧ Shift Intro.

Para eliminar una variable, haz clic derecho sobre la variable y selecciona Eliminar variable.

Crear un alias

Crea un alias para una variable y vincula su valor a una variable existente. Esto te permite implementar tokens de diseño y hace que la gestión de las actualizaciones de tus diseños sea más eficiente.

Por ejemplo, imagina que tienes múltiples variables de color que hacen referencia a la misma variable de color. Si necesitas actualizar ese color, solo tendrías que actualizar la fuente en lugar de actualizar manualmente cada instancia del color.

Una variable puede hacer referencia a otras variables del mismo tipo.

Para crear un alias para una variable:

1. Abre el modal de Variables.
2. Haz clic derecho en el valor de una variable y selecciona Crear alias.
3. Desde la pestaña Bibliotecas, elige una variable para asignar un alias. Puedes utilizar la barra de búsqueda para encontrar una variable por su nombre o explorar las bibliotecas disponibles.

Para desvincular un alias, pasa el cursor sobre el campo de valor y haz clic en Desvincular alias.

Copiar y pegar variables

Puedes copiar y pegar variables a cualquier colección, incluidas las de un archivo diferente.

1. Abre la colección deseada desde el modal de variables.
2. Selecciona una o más variables.
   • Mantén pulsado ⌘ Command en Mac o ⌃ Control en Windows para seleccionar múltiples variables.
   • Mantén pulsada la tecla ⇧ Shift para seleccionar un rango de variables.
3. Haz clic derecho en la selección y elige Copiar.
4. Desde cualquier colección, haz clic derecho y selecciona Pegar.

Editar una variable

Pasa el ratón sobre la fila de una variable y haz clic en el icono Editar variable para abrir su modal de edición.

Desde allí, puedes:

1. Cambiar el nombre de la variable.
2. Añadir una descripción para explicar cómo debe usarse la variable.
3. Modificar los valores de la variable.
4. Añadir sintaxis de código.
5. Ocultar la variable para su publicación.
6. Delimita una variable para restringir las propiedades a las que se puede aplicar.

Delimitar una variable

Delimita una variable para restringir las propiedades a las que se puede aplicar. Esto reduce las conjeturas a la hora de decidir qué variables usar para tus diseños.

Por ejemplo, si delimitas una variable de número al radio de esquina, la variable únicamente se podrá aplicar al radio de esquina y no aparecerá como opción para ninguna otra propiedad compatible.

La delimitación está disponible para las variables de número, color y cadena.

Para delimitar una variable:

1. Haz clic derecho en una variable o en varias y selecciona Editar variable. También puedes hacer clic en Editar variable, situado a la derecha de cualquier variable individual.
2. Abre la pestaña Delimitar.
3. Usa las casillas de verificación para activar o desactivar la disponibilidad de la variable en esa propiedad. Marca Mostrar en todas para que la variable esté disponible en todas las propiedades compatibles.

Añadir sintaxis de código

La sintaxis de código permite representar variables en el código utilizando nombres de variables válidos, favoreciendo así una experiencia de entrega fluida. La sintaxis de código de una variable aparecerá en los fragmentos de código en Dev Mode al inspeccionar elementos usando la variable. Actualmente, se admiten fragmentos de código para variables en CSS, SwiftUI y Compose. 

Puedes crear un nombre por plataforma, incluyendo Web, Android e iOS. Esto permite hasta tres sintaxis de código por variable. 

Para añadir sintaxis de código a una variable:

1. En la sección Sintaxis de código del modal Editar variable, haz clic en Agregar sintaxis de código.
2. En el menú desplegable, selecciona Web, Android o iOS.
3. Usa el cuadro de entrada para introducir un nombre de variable. Una vista previa muestra cómo se ve el nombre de la variable en los fragmentos de código.

Editar variables en bloque

Para editar múltiples variables a la vez:

1. Abre cualquier colección desde el modal Variables.
2. Selecciona varias variables usando atajos de teclado:
   • Mantén pulsado ⌘ Command / Control y haz clic para seleccionar variables individuales
   • Mantén pulsado Shift y haz clic para seleccionar un rango de variables
3. Haz clic derecho en una variable seleccionada y selecciona Editar variables.
4. Desde el modal Editar variables, puedes:
   • Delimitar variables, si son compatibles con el tipo de variable
   • Ocultar variables para su publicación

Crear y gestionar colecciones de variables

Una colección es un conjunto de variables y modos. Las colecciones pueden utilizarse para agrupar variables relacionadas. Por ejemplo, utiliza una colección para encontrar texto en distintos idiomas y otra para los valores espaciales.

Crear una colección de variables

Para crear una colección de variables, ve a la barra lateral del modal de variables y haz clic en Más opciones > Crear colección.

Si no se ha creado una variable en un archivo, primero deberás crear una variable para poder crear nuevas colecciones de variables.

Renombrar una colección de variables

Para renombrar una colección de variables:

1. En la barra lateral del modal de variables, abre el menú desplegable de colecciones y elige la colección que quieres gestionar.
2. Haz clic en Más opciones y selecciona Renombrar colección.

Eliminar una colección de variables

Al eliminar una colección de variables, también se eliminan todas las variables que contiene. Cualquier propiedad que utilizaban las variables ya no estará vinculada a la variable ni a ningún modo existente. Las variables y la colección únicamente pueden restaurarse deshaciendo inmediatamente la acción o restaurando una versión anterior del archivo. 

Para eliminar una colección de variables:

1. En la barra lateral del modal de variables, abre el menú desplegable de colecciones y elige la colección que quieres gestionar.
2. Haz clic en Más opciones y selecciona Eliminar colección.

Reordenar colecciones de variables en un archivo

Reordena tus colecciones de variables para organizarlas y encontrarlas más rápido al aplicarlas a los diseños. Cambiar el orden de las colecciones de variables afectará al orden en que aparecen en el selector de modo variable y los selectores de variables.

Para reordenar colecciones de variables en un archivo:

1. En la barra lateral del modal de variables, haz clic en Más opciones y selecciona Reordenar Colecciones.
2. Desde la ventana emergente Colecciones, puedes:
   • Haz clic y arrastra para reordenar las colecciones
   • O haz clic en Ordenar de la A a la Z para ordenar las colecciones en orden alfanumérico

Agrupar una selección de variables

Puedes seguir organizando variables si las añades a grupos de una colección. Por ejemplo, utiliza un grupo para los colores usados en el texto y otro para los usados en los trazos.

Para organizar las variables en un grupo:

1. Desde el modal Variables, selecciona varias variables:
   • Mantén pulsado ⌘ Command / Control para seleccionar varias variables
   • Mantén pulsado ⇧ Shift para seleccionar un rango de variables
2. Haz clic derecho en la selección y selecciona Nuevo grupo con selección.

Haz clic y arrastra los grupos en la barra lateral del modal de Variables para reordenarlos. También puedes hacer clic y arrastrar grupos dentro de otros grupos para anidarlos. 

Renombrar un grupo

1. En la barra lateral del modal de variables, haz doble clic en el nombre del grupo.
2. Escribe un nuevo nombre para el grupo de variables.

Gestionar un grupo

1. En la barra lateral del modal de variables, haz clic derecho en el nombre del grupo en la barra lateral.
2. En el menú, elige entre las siguientes opciones:
   • Desagrupar
   • Duplicar grupo
   • Eliminar grupo