Guía de variables en Figma

Las variables en Figma Design almacenan valores reutilizables que pueden aplicarse a todo tipo de propiedades de diseño y acciones de prototipado. Ayudan a ahorrar tiempo y esfuerzo al crear diseños, gestionar sistemas de diseño y crear flujos de prototipado complejos.

Por ejemplo, se puede realizar lo siguiente:

• Crear tokens de diseño para mejorar la eficiencia cuando se administran sistemas de diseño
• Intercambiar un marco entre diferentes tamaños de dispositivos y tener de inmediato el espaciado actualizado de acuerdo con un sistema espacial definido
• Previsualizar cómo fluye el texto en diferentes idiomas al cambiar el texto en un marco
• Crear un diseño de carrito de pago totalmente funcional que calcule el total del pedido según los artículos agregados al carrito
• Crear un prototipo de cuestionario interactivo que utilice la lógica condicional para mostrar si un usuario responde de forma correcta o incorrecta una pregunta

Hay tres maneras principales de usar variables en Figma:

1. Diseños y sistemas de diseño ↓
2. Prototipado avanzado ↓
3. API de Figma ↓

Variables para diseños y sistemas de diseño

Usa variables y modos para implementar tokens de diseño en tu sistema de diseño, cambia los diseños entre diferentes contextos, como temas claros y oscuros. Con variables, puedes diseñar de manera más eficiente y desarrollar un sistema de diseño más potente.

• Tutorial de Figma: Introducción a las variables

  Este tutorial en video abarca los aspectos básicos de las variables, cómo utilizarlas para representar tokens de diseño y cómo emplear variables de color y número para considerar diferentes modos y temas.
• Tutorial de Figma: Variables para tipografía

  En este tutorial en video, aprende a usar variables en las propiedades de fuente, a adoptar variables en un sistema de tipografía existente y a usarlas para potenciar un diseño adaptable.
• Artículo: Descripción general de variables, colecciones y modos →

  Comienza tu recorrido por las variables aquí. Aprende sobre los diferentes tipos de variables y qué son las colecciones y los modos de variables.

• Artículo: Crear y administrar variables →

  Aprende a crear variables y colecciones, a hacer referencia a otras definiciones de variables y a definir el alcance de qué variables se pueden usar en los diseños.

• Artículo: Aplicar variables a diseños →

  Aprende cómo aplicar variables existentes a las propiedades de diseño.

• Artículo: Modos de variables →

  Aprende cómo crear múltiples definiciones para una variable, cada una asociada con un modo. Además, aprende cómo se pueden usar para cambiar rápidamente los contextos de los diseños.

• Artículo: La diferencia entre las variables y los estilos →

  A medida que Figma amplía su conjunto de funciones con variables, quizás te preguntes: ¿cuál es la diferencia entre las variables y los estilos? ¿Cuándo deberías elegir uno sobre el otro?

• Artículo: Variables en Dev Mode →

  Obtén más información sobre cómo acceder a las variables en Dev Mode mientras inspeccionas los diseños, lo que incluye cómo obtener detalles de las variables y variables sugeridas, y cómo ver colecciones locales usando la tabla de variables.

• Archivo de Comunidad: Área de pruebas de variables →

  ¿Quieres adquirir experiencia práctica con variables? Obtén una copia del archivo de área de pruebas de variables para practicar mientras aprendes.

Variables para la creación de prototipos avanzados

Con variables, puedes crear prototipos de alta fidelidad con menos marcos. Usa variables junto con otras funciones avanzadas, como expresiones y condicionales, para llevar tus prototipos al siguiente nivel.

En el prototipado, las variables se usan para guardar los estados o las propiedades de los objetos. Usa interacciones de prototipos para modificar los valores de las variables, lo que puede cambiar la apariencia, el contenido o la visibilidad de los objetos en un diseño, todo en unos pocos marcos simples.

• Tutorial en video: Prototipo con variables

  Observa y aprende cómo usar variables en prototipos siguiendo un ejemplo realista. Revisarás cómo modificar los valores de las variables, cómo construir expresiones simples y cómo usar múltiples acciones y la lógica if/else para evaluar comprobaciones condicionales.
• Artículo: Usar variables en prototipos →

  Aprende los conceptos básicos de cómo crear prototipos con variables en Figma, lo que incluye cómo configurar tus variables, usar la acción Configurar variable para cambiar los valores de las variables y usar variables con variantes de componentes y componentes interactivos.

• Artículo: Usar expresiones en prototipos →

  Aprende a usar expresiones y variables en prototipos para generar valores dinámicos de cadenas, realizar operaciones matemáticas básicas con valores numéricos o incluso evaluar expresiones booleanas.

• Artículo: Múltiples acciones y condicionales →

  Aprende a utilizar múltiples acciones para apilar un número ilimitado de acciones en el mismo disparador, o emplea condicionales para comprobar si se cumple una condición antes de ejecutar una acción mediante la lógica if/else.

• Artículo: Modos de variables en prototipos →

  Aprende a usar los modos de variables en tus prototipos. Puedes configurar los valores de modos específicos según el contexto, o utilizar valores de modos específicos en tus expresiones.

• Archivo de Comunidad: Área de pruebas de prototipado avanzado →

  Haz una copia de nuestro archivo de área de pruebas de prototipado avanzado para practicar más a fondo con las variables en el prototipado.

Variables que usan API

Las variables ahora son compatibles con la API de plugins de Figma, para crear plugins y widgets, y con la REST API. 

• Documentación para desarrolladores: Para la REST API →

  El soporte para variables en la REST API incluye puntos de conexión para consultar, crear, actualizar y eliminar variables.

• Documentación para desarrolladores: Para la API del plugin →

  El soporte para variables en la API del plugin incluye la creación y lectura de variables, y la vinculación de variables a componentes. Por ejemplo, se puede crear un plugin para importar o exportar variables o para convertir estilos en variables.

• Documentación para desarrolladores: Para la API del widget →

  Los widgets pueden acceder a las variables al usar la API del plugin. Los widgets pueden crear y leer variables, pero no se pueden vincular las propiedades del widget a variables.

• Tutorial de Figma: Sincronizar la variable con GitHub

  En este tutorial en video, aprende cómo realizar la sincronización de tus variables con tu base de código. Te mostraremos cómo usar nuestro repositorio de ejemplo de la acción de GitHub para la sincronización de tus variables de Figma y tu base de código.
• Archivo de Comunidad: Sincronización de sistemas de diseño con la REST API de variables →

  Aprende cómo puedes usar la REST API de variables de Figma para configurar flujos de trabajo automatizados que sincronicen los cambios entre los archivos de diseño y tu base de código.