Cómo usar variantes de Figma para estados UI

¿Cómo usar variantes de Figma? Agrupa componentes con el mismo propósito y diferencias previsibles. Primero enumera las decisiones reales que necesita tomar quien diseña y asigna después una propiedad a cada decisión independiente. Un botón puede tener Tipo=Primario, Tamaño=Mediano y Estado=Predeterminado. Construye solo las combinaciones que utiliza el producto; no conviertas todas las parejas teóricas en componentes. Mantén el texto y los iconos opcionales como propiedades de contenido y prueba el conjunto en instancias dentro de pantallas realistas.

Esto importa porque una biblioteca es una interfaz para el equipo, además de una colección de gráficos reutilizables. Un conjunto bien nombrado y con valores admitidos permite elegir sin adivinar. Uno que mezcle diferencias sin relación obliga a buscar, probar suerte o separar instancias. El ejemplo sigue las recomendaciones actuales de Figma y distingue los cambios visuales de lo que debería editarse como contenido. Para conocer el vocabulario general, consulta qué son los componentes en Figma; para el traspaso a desarrollo, sigue el flujo de Figma a Tailwind.

Qué resuelven las variantes de Figma

Una variante es una versión de un componente dentro de un conjunto de componentes. El conjunto agrupa versiones relacionadas y las propiedades nombran sus diferencias. La guía actual de Figma para crear y usar variantes pone como ejemplos el tamaño, el estado y el color. Así, una persona puede insertar una familia y cambiar una opción intencionada desde el panel de propiedades, en vez de buscar un recurso casi idéntico. Figma requiere que cada variante del conjunto tenga una combinación de valores única.

Utiliza un conjunto cuando las alternativas compartan estructura y función. Un botón primario y uno secundario pueden mantener el lugar de la etiqueta y el icono, pero indicar distinta importancia. Uno pequeño y otro mediano pueden servir a la misma acción y cambiar de dimensiones. Las versiones marcada y sin marcar de una casilla son estados del mismo control. En cambio, una tarjeta promocional y un formulario de ajustes no forman una familia solo porque tengan texto y un botón. Pregúntate si alguien puede explicar la relación fácilmente: «son versiones del mismo control». Si la opción cambia la estructura del contenido, la interacción o el propósito, valora otro componente.

Las variantes comunican configuraciones visuales que pueden seleccionarse; no especifican todo el comportamiento, no demuestran que algo sea accesible ni imponen todas las restricciones de implementación. Añade una descripción breve con los casos de uso y las limitaciones. Las recomendaciones de Figma para gestionar componentes sugieren incluir descripciones y enlaces de documentación para explicar el uso adecuado. El equipo todavía puede editar capas que no estén expuestas como propiedades: los nombres y la documentación guían, pero no bloquean cada decisión.

Elige propiedades independientes antes de dibujar más variantes

Empieza por un inventario de decisiones reales. Para un botón, anota la intención —primario o secundario—, el tamaño —pequeño o mediano— y el estado de interacción —predeterminado, foco, pulsado o deshabilitado—. Separa esos ejes solo si el equipo elige cada uno de manera independiente. Los fundamentos de variantes de Figma recomiendan propiedades separadas para diferencias separadas, en lugar de una sola opción combinada como «Primario grande». Los nombres serán controles de una interfaz pequeña; deben ser breves, estables y fáciles de recorrer.

No crees automáticamente el producto cartesiano completo. Tres tipos, dos tamaños y cinco estados darían treinta combinaciones, aunque el producto quizá solo necesite doce. Puede que las acciones destructivas tengan un único tamaño o que no exista una acción deshabilitada mientras carga. Figma indica que las variantes deben tener combinaciones únicas, pero no exige crear una versión para cada pareja teórica. Anota primero las combinaciones admitidas. Deja fuera las no admitidas de forma intencionada y añade alguna más tarde si una pantalla real lo requiere. Así evitas tanto conjuntos enormes como la impresión engañosa de que cualquier configuración es válida.

Antes de construir el conjunto, lee en voz alta una opción propuesta: «Botón, tipo secundario, tamaño pequeño, estado de foco». Si el modelo no se entiende, revísalo. «Tipo» responde qué significa la acción; «Tamaño», qué dimensiones tiene; «Estado», cuál es su situación de interacción o disponibilidad. No mezcles un tema de color o una opción de contenido dentro de «Estado» sin explicarlo. Si una diferencia solo describe un dibujo excepcional, quizás no merezca una propiedad. Comprueba el modelo en varias pantallas reales en vez de diseñar para una flexibilidad hipotética.

Representa estados y tamaños del botón sin ocultar combinaciones

Dibuja una matriz pequeña con las combinaciones utilizadas en la interfaz. La muestra inferior presenta apariencias distintas y ejemplos atenuados de botones deshabilitados; úsala para conversar sobre qué diferencias son relevantes, no para afirmar que cada tono merece una propiedad. Empieza con un tipo primario y otro secundario, dos tamaños y los estados que admita la interfaz. Compara las variantes lado a lado con el mismo zoom. Mantén la alineación de etiquetas, la posición del icono y el espaciado cuando corresponda; cambiar el énfasis no debería alterar la geometría accidentalmente.

Deja clara la versión predeterminada. Figma utiliza la variante de arriba a la izquierda para representar el conjunto en el panel Recursos, así que coloca ahí la opción más habitual. Llama al conjunto Botón y deja que las propiedades describan sus opciones. El equipo debería encontrar una sola familia y configurar una instancia sin adivinar cuál de muchos recursos casi iguales sigue vigente. Si hace falta una regla especial, por ejemplo «usa el tipo destructivo solo para acciones irreversibles», inclúyela en la descripción y enlaza la guía del producto.

Revisa con cuidado los estados de foco y deshabilitado. El foco debe verse sobre el fondo real; un control deshabilitado no debería ser el único lugar donde aparezca una explicación. Evalúa la pareja concreta de texto y fondo, sin suponer que el nombre del color garantiza el contraste. Una variante de Figma hace que un estado se pueda seleccionar, pero no certifica la interfaz final. El kit puede expresar la intención; el código implementado todavía requiere comprobaciones de teclado, contraste y tecnologías de asistencia.

Prueba también una etiqueta más larga y un icono al inicio. Confirma que cambiar el tamaño o el texto no rompa la alineación. Si necesitas una variante adaptable, verifica que represente un cambio intencionado de composición o comportamiento, no una diferencia accidental del marco. La muestra sirve como referencia visual para el debate; no es una captura de otro producto ni una especificación completa de accesibilidad.

Usa otras propiedades para otros tipos de cambio

Las variantes no son la única forma de flexibilizar un componente. Figma define propiedades booleanas para mostrar u ocultar capas, propiedades de texto para editar cadenas, intercambio de instancias para reemplazar instancias anidadas y espacios flexibles para contenido variable. Elige una variante si la configuración visual es significativa; una propiedad booleana para un icono opcional; texto para la etiqueta; intercambio de instancias para elegir un icono anidado; y un espacio flexible cuando deba cambiar el contenido insertado. Así, el conjunto no se multiplica solo porque cambien el texto o un glifo. La referencia de propiedades de Figma explica estos controles y cómo los ve el equipo.

Imagina un botón con tres etiquetas, dos iconos opcionales y cuatro estados. Si conviertes cada etiqueta e icono en una variante, generarás decenas de opciones sin describir un sistema visual coherente. Expón el texto como propiedad de texto, permite intercambiar el icono o controla su visibilidad por separado y conserva tipo y estado como variantes. Las propiedades separadas tampoco imponen todas las reglas del producto: alguien podría elegir un icono que el código no admite. Documenta las restricciones y prueba instancias representativas. Las propiedades guían, pero no impiden que alguien edite el resto de las capas.

Un espacio flexible es útil cuando debe variar la composición del contenido, por ejemplo, en una tarjeta con un cuerpo opcional o una lista de tareas repetibles. No significa que se pueda insertar cualquier cosa sin límites. Define qué contenido se espera y qué estructura debe conservarse. Si cambia la finalidad del componente, crea otra familia. Asocia el tipo de propiedad con la decisión: seleccionar una configuración conocida, activar una capa, editar texto, sustituir un recurso anidado o componer contenido flexible.

Nombra propiedades y valores para que el conjunto sea claro

Figma puede inferir nombres a partir de la convención usada en los componentes, pero las etiquetas automáticas pueden ser genéricas. Cámbialas en el panel del conjunto por Tipo, Tamaño o Estado en vez de dejar «Propiedad 2». Mantén el vocabulario en todo el archivo. Si tres familias de botones dicen Variante=Primario, Estilo=Marca y Énfasis=Fuerte para la misma idea, quienes las utilicen tendrán que aprender tres taxonomías para una decisión.

Comprueba que cada pareja de variantes tenga una combinación única. Si dos versiones muestran Tipo=Primario, Tamaño=Mediano, Estado=Predeterminado, Figma puede señalar un conflicto aunque sus píxeles sean distintos. Los controles no pueden distinguirlas; no es un juicio visual. Cambia los valores para expresar una diferencia real, mueve una opción a otra familia o elimina el duplicado. No inventes un valor vacío de significado solo para silenciar el error. Pon primero la opción que más se modifica, usa un valor predeterminado útil, evita siglas sin explicar y mantén la capitalización.

Los conjuntos grandes también tienen un coste. Figma indica que al insertar una instancia con variantes se incorporan al archivo las variantes de ese conjunto. No añadas combinaciones especulativas «por si acaso». Crea las versiones que usan las pantallas y después valora si el agrupamiento facilita encontrarlas. Divide el conjunto si su nombre ya no describe un propósito coherente, si las propiedades cuesta entenderlas o si las excepciones se han convertido en la forma habitual de uso.

Prototipa estados relevantes y prueba la instancia

Los componentes interactivos pueden conectar variantes del mismo conjunto para crear prototipos. La guía de componentes interactivos de Figma muestra botones que cambian al pasar el cursor y casillas que alternan entre marcadas y sin marcar. Esto facilita mostrar un flujo, pero no sustituye la especificación de interacción. Decide qué estados necesita el control; no añadas por costumbre foco, carga, error, pulsado y deshabilitado a cada familia.

Prueba una instancia, no solo el componente principal. Colócala en un marco realista, cambia cada propiedad visible, utiliza una etiqueta larga y prueba el icono opcional. Comprueba las modificaciones de instancia al cambiar de variante y previsualiza las conexiones del prototipo. Figma señala que las conexiones interactivas usan variantes del mismo conjunto y que al insertar una instancia también se incorporan sus variantes al archivo. Alguien que no creó el componente debería encontrarlo y configurarlo sin ayuda verbal.

Revisa la accesibilidad por separado. El foco debe seguir visible sobre las superficies contiguas. Un control deshabilitado no debería ser el único lugar donde se explique una razón. Un control que solo tiene icono necesitará un nombre accesible en la interfaz implementada. Estas comprobaciones se refieren al producto y al código; Figma no las garantiza. El diseño comunica los estados previstos, pero el equipo de desarrollo debe validar semántica, uso del teclado, contraste y salida del lector de pantalla.

Decide si necesitas una versión adaptable u otro componente

No crees automáticamente una variante por dispositivo. Muchos componentes cambian de tamaño con Auto Layout y reglas de contenido. Añade una variante por punto de ruptura cuando cambie de forma intencionada la composición o el comportamiento. La guía de componentes adaptables de Figma describe variantes asociadas a puntos de ruptura. Documenta cuándo usar cada una y comprueba que el cambio no oculte contenido ni deje modificaciones confusas. Si las opciones sirven para tareas distintas, el panel cuesta recorrerlo o abundan las excepciones, divide la familia. Un control de navegación y un botón destructivo pueden compartir fundamentos sin ser el mismo componente.

Usa el trabajo real como evidencia. Revisa varias pantallas, cuenta qué valores aparecen y detecta parejas que nunca se usan. Pide a otra persona que inserte el componente sin instrucciones. Si no puede anticipar qué cambia cada propiedad, simplifica o renombra las opciones. Si separa las instancias repetidamente para hacer ajustes que el sistema debería ofrecer, expón una propiedad adecuada o documenta el límite. La meta no es tener el menor número de componentes, sino ofrecer opciones seguras y fáciles de encontrar.

Las bibliotecas publicadas son interfaces de las que dependen los archivos consumidores. Prueba las instancias existentes antes de renombrar o quitar valores y avisa a los equipos si un cambio les afecta. Las recomendaciones de gestión de Figma sugieren valorar transiciones menos disruptivas antes de hacer cambios incompatibles. Conserva la compatibilidad cuando sea práctico y, si no lo es, explica la migración. Para elegir un punto de partida más amplio, consulta cómo evaluar un kit gratuito de Tailwind.

Usa EmviUI como referencia práctica

EmviUI es un kit de interfaz y sistema de diseño para Figma con componentes editables, variables y fundamentos alineados con Tailwind; su catálogo público incluye variantes de botones. Puede servir como referencia para observar cómo un kit agrupa opciones visuales antes de adaptar el modelo a las reglas del equipo. No decide qué estados admite tu producto ni garantiza su accesibilidad. Empieza por un botón en una pantalla de EmviUI: identifica tipo, tamaño y estado, y compara esos nombres con la API del componente correspondiente en el código. La información actual está en emviui.com.

Como ejercicio, escoge una acción primaria, una secundaria y una destructiva. Anota los tamaños que realmente se usan y enumera los estados necesarios. Crea solo las combinaciones admitidas; mantén las etiquetas y las opciones de icono separadas cuando sean cambios de contenido. Coloca instancias en un formulario de dashboard, un modal y un marco móvil estrecho. Pide a alguien del equipo que cambie las opciones y explique el resultado. Si puede hacerlo sin abrir el componente principal, el modelo funciona.

EmviUI puede acelerar el primer borrador al aportar ejemplos editables de botones y patrones relacionados. No elige las variantes de tu producto, no garantiza que cada patrón cumpla tus requisitos de accesibilidad ni convierte por sí solo un componente de Figma en código de producción. Mantén el conjunto conectado a un contrato de implementación: nombres que correspondan a las propiedades del código, solo valores admitidos, notas para las combinaciones excepcionales y un registro breve de los cambios de biblioteca.