Variables en Figma: Creación y uso para diseño eficiente

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:13

Variables en Figma: Creación y uso para diseño eficiente

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 14 de 29

Clase 14 / 29

Recursos

En el mundo del diseño UX/UI, Figma se ha convertido en una herramienta esencial. Uno de sus aspectos más interesantes son las variables, que ofrecen una forma poderosa y eficiente de mantener la coherencia y optimizar el flujo de trabajo de diseño. Vamos a adentrarnos en la funcionalidad de las variables en Figma y cómo pueden transformar la manera en que se gestionan los diseños.

¿Qué son las variables en Figma?

Las variables en Figma son valores predefinidos que se pueden utilizar en múltiples instancias a lo largo de un proyecto de diseño. Están diseñadas para simplificar el proceso de actualización y mantenimiento de los elementos de diseño, asegurando la consistencia y reduciendo el esfuerzo manual.

¿Cómo se crean variables en Figma?

Para crear variables en Figma, sigue estos pasos:

Navega hacia la sidebar derecha y busca la sección "Local Variables".
Crea una nueva colección para organizar tus variables, como "colores".
Elige el tipo de variable que deseas crear: color, number, string o boolean.
Para una variable de tipo color, selecciona un valor hexadecimal que desees utilizar y asígnalo a tu nueva variable.

¿Cómo funcionan las variables de color?

Las variables de color en Figma se utilizan para mantener un esquema de colores unificado en todo el diseño. Puedes asignar un nombre a un color especificado y usar ese nombre en lugar del valor hexadecimal en diferentes lugares del diseño.

¿Se pueden vincular variables entre sí?

Sí, es posible vincular variables en Figma:

Si tienes una variable color primary y quieres utilizar el mismo valor que una variable brand, simplemente usa el nombre de brand como un alias.
Al vincular variables, cualquier cambio en la variable original se reflejará automáticamente en todos los alias asociados.

¿Qué son los plugins y cómo pueden ayudar con las variables?

Los plugins en Figma añaden funcionalidad extra y aumentan la eficiencia. Un plugin útil en el manejo de variables es "styles to variables":

Este plugin convierte los estilos de color preexistentes en variables de forma automática.
Con él, se facilita la transición de usar estilos fijos a trabajar con variables más dinámicas.

¿Existen limitaciones en las variables de Figma?

Por supuesto, hay limitaciones:

Las variables en Figma actualmente solo pueden contener un valor hexadecimal.
Esto significa que no pueden manejar múltiples valores o almacenar degradados.

¿Cómo aplicar variables a tamaños en Figma?

Las variables también son útiles para manejar dimensiones en tus diseños:

Crea una colección de variables con tamaños definidos, por ejemplo, XS para 8 píxeles.
Usa estas variables en componentes para mantener un tamaño consistente.
Si cambias el tamaño en la variable, este se actualizará en todos los lugares donde se use.

¿Cómo facilitar la actualización de tamaños con plugins?

Al igual que con los colores, hay plugins diseñados para facilitar la actualización de tamaños:

Con plugins como "link space en variables", puedes convertir todos los tamaños numéricos a variables correspondientes automáticamente.
Simplemente selecciona un elemento y el plugin actualizará los números a las variables correspondientes eficientemente.

Las variables y los plugins en Figma son un dúo poderoso que potencian el diseño, facilitan la coherencia y ahorran tiempo. Al implementar estas prácticas, aseguras un diseño más limpio, mantenible y eficiente. Y recuerda, el diseño es un viaje continuo de aprendizaje y mejora, ¡así que sigue explorando y expandiendo tus habilidades en Figma y más allá!

Comentarios (11)11 comentarios

Laura Pino

Hace 2 años

Hola! Personalmente no entendí mucho esta clase pero este vídeo me ayudo un poco:

Danel Felipe Ortiz Mantilla

Hace un año

Chicos, con este video de Figma, se entiende aún mejor la explicación de variables en tipografía:

Luis Gonzalez

Hace 3 años

Las variables son valores que podemos definir dentro de un naming y reutilizar dentro de nuestro diseño.

Para crear una variable hay que hacer clic en el canvas e ir al sidebar derecho y hacer clic en "local variables". Luego seleccionar "crear colección" y crear la variable. Existen 4 opciones y debemos elegir "color".

Carolina Gómez

Resumen: ¿Qué son las variables en Figma?

Definición: Las variables son valores que definimos (por ejemplo, colores, tamaños) dentro de un sistema de nombres (naming) para reutilizarlos en todo el diseño. Funcionan como atajos que mantienen la cohesión visual en los proyectos.
Creación y gestión:
- Para crear variables en Figma, vamos a la sección Local Variables en el panel derecho.
- Se crean colecciones para organizar las variables (por ejemplo, una colección llamada "Colores").
- Hay cuatro tipos de variables: Number, String, Boolean y Color. En este caso se usan principalmente las variables de color.
Uso de variables de color:
- Puedes crear variables usando valores hexadecimales.
- Se pueden usar alias para variables (por ejemplo, usar Brand como alias para Primary), de modo que al cambiar el valor de la variable principal, las alias también se actualizan automáticamente.
- Al aplicar una variable de color a un objeto, se muestra con un ícono especial para indicar que es una variable.
Importar estilos como variables:
- Existe un plugin que permite convertir automáticamente los estilos de color guardados en variables.
- Limitación: las variables solo aceptan un valor hexadecimal, por lo que no pueden almacenar gradientes o más de un valor.
Reemplazar estilos por variables:
- Una vez creadas las variables, podemos eliminar los estilos antiguos y usar solo las variables para mantener la consistencia.
- Las variables pueden guardarse y compartirse en librerías para usarlas en varios archivos.
Variables de tamaño y espaciado:
- Se pueden crear colecciones con variables para tamaños y espacios (por ejemplo, Space XS, Space SM, etc.).
- Al aplicar estas variables a textos o componentes, el aspecto cambia y aparece un tooltip con el nombre de la variable.
- También hay un plugin que convierte todos los valores numéricos definidos en el diseño en variables automáticamente, facilitando la actualización y mantenimiento.

Angélica Armas

¿Cuál es la diferencia entre un estilo y una variable?

Platzi

Las variables en Figma pueden almacenar valores como colores en hexadecimal, mientras que los estilos también pueden incluir gradientes y otros valores. Los estilos guardados se pueden convertir en variables que solo aceptan un valor.

Luis Angel Hugo Alva Celis

En desarrollo web, el 'estilo' se refiere a las reglas de presentación visual definidas en CSS, mientras que una 'variable' es un contenedor para almacenar datos, ya sea en lenguajes de programación o mediante variables personalizadas en CSS.

Cristina Belén Bascur

explicas muy bien Carmen :)

Aldis Uriel Leal Gonzalez

genial, actualizaron el curso

Maria Camila Riascos Salas

Los tokens y las variables son conceptos utilizados en diseño digital, pero tienen diferencias clave.

Las variables en Figma son valores reutilizables que se pueden definir y utilizar en todo el diseño, como colores o tamaños, facilitando la consistencia. Por ejemplo, un color definido como variable se actualiza en todos los elementos que lo utilizan cuando se cambia su valor.

Por otro lado, los tokens son entidades que representan valores en un sistema de diseño, siendo más estructurados y utilizados en frameworks de desarrollo. Los tokens facilitan la integración entre diseño y desarrollo, permitiendo que ambos equipos trabajen con el mismo conjunto de valores.

Ambos conceptos ayudan a mantener la coherencia, pero se aplican en diferentes etapas del flujo de trabajo de diseño y desarrollo.

Miguel Alejandro Camacho Sánchez

Puntos importantes de la clase:

Variables en Figma:
- Son valores reutilizables que se pueden aplicar a colores, tamaños, texto, etc.
- Se pueden definir y gestionar desde la barra lateral derecha en la sección de Local Variables.
Tipos de Variables:
- Existen cuatro tipos: Boolean, String, Number, y Color.
- En esta clase se trabaja principalmente con variables de color y tamaño.
Alias para Variables:
- Se pueden crear alias entre variables, lo que significa que si se cambia una variable principal (por ejemplo, Brand), los alias asociados (como Primary) también se actualizan.
Conversión de Estilos a Variables:
- Figma permite convertir estilos guardados (como colores y tamaños) en variables mediante plugins.
- Esto asegura que todos los estilos usados en el diseño estén centralizados y sean fáciles de actualizar.
Limitación de las Variables:
- Actualmente, las variables solo pueden almacenar un valor hexadecimal, por lo que los degradados no se pueden usar como variables.
Uso de Plugins:
- El plugin Styles to Variables convierte los estilos guardados en variables automáticamente.
- El plugin Sync Spacing Variables transforma automáticamente los tamaños numéricos en variables de espaciado.
Variables de Tamaño (Spacing):
- Los tamaños también pueden gestionarse como variables, utilizando una nomenclatura consistente como XS (8px), SM (16px), etc.
- Al aplicar estas variables, el elemento cambia visualmente y muestra una etiqueta descriptiva al hacer hover sobre él.

Gabriel Carpio Ochoa

Les recomiendo que busquen en la comunidad de Figma los badges que se muestran en clase para que no tengan que recrearlos uno por uno.

Lamentablemente no me deja pegar el link, pero yo busque "AppStore and GooglePlay" y me funciono.

Javier Molina

Tengo una duda, el último plugin que se enseña en este video Link spacing variables, solo funciona en medidas de autolayaout no? porque lo use para ancho y alto y no me funcionó

Cómo iniciar los proyectos en Figma

Diseño responsivo en Figma con Atomic Design

Cómo construir una card con Atomic Design

Estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Cómo crear una grid de 12 columnas en Figma

Constraints en Figma para diseño responsive

Menú responsive con Auto Layout y constraints

Wrap y min/max width en Figma Auto Layout

Cómo usar el design system en Figma

Ensamblando una interfaz mobile en Figma

Breakpoints y Responsively para probar diseño responsive

Crea componentes avanzados

Componentes y variantes en Figma con Atomic Design

Propiedades de Componentes en Figma para Diseños Flexibles

Copies dinámicos en Figma con Google Sheets

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Traducciones automáticas en Figma con variables

Inteligencia Artificial para Figma

Genera iconos, copies e imágenes con Magician

Muse y Builder contra la página en blanco

Crear Landing Pages con Figma

Crea briefings y sitemaps con IA en Figma

Paleta de Colores Corporativos para Banco Transfer

Wireframes de landing page en tres secciones

Landing page responsive con Auto Layout en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Microinteracciones con variantes en Figma

Prototipado de Navegación en Figma: Interacciones y Animaciones

Prototipado avanzado con Figma

Cómo dar y recibir feedback constructivo en proyectos de diseño

Diseño Web Responsive con Figma y Atomic Design

Documentación de Diseño en Figma: Elementos y Plugins Esenciales

Cómo trabajar con los equipos de desarrollo

Dev Mode de Figma para desarrolladores

Figma dentro de Visual Studio Code

Variables en Figma: Creación y uso para diseño eficiente