Uso de la cuadrícula

La cuadrícula Master es el editor de variables de la pestaña Master de un proyecto. Cada fila es una variable; hay una columna de valor por modo (claro/oscuro, idiomas, etc.). Los cambios hechos en la cuadrícula llegan a Figma cuando pulsas Sincronizar en el plugin.

Colecciones y grupos

• Cambia de colección en la lista Colecciones de la barra lateral izquierda y crea una con el botón + (Nueva colección). Haz clic derecho en una colección para Cambiar nombre / Exportar esta colección / Eliminar.
• Haz clic en el encabezado Colecciones de la barra lateral para abrir el menú Orden de colecciones: Orden de creación (predeterminado) o Nombre (A→Z). Los plugins no pueden leer el orden de colecciones que reorganices en el panel de Figma, así que no se importa.
• Una / en el nombre de una variable forma un grupo (p. ej., color/primary → el grupo color). Elige un grupo en el árbol Grupos para filtrar la cuadrícula a ese grupo; elige Todo para volver a ver toda la colección.

Crear, renombrar y mover grupos

• Selecciona filas y haz clic derecho en Nuevo grupo con la selección: las variables seleccionadas se reúnen en un grupo llamado Nuevo grupo. Cámbiale el nombre enseguida en la barra lateral.
• Haz clic derecho en un grupo de la barra lateral y elige Cambiar nombre para cambiar la ruta de todas las variables de ese grupo (subgrupos incluidos). Los alias que apuntan a esas variables se actualizan automáticamente. El nombre de un grupo no puede estar vacío ni contener /.
• Las celdas de nombre de la cuadrícula muestran solo el último segmento; el encabezado del grupo lleva la ruta. La edición con doble clic cambia solo el último segmento; para editar la ruta completa, usa el campo Nombre de clic derecho → Editar variable.
• Arrastra un grupo de la barra lateral sobre otro grupo (o sobre Todo) para mover su ruta bajo el destino. Ctrl(⌘)+Z lo deshace, y la misma ruta llega a Figma tras la siguiente sincronización. No puedes soltar un grupo sobre sí mismo, sobre uno de sus subgrupos ni sobre su padre actual.
• No se pueden reordenar grupos ni variables arrastrando.

Editar celdas

• Haz clic en una celda de valor para editarla. Enter confirma y baja; Escape restaura el valor original.
• Entrada según el tipo: cadena = texto, número = entrada numérica, booleano = interruptor, color = selector de color + hexadecimal.
• Las celdas de color muestran el hexadecimal sin # junto a un segmento de alfa %, como en Figma. Las formas cortas se expanden (f → FFFFFF), y con 8 dígitos los dos últimos son el alfa; la ayuda de entrada dice «Hex de 6 u 8 dígitos (los 2 últimos = alfa); las formas cortas se expanden (f → FFFFFF); también sirve {reference}». Un valor que no es un color nunca se guarda: se revierte al salir de la celda, con un aviso «No es un color, se revirtió: {value}».
• El selector de color tiene las pestañas Personalizado / Bibliotecas. En Bibliotecas, elige otra variable de color de la misma colección para vincularla como referencia (alias); Tomar color de la pantalla toma un color de tu pantalla.
• Una celda que referencia otra variable se muestra como un chip: el chip muestra solo el último segmento y, al pasar el cursor, se ven la ruta completa y el valor resuelto. Haz clic en el chip para volver a abrir el selector y cambiar a otra variable.
• Las variables de cadena y número también pueden referenciar. Pasa el cursor por la celda y usa el botón Definir alias para elegir una variable del mismo tipo; los tres tipos comparten el botón Quitar alias, que quita la referencia y deja el valor resuelto como un valor normal.
• Una elección que formaría un bucle se bloquea en el selector («Crearía una referencia circular»). Al pegar se omiten las celdas que formarían un bucle, y el aviso lo indica («Celdas omitidas: {count} (referencia circular)»).
• Haz doble clic en una celda de nombre para cambiar el nombre de una variable.
• Para dejar un comentario en una celda, pulsa C y haz clic en la celda (Comentarios: «Pulsa C y haz clic en una celda. Sigue activo hasta que pulses Esc.»). Las celdas de descripción, etiqueta y alcance también admiten comentarios.

Añadir, eliminar y duplicar filas

• Elige un tipo (Color / Número / Cadena / Booleano) en el + del extremo izquierdo de la barra de herramientas (Añadir variable) y se crea una fila enfocada en el acto. No hay formulario de nombre previo: la nueva variable nace con un valor predeterminado según su tipo; cámbiale el nombre ahí mismo.
• Para eliminar, selecciona filas y pulsa Delete, o usa Eliminar en el menú contextual.
• Shift+Enter: con una sola fila, inserta justo debajo una fila nueva del mismo tipo; con varias filas seleccionadas, las duplica.
• La opción Duplicar del menú contextual también funciona.
• Menú contextual de fila: Copiar · Duplicar · Editar variable · Nuevo grupo con la selección · Mover a otra colección ▸ (lista de colecciones + Nueva colección) · Ver referencias · Exportar esta colección · Eliminar.

Mover variables a otra colección

• Selecciona filas, haz clic derecho en Mover a otra colección ▸ y elige la colección de destino o Nueva colección. Si ambas colecciones tienen los mismos nombres de modo, las filas se mueven de inmediato.
• Si los modos son distintos, se abre el cuadro Mover a {collection} con un tablero Qué valores conservar. Para cada modo de la colección actual, coloca su valor en una de las columnas de modo de destino o elige Descartar. Mientras quede algún modo sin colocar, el botón sigue bloqueado y el cuadro indica «Sin ubicar aún: {modes}». El botón dice Mover, o Descartar {count} y mover cuando una elección descarta valores; no hay una confirmación aparte. Restablecer disposición restaura la disposición inicial.
• Tras el movimiento aparece un aviso «Se movieron {count} variable(s) a {collection}» con Deshacer para revertirlo al instante.
• En un proyecto con un archivo de Figma conectado, el cuadro indica «Las capas de Figma se vuelven a vincular en la próxima sincronización. Lo que no se pueda volver a vincular se marca en la fila.». Las filas movidas llevan la insignia Esperando a Figma hasta que pulsas Sincronizar en el plugin, lo que crea las variables en la colección nueva del lado de Figma y vuelve a vincular las capas.

Selección múltiple: dos modos

Selección de filas (fila entera resaltada): para operaciones por fila:

• Shift+clic: selecciona un rango desde la última fila seleccionada
• Ctrl(⌘)+clic: añade o quita filas sueltas
• Shift+Ctrl(⌘)+↑↓: amplía con el teclado
• Acciones disponibles: clic derecho Copiar (con nombres y modos) / Duplicar / Eliminar, la tecla Delete, duplicar con Shift+Enter, Nuevo grupo con la selección, Mover a otra colección

Selección de rango de celdas (borde discontinuo): para operaciones de valores en bloque:

• Haz clic en una celda de valor para fijar el ancla y luego Shift+clic o Shift+flechas para ampliar un rectángulo
• Acciones disponibles: entrada por lotes, copiar con Ctrl(⌘)+C, Delete para vaciar valores

Entrada por lotes

Con un rango de celdas seleccionado, empieza a escribir: la edición se abre en la celda ancla y Enter pone ese valor en todas las celdas seleccionadas a la vez.

Copiar y pegar

Puedes mover valores entre la cuadrícula y Google Sheets o Excel copiando y pegando. Pega en la cuadrícula una tabla copiada de una hoja, y copia los valores de la cuadrícula de vuelta a una hoja.

Copiar:

• Selecciona dos o más celdas y pulsa Ctrl(⌘)+C para copiar sus valores.
• Selecciona filas y haz clic derecho en Copiar para incluir los nombres de las variables y los modos. Pégalo en una hoja y obtendrás una tabla.

Pegar (Ctrl(⌘)+V): pega directamente en la cuadrícula una tabla copiada de una hoja de cálculo. Dónde queda depende de tu selección.

• Hay una celda de valor seleccionada: el relleno empieza en esa celda y sigue hacia la derecha y hacia abajo. Las filas y columnas que pasan del borde de la cuadrícula se omiten.
• No hay ninguna celda seleccionada: la primera línea se lee como encabezado, y los valores se asignan a las filas existentes por nombre de variable y nombre de modo. Los nombres de variable que no están en la cuadrícula se crean como filas nuevas (el aviso muestra «Variables nuevas: {count}»). Las columnas que no coinciden se omiten.

En ambos casos, un aviso indica cuántas celdas se rellenaron y cuántas se omitieron. Se omiten las celdas que formarían una referencia circular.

Pegar sobre una celda de valor seleccionada solo rellena filas existentes: para crear variables nuevas al pegar, quita la selección de celdas y pega una tabla con línea de encabezado, o crea primero las filas con + (Añadir variable). Si hay una búsqueda o un filtro activo, solo se ven afectadas las filas visibles en la cuadrícula.

Deshacer / Rehacer

Ctrl(⌘)+Z para deshacer, Ctrl(⌘)+Shift+Z para rehacer (hasta 50 pasos). También hay botones en la barra de herramientas. Se pueden deshacer las ediciones, eliminaciones, pegados, entradas por lotes y los cambios de nombre y movimientos de grupos.

Gestionar modos (columnas)

• Añade modos con el botón + (Añadir modo) en el extremo derecho del encabezado del último modo. Al llegar al límite de idiomas de tu plan, aparece una invitación a actualizar.
• Haz doble clic en el encabezado de un modo para cambiarle el nombre, o usa Cambiar nombre / Eliminar del menú contextual. El último modo que quede no se puede eliminar.
• Arrastra el borde de una columna para cambiar su ancho; los anchos se guardan para la próxima vez.

Buscar y ordenar

La barra de herramientas tiene un cuadro de búsqueda y filtros de tipo (Todos los tipos · Color / Cadena / Número / Booleano). Haz clic en el encabezado Nombre · Descripción · Etiqueta · Alcances para ordenar por esa columna; vuelve a hacer clic para invertir el sentido. La ordenación se aplica solo dentro de cada sección de grupo: el orden de las propias secciones de grupo no cambia.

El botón Vista — columnas y color de la barra de herramientas activa y desactiva las columnas Modos · Descripción · Etiqueta · Alcances (el menú se queda abierto para cambiar varias); se explica en Metadatos de variables.

Atajos de teclado

Grafo de tokens

La pestaña Grafo de tokens de un proyecto visualiza paso a paso las relaciones de referencia (alias) entre variables, y la pestaña Mapa de tokens dispone todo el proyecto en un único mapa. Haz clic en un token del grafo y el resumen muestra «Cambiarlo afecta a {count}» y «Valores referenciados: {count}», para que veas el alcance antes de editar. Desde la cuadrícula, haz clic derecho en una fila y elige Ver referencias para ir directamente. Consulta Grafo de tokens para ver la guía completa.

Exportar datos

Exporta directamente desde la web: Exportar en el menú ⋮ de la tarjeta del proyecto, o haz clic derecho en una colección de la barra lateral o en una fila de la cuadrícula y elige Exportar esta colección. Hay seis formatos (DTCG · JSON · CSV · CSS · SwiftUI · Jetpack Compose); consulta Exportación y código para más detalles. La opción Más (…) → Exportar del plugin de Figma también guarda un archivo. Para obtener design tokens desde el código o la CI, usa la API de solo lectura y el servidor MCP.