Variables en Dev Mode
Como desarrollador, al revisar diseños en el modo Dev, te encontrarás con variables de color, numéricas, de cadena y booleanas. Los valores de esas variables pueden depender de factores como el modo variable, lo que a veces dificulta identificar los valores exactos que quieres extraer del diseño.
Figma ofrece varias opciones en el modo Dev que simplifican el trabajo con variables para los desarrolladores:
Detalles de variable
Cuando inspeccionas un diseño en Dev Mode, puedes visualizar detalles sobre las variables utilizadas en el diseño. El modal Detalles de la variable enumera información sobre una variable, como:
- El nombre de la variable
- Un enlace al archivo que contiene la variable
- El nombre de la colección de variables que contiene la variable
- El modo de la variable
- El valor de la variable y, si es relevante, la cadena de alias a un valor sin procesar
- El alcance de la variable (dónde puede utilizarse)
- Un fragmento de código para utilizar la variable
Una función útil es la capacidad de rastrear una cadena de alias de variables hasta un valor específico. Por ejemplo, en la imagen anterior, la variable fondo/positivo/predeterminado utiliza Green/500 como alias, que corresponde al valor de color #14AE5C.
Usando el modal Detalles de variables, también puedes cambiar de modo, lo que te permite ver los otros valores que puede adoptar la variable.
Abre el modal de detalles de la variable
Hay dos maneras de abrir el modal de detalles de variables:
Para las variables que aparecen en un fragmento de código, como los tokens de diseño en CSS, haz clic en el nombre de la variable en el panel Inspeccionar para abrir el modal Detalles de variables.
Para otras variables, como las que aparecen en la sección Colores de selección, haz clic en Detalles de variables en el panel Inspeccionar para abrir el modal Detalles de variables.
Variables sugeridas
En Dev Mode, al inspeccionar un diseño, a veces encontrarás valores en bruto en lugar de variables o estilos. Esto puede ocurrir por varias razones, como si un diseñador hubiera desasociado una variable durante la fase de diseño. Cuando te encuentres con un valor sin procesar, es posible que quieras comprobar si hay una variable existente que debería utilizarse en su lugar.
Para ayudar a facilitar la identificación de variables correspondientes, el Modo Dev puede sugerir variables.
Para sugerir una variable, esta debe tener:
- Exactamente el mismo valor
- El alcance adecuado
Puede hacer clic en una variable sugerida para copiar su nombre.
Obtener variables sugeridas
Si quieres obtener variables sugeridas para un valor en el modo Dev, en el panel Inspección haz clic en el valor para el que deseas obtener una sugerencia. El modal de Variables sugeridas aparece junto al valor en el que hiciste clic.
Acceder a colecciones de variables locales
En Dev Mode, puedes acceder y ver las colecciones de variables locales en el archivo.
Por ejemplo, en la imagen anterior, en la sección Colecciones de este archivo, se ha seleccionado la colección de variables Color Primitives. Estos nombres son solo ejemplos: los nombres reales de las colecciones y variables corresponden a las variables y colecciones locales de tu archivo.
Debajo de la sección Colecciones de este archivo se encuentra una lista de todos los grupos de variables que aparecen en la colección, como Marca, Negro y Blanco. De forma predeterminada, se selecciona Todas las variables. Los grupos están ordenados de la misma manera en que se organizan en el modal de Variables.
Para el grupo seleccionado, la tabla de variables muestra las variables junto con los valores de cada modo que tiene cada una. Si tiene seleccionadas todas las variables, la tabla se organiza por grupo.
Puedes hacer clic en variables y valores individuales para copiarlos al portapapeles y ver detalles sobre la variable.
Abre la tabla de variables
Para abrir la tabla de variables, en la sección Variables del panel Inspeccionar, haz clic en Abrir variables. La tabla de variables se expande para rellenar el lienzo.