Montar un diseño responsive en Figma se vuelve mucho más rápido cuando partes de un design system bien organizado. Aquí descubres cómo aprovechar componentes, variantes y la librería de assets para construir interfaces mobile y desktop sin perder consistencia.

¿Qué es un design system y por qué importa en Figma?

Un design system resuelve problemas de comunicación entre equipos de diseño y desarrollo, dándoles un lenguaje común. Su meta principal es crear interfaces consistentes y fáciles de usar a partir de componentes reutilizables.

Piensa en piezas de Lego: empiezas con elementos pequeños y los combinas hasta formar pantallas completas. Ese enfoque se llama Atomic Design y es la base con la que vas a trabajar tu interfaz.

¿Qué es un design system? Es un conjunto de componentes, reglas y elementos visuales que permiten construir interfaces consistentes. Sirve para que diseñadores y desarrolladores hablen el mismo idioma.

¿Cómo está organizado el sistema de diseño del proyecto?

El sistema con el que vas a montar la interfaz incluye versiones para mobile, desktop y tablet, y agrupa los elementos por función [0:54]. Tienes navegación, hero principal, componentes auxiliares y la pieza estrella: la card, que se ha ido iterando a lo largo del curso.

Dentro de cada componente encuentras aplicado todo lo aprendido:

• Variantes para alternar entre estados o tipos.
• Grids para alinear contenido.
• Constraints para que los elementos respondan al cambio de tamaño.
• Versiones específicas para mobile, tablet y desktop.

Esto te permite revisar cómo está construido cada bloque y reutilizarlo sin reinventar nada.

¿Cómo encontrar y reutilizar componentes desde el panel de assets?

En el panel de la izquierda, dentro de assets, están todos los componentes publicados en la librería [2:09]. Si despliegas las carpetas vas a ver navegación, heroes y main, donde vive el componente de tarjeta.

El buscador de assets agiliza el flujo: escribes card y aparecen todos los componentes cuyo nombre comienza o contiene esa palabra. Puedes alternar entre dos vistas: la lista con thumbnail pequeño o la vista ampliada, mucho más cómoda para identificar visualmente cada pieza.

¿Por qué usar cortar y pegar en lugar de copy paste?

Esta es una de las mejores prácticas que vas a aplicar. Si haces copy paste de un componente que vive en otro archivo y ese archivo se elimina o cambia, Figma pierde la referencia y te quedas sin acceso al componente original.

La solución es simple: en vez de copiar y pegar, corta y pega [2:30]. Así el componente queda alojado en tu archivo y mantiene su vínculo con el original.

¿Cuál es la diferencia entre copy paste y cortar y pegar en Figma? Copy paste duplica el componente pero depende del archivo origen. Cortar y pegar lo lleva a tu archivo asegurando el acceso aunque el original se mueva.

¿Cómo crear variantes con jerarquía de nombres en Figma?

Las variantes nacen de una convención de nombres. Si nombras dos componentes como menu/auto layout y menu/constraints, Figma detecta que pertenecen al mismo elemento y te ofrece la opción combinar como variantes en la sidebar derecha [3:35].

El flujo para crear variantes con jerarquía es:

1. Nombra cada componente con la estructura nombre/variante.
2. Selecciona los componentes que comparten ese prefijo.
3. Haz clic en combinar como variantes desde el panel derecho.
4. Añade nuevas propiedades desde el símbolo más.

El resultado es un único componente con sus variaciones disponibles desde un menú desplegable.

¿Cómo renombrar la propiedad property 1 por algo más claro?

Cuando combinas variantes, Figma asigna por defecto el nombre property 1. Antes de publicar, conviene cambiarlo. Selecciona el contenedor de variantes, haz clic en el nombre de la propiedad y escribe algo descriptivo como type.

Así, al traer el componente desde el panel de assets, en la sidebar derecha vas a ver una opción clara como type: auto layout o type: constraints, en lugar de un nombre genérico [4:33]. Eso facilita la reutilización para cualquier persona del equipo.

¿Por qué no preocuparte por el tamaño del frame en mobile?

Una de las dudas comunes al diseñar interfaces largas es el tamaño del frame. Aunque el diseño se vea muy extenso en el lienzo, no es un problema [5:18].

Cuando lleves ese diseño a un prototipo, Figma te permite envolverlo en una carcasa, por ejemplo la de un iPhone, y hasta cambiar el color del dispositivo. Eso ayuda mucho cuando compartes el prototipo con otros perfiles que lo van a revisar directamente desde su móvil.

¿Has trabajado antes con variantes y constraints en un mismo componente? Cuéntame en los comentarios cómo organizas tu librería de assets.