Crea y administra variables y colecciones

Antes de empezar

Quién puede utilizar esta función

Cualquier persona en cualquier plan

Toda persona con acceso de puede editar en un archivo puede crear y editar variables

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

Accede al modal Variables

Usa 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 Variables:

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

Puedes hacer clic en Activar o desactivar barra lateral para ver opciones adicionales en el modal Variables.

Crea una variable

1. Desde cualquier colección, haz clic en + Crear variable.
2. Selecciona un tipo de variable del menú desplegable.
3. Asigna 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 presiona ⇧ Shift Enter.

Para borrar una variable, haz clic derecho sobre esta y selecciona Eliminar variable.

Crea 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 gestionar las actualizaciones de tus diseños sea más eficiente.

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

Una variable puede referirse a otras variables del mismo tipo.

Sigue estos pasos si deseas crear un alias para una variable:

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

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

Copia y pega variables

Puedes copiar variables y pegarlas en cualquier colección, incluidas las colecciones de un archivo diferente.

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

Edita una variable

Coloca el cursor sobre la fila de una variable y haz clic en el ícono Editar variable para abrir su modal de edición.

Desde allí, puedes hacer lo siguiente:

1. Cambia el nombre de la variable.
2. Agrega una descripción para explicar cómo se debe usar la variable.
3. Modifica los valores de la variable.
4. Agrega sintaxis de código.
5. Oculta la variable de la publicación.
6. Define el alcance de una variable para limitar las propiedades a las que se puede aplicar.

Alcanza una variable

Define el alcance de una variable para limitar las propiedades a las que se puede aplicar una variable. Esto reduce las conjeturas al decidir qué variables usar en tus diseños.

Por ejemplo, si limitas el alcance de una variable numérica al radio de esquina, la variable solo se podrá aplicar al radio de esquina y no aparecerá como una opción para ninguna otra propiedad admitida.

El alcance está disponible para variables numéricas, de color y de cadena.

Para definir el alcance de una variable:

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

Agrega sintaxis de código

La sintaxis de código te permite representar variables en el código empleando nombres de variables válidos para favorecer una experiencia de entrega sin inconvenientes. La sintaxis de código de una variable aparecerá en 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, incluidos Web, Android y 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, elige Web, Android o iOS.
3. Usa el cuadro de entrada para introducir el nombre de una variable. Una vista previa muestra cómo aparece el nombre de la variable en los fragmentos de código.

Edita variables de forma masiva

Para editar múltiples variables a la vez:

1. Abre cualquier colección desde el modal Variables.
2. Selecciona múltiples variables usando atajos de teclado:
   • Mantén presionada la tecla ⌘ Command / Control y haz clic para seleccionar variables individuales.
   • Mantén Shift y haz clic para seleccionar un rango de variables.
3. Haz clic derecho en una variable seleccionada y haz clic en Editar variables.
4. Desde el modal Editar variables, puedes hacer lo siguiente:
   • Delimitar variables, si son compatibles con el tipo de variable.
   • Ocultar variables para que no se publiquen.

Crea y administra colecciones de variables

Una colección es una serie de variables y modos. Las colecciones se pueden usar para organizar variables relacionadas en un mismo lugar. Por ejemplo, se puede utilizar una colección para localizar texto en diferentes idiomas, y otra colección para los valores espaciales.

Crea una colección de variables

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

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

Renombra una colección de variables

Para renombrar una colección de variables:

1. En la barra lateral del modal 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.

Elimina una colección de variables

Al eliminar una colección de variables, también se borran todas sus variables que contiene. Cualquier propiedad que estuviera usando las variables ya no estará conectada a la variable ni a ningún modo existente. Las variables y la colección solo pueden restaurarse deshaciendo la acción de inmediato o restaurando una versión anterior del archivo. 

Para borrar una colección de variables:

1. En la barra lateral del modal 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.

Reordena las colecciones de variables en un archivo

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

Para reordenar colecciones de variables en un archivo:

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

Agrupa una selección de variables

También puedes organizar variables agregándolas a grupos dentro de una colección. Por ejemplo, emplea un grupo para los colores utilizados para el texto y otro para los colores utilizados en los trazos.

Para agrupar las variables en un grupo:

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

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

Renombra un grupo

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

Gestiona un grupo

1. En la barra lateral del modal 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