Guía sobre variables en Figma

Las variables en Figma Design almacenan valores reutilizables que se pueden aplicar a todo tipo de propiedades de diseño y acciones de creación de prototipos. Ayudan a ahorrar tiempo y esfuerzo al construir diseños, gestionar sistemas de diseño y crear flujos de creación de prototipos complejos.

Te permiten hacer lo siguiente, por ejemplo:

• Crear tokens de diseño para mejorar la eficacia de la gestión de los sistemas de diseño
• Cambia un marco entre diferentes tamaños de dispositivo y haz que el espaciado se actualice inmediatamente, según un sistema espacial definido
• Vista previa de cómo fluye el texto en diferentes idiomas cambiando el texto en un marco
• Crear un diseño de carrito de la compra totalmente funcional que calcule el total del pedido en función de los artículos que se hayan añadido
• Crea un prototipo de cuestionario interactivo que utilice lógica condicional para mostrar si un usuario responde a las preguntas de forma correcta o incorrecta

Hay tres maneras principales de usar variables en Figma:

1. Diseños y sistemas de diseño ↓
2. Creación avanzada de prototipos ↓
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 y 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 vídeo cubre los fundamentos de las variables, cómo utilizarlas para representar tokens de diseño y cómo emplear variables de color y número para tener en cuenta diferentes modos y temas.
• Tutorial de Figma: Variables para la tipografía

  En este tutorial en vídeo, aprenderás a utilizar variables en las propiedades de fuente, a integrarlas en un sistema tipográfico existente y a emplearlas para impulsar un diseño adaptable.
• Artículo: Resumen de variables, colecciones y modos →

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

• Artículo: Crear y gestionar variables →

  Aprende a crear variables y colecciones, referenciar otras definiciones de variable y definir el alcance de las variables que se pueden usar en los diseños.

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

  Aprende a aplicar variables existentes a propiedades de diseño.

• Artículo: Modos de variables →

  Aprende a crear múltiples definiciones para una variable, cada una asociada a un modo. Además, descubrirás cómo usarlas para cambiar rápidamente los contextos de tus diseños.

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

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

• Artículo: Variables en Dev Mode →

  Aprende más sobre cómo acceder a las variables en Dev Mode mientras inspeccionas los diseños, descubre cómo obtener detalles de las variables y variables sugeridas y cómo ver colecciones locales usando la tabla de variables.

• Archivo de la comunidad: Área de pruebas de variables →

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

Variables para la creación de prototipos avanzada

Con las variables, puedes crear prototipos de alta fidelidad usando menos marcos. Utiliza variables junto con otras funciones avanzadas, como expresiones y condicionales, y da un salto cualitativo con tus prototipos.

En prototipos, las variables se utilizan para almacenar estados o propiedades de los objetos. Usa las interacciones de prototipo 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 sencillos.

• Video tutorial: Crea prototipos con variables

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

  Aprende los conceptos básicos de la creación de prototipos con variables en Figma, como configurar las variables, utilizar la acción Establecer variables para cambiar los valores de las variables y utilizar variables con variantes de componentes y componentes interactivos.

• Artículo: Usa expresiones en prototipos →

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

• Artículo: Acciones múltiples y condicionales →

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

• Artículo: Modos variables en prototipos →

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

• Archivo de la comunidad: Área de pruebas de creación de prototipos avanzada →

  Haz una copia de nuestro archivo de área de pruebas de creación de prototipos avanzada para obtener más práctica con las variables.

Variables que usan API

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

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

  El soporte para variables en la API REST incluye extremos con los que consultar, crear, actualizar y eliminar variables.

• Documentación para desarrolladores: Para la API de plugins →

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

• Documentación para desarrolladores: Para la API de widgets →

  Los widgets pueden acceder a las variables mediante la API de plugins. Los widgets pueden crear y leer variables, pero no se pueden vincular las propiedades del widget a variables.

• Tutorial de Figma: Sincroniza la variable con GitHub

  En este tutorial en vídeo, aprenderás a sincronizar tus variables con tu base de código. Explicaremos cómo usar nuestro repositorio de ejemplos de acciones de GitHub de variables para sincronizar tus variables de Figma y tu base de código.
• Archivo de la comunidad: Sincronización de sistemas de diseño usando la API REST de variables →

  Descubre cómo puedes usar la API REST 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.