Figma y prototipado
Duplicar un botón es fácil. Mantener veinte botones coherentes exige algo más. Los componentes y variantes en Figma permiten conservar unas reglas comunes y decidir qué puede cambiar en cada uso.
En este tutorial construiremos un botón con tres estados y una etiqueta editable. Después comprobaremos cómo responde al cambiar el texto. Un ejemplo pequeño para entender una idea que también se aplica a tarjetas, menús o formularios.
Si acabas de abrir la herramienta, empieza por los conceptos básicos de Figma. Aquí trabajaremos en un archivo de Figma Design con permiso de edición.
Componente, instancia y variante: tres cosas distintas
El componente principal guarda la base de una pieza. Una instancia es un uso vinculado a esa base. Una variante representa una versión definida dentro de una familia: por ejemplo, el estado normal o desactivado de un botón.
Cambiar una etiqueta no suele justificar una nueva variante. «Enviar» y «Solicitar información» pueden compartir estructura. El contenido cambia; la función sigue siendo una acción.
Piensa primero en la regla. ¿Qué debe mantenerse igual? ¿Qué diferencia tiene significado? Esta decisión forma parte de un sistema de diseño, aunque empieces con una sola pieza.
1. Construye el botón con Auto Layout
Vamos a usar un texto de 16 px, relleno horizontal de 24 px, relleno vertical de 14 px y esquinas de 6 px. Son valores de ejemplo. No una receta universal para cualquier interfaz.
- Crea una capa de texto con la etiqueta «Solicitar información».
- Selecciona el texto y aplica Auto Layout con Shift + A.
- En la barra derecha, comprueba que el flujo sea horizontal y que el contenido esté centrado.
- Introduce 24 px de relleno horizontal y 14 px de relleno vertical.
- Aplica un fondo burdeos y texto claro. Añade 6 px de radio.
- Ajusta el ancho y el alto al contenido: Hug contents, que puede aparecer como «Ajustado» según el idioma de la interfaz.
Evita empezar dibujando un rectángulo de ancho arbitrario y colocando el texto encima. Queremos que el contenedor responda al contenido. Si necesitas repasar esta lógica, consulta qué es Auto Layout en Figma.
Captura real de Figma: flujo horizontal, ajuste al contenido y rellenos de 24 y 14 px en la barra derecha. Amplía para ver los controles.
La captura del ejemplo utiliza variables para compartir colores y medidas. Puedes escribir los mismos valores directamente. Crear variables no es un requisito para seguir este recorrido.
2. Convierte la base en un componente
Selecciona el contenedor completo del botón, no solo la etiqueta. Utiliza Crear componente en la barra derecha. Ponle un nombre claro, como «Botón / Solicitud».
Figma diferencia visualmente los componentes y sus instancias mediante sus iconos. Acostúmbrate a mirar las capas: un botón que parece idéntico en el lienzo puede ser un grupo independiente.
La documentación de Figma explica cómo crear componentes reutilizables. En este ejemplo, la base incluye texto, relleno, alineación y forma.
3. Crea variantes para los estados
Añade una variante desde el componente seleccionado. Repite hasta disponer de tres. Selecciona el conjunto y cambia el nombre de la propiedad de variante por Estado.
- Normal: la presentación habitual del botón.
- Hover: una versión ligeramente más oscura para el puntero.
- Desactivado: una apariencia diferenciada para una acción que no está disponible.
Cada variante necesita un valor distinto en la propiedad Estado. Cambiar solo el color, dejando dos variantes con la misma combinación de propiedades, produce un conflicto.
Instancias reales del mismo componente con tres valores de Estado. Es una demostración visual, no una implementación web.
Estos tres estados sirven para entender el mecanismo. No son un inventario completo para una web. También tendrás que diseñar el foco de teclado y los estados que necesite la acción. Puedes ampliar el criterio con los estados de interfaz.
4. Usa instancias para comprobar la familia
Abre Recursos / Assets y lleva el componente al lienzo. Así creas una instancia vinculada. Selecciónala y busca la propiedad Estado en la barra derecha.
Cambia entre Normal, Hover y Desactivado. La instancia debe conservar su vínculo y mostrar la variante elegida. No necesitas dibujar tres botones nuevos cada vez que uses esta familia.
Si los botones quedaron como componentes separados, selecciónalos y utiliza Combinar como variantes / Combine as variants. Figma detalla este proceso en su guía de variantes.
5. Cambia la etiqueta sin multiplicar variantes
Selecciona la capa de texto dentro del componente principal. Junto al contenido de texto, crea una propiedad de componente de tipo texto y llámala «Texto». Esa propiedad controla el contenido de la etiqueta.
Crea dos instancias de la variante Normal. Escribe «Enviar» en una y «Solicitar una primera conversación» en la otra. El relleno debe mantenerse, mientras el ancho se adapta.
Dos instancias Normal con la propiedad Texto modificada. El ancho cambia y el relleno se mantiene.
Si el texto se corta, revisa qué capa tiene ancho fijo y cuál se ajusta al contenido. Comprueba también que la instancia conserve Auto Layout. No soluciones el síntoma arrastrando su borde sin entender la regla.
No hace falta crear una variante llamada «Enviar» y otra llamada «Solicitar una primera conversación». Para este cambio sirve una propiedad de texto. Figma distingue propiedades de texto, booleanas y de variante.
6. Haz una prueba de herencia
Selecciona el componente principal de la variante Normal. Cambia temporalmente su relleno horizontal de 24 a 32 px. Observa las dos instancias Normal: deberían recoger el cambio si no has sobrescrito esa propiedad.
Después, deshaz la prueba. Si una instancia no responde, comprueba su vínculo y sus modificaciones particulares. Desvincularla para «arreglarla» elimina precisamente la relación que estás aprendiendo a mantener.
Las otras variantes son componentes principales distintos dentro de la familia. Una modificación local en Normal no cambia automáticamente todos sus hermanos. Para compartir medidas entre variantes puedes usar variables, como en el ejemplo de las capturas.
Cuándo reutilizar y cuándo separar
Reutiliza cuando la pieza conserva su función y su estructura. Define variantes cuando necesitas alternativas previstas: estado, tamaño o tratamiento visual. Crea otra pieza cuando cambia la función o la composición de forma sustancial.
Un campo para introducir un correo no debería convertirse en otra variante del botón solo porque ambos tengan esquinas redondeadas. Parecerse no significa cumplir el mismo papel.
Tampoco generes todas las combinaciones imaginables. Empieza por las que la interfaz necesita. Un componente debe aclarar decisiones, no convertirse en un catálogo imposible de gestionar.
El prototipo y la web siguen siendo cosas distintas
Elegir Hover en la barra de propiedades cambia el aspecto de la instancia en el diseño. Para probar una transición debes configurar una interacción en Prototipo. Figma permite hacerlo con componentes interactivos.
Eso todavía no implementa un botón accesible en una web publicada. El foco, la activación con teclado y la disponibilidad real de una acción deben resolverse también en la construcción. Esta revisión de una web con teclado ayuda a entender la diferencia.
Una buena pieza reutilizable mantiene una intención clara y deja cambiar lo que tiene sentido. Esa es la regla que merece repetirse.
Puedes seguir con la serie de Figma y prototipado o consultar el índice completo de diseño web.
