Variables en Dev Mode
Como desarrollador, cuando revisas diseños en el Modo Dev, encontrarás variables de color, número, cadena y booleanas. Los valores de esas variables pueden depender de factores, como el modo de variable, lo que a veces dificulta identificar los valores exactos que se desean extraer del diseño.
Figma ofrece algunas opciones en el Modo Dev para facilitar el trabajo con variables a los desarrolladores:
Detalles de las variables
Cuando inspeccionas un diseño en el Modo Dev, puedes ver detalles sobre las variables utilizadas en el diseño. El modal Detalles de la variable enumera información sobre una variable, lo que incluye lo siguiente:
- 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 (donde se puede usar)
- Un fragmento de código para usar la variable
Una característica útil es la capacidad de seguir una cadena de alias de variables hasta un valor específico. Por ejemplo, en la imagen anterior, la variable **Fondo/Positivo/Predeterminado** utiliza **Verde/500** como alias, que corresponde al valor de color **#14AE5C**.
Con el modal Detalles de variables, también puedes cambiar de modo, lo que te permite ver los otros valores que la variable puede tener.
Abre el modal de detalles de la variable
Hay dos maneras de abrir el modal de detalles de variables:
En el caso de 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 de Detalles de la variable.
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 separado una variable durante la fase de diseño. Cuando encuentres un valor en bruto, es posible que quieras verificar si hay una variable existente que debería utilizarse en su lugar.
Para facilitar la identificación de variables correspondientes, Dev Mode puede sugerir variables.
Para sugerir una variable, esta debe tener lo siguiente:
- Exactamente el mismo valor
- El alcance adecuado
Puedes hacer clic en una variable sugerida para copiar su nombre.
Obtener variables sugeridas
Para obtener variables sugeridas de un valor en Dev Mode, en el panel Inspeccionar, haz clic en el valor para el cual deseas recibir una sugerencia. El modal de Variables sugeridas aparece junto al valor al que le 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 selecciona la colección de variables Color Primitives. Estos nombres son solo ejemplos: los nombres reales de las colecciones y variables corresponden a las variables locales y colecciones de tu archivo.
Debajo de la sección Colecciones de este archivo, hay una lista de todos los grupos de variables que aparecen en la colección, como Marca, Negro y Blanco. Por defecto, se selecciona Todas las variables. Los grupos están ordenados de la misma forma en que se organizan en el modal de variables.
Para el grupo seleccionado, la tabla de variables muestra las variables, junto con los valores para cada modo que tiene una variable. Si tiene seleccionadas todas las variables, la tabla se organiza por grupo.
Puede hacer clic en variables y valores individuales para copiarlos al portapapeles y ver detalles sobre cada 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.