Construir interfaces consistentes y escalables requiere mucho más que talento visual: necesitas un sistema de diseño bien organizado y herramientas que te permitan reutilizar cada pieza de forma eficiente. Aquí se explica cómo montar un diseño responsive en Figma aprovechando componentes, variantes y buenas prácticas que mantienen tu proyecto ordenado desde mobile hasta desktop.
¿Qué es un design system y por qué lo necesitas?
Un design system es un conjunto de reglas, componentes y elementos que resuelven problemas de comunicación entre los equipos de diseño y desarrollo. Su objetivo principal es crear una interfaz consistente y fácil de utilizar, donde todos hablen un lenguaje común [00:10].
La idea es pasar del caos a un orden claro, como si trabajaras con piezas de Lego: construyes desde los elementos más pequeños hasta los más grandes. Este enfoque se conoce como Atomic Design, donde cada átomo (botón, ícono, tipografía) se combina para formar moléculas, organismos y finalmente páginas completas [00:40].
El sistema de diseño presentado incluye:
- Elementos y componentes de navegación.
- El apartado principal o hero de la página.
- Componentes adicionales como la card, iterada durante todo el curso y disponible en diferentes formatos [01:05].
¿Cómo organizar componentes y variantes en Figma?
Dentro de Figma, los componentes se encuentran en el panel de Assets en la sidebar izquierda. Allí puedes acceder a la librería publicada y al design system, donde están organizados por categorías: navegación, heroes, main y las tarjetas o cards [01:30].
¿Por qué cortar y pegar en lugar de copiar y pegar?
Una buena práctica fundamental: si necesitas usar un componente que viene de otro archivo, no hagas copy-paste. Si el archivo original se elimina, Figma pierde la referencia y ya no podrás acceder al componente. La solución es cortar y pegar, asegurándote de que el componente viva dentro de tu propio archivo [01:50].
¿Cómo funcionan las variantes con jerarquía de nombres?
Cuando nombras componentes con una estructura jerárquica usando slash (por ejemplo, menú/autolayout y menú/constraints), Figma los identifica como variantes de un mismo elemento [02:40]. Al seleccionar ambos componentes, aparece en la sidebar derecha la opción "combinar como variantes". Con un clic, obtienes un componente único con dos opciones intercambiables.
Para que las propiedades sean claras al publicar, es importante renombrarlas. En lugar de dejar el nombre genérico "Property 1", selecciona el contenedor de variantes y cámbialo a algo descriptivo como type [03:15]. Así, cuando alguien busque el componente en el panel de Assets, verá opciones como "tipo: autolayout" o "tipo: constraints".
El buscador de Assets también facilita encontrar componentes rápidamente. Si escribes card, aparecerán todos los elementos que contengan esa palabra en su nombre [02:15]. Puedes alternar entre una vista de lista con thumbnails pequeños o una vista con previsualizaciones más grandes, ideal para identificar cada elemento de un vistazo.
¿Cómo preparar el diseño responsive para mobile y desktop?
El diseño se monta en versiones mobile, desktop y tablet, aplicando las herramientas que Figma ofrece: auto layout, grids y constraints [01:15]. Cada componente del sistema ya tiene estas propiedades configuradas, lo que permite que se adapten automáticamente a diferentes tamaños de pantalla.
El frame de la interfaz mobile puede parecer muy largo, pero al visualizarlo como prototipo, Figma lo ajusta al tamaño deseado. Incluso puedes asignarle la carcasa del dispositivo (como un iPhone) y personalizar su color, algo muy útil cuando compartes el prototipo con otros perfiles para que lo revisen directamente en su móvil [03:55].
Los elementos clave para este proceso son:
- Auto layout: organiza elementos de forma flexible y adaptable.
- Constraints: define cómo se comportan los elementos al cambiar el tamaño del frame.
- Grids: establecen la estructura visual de cada pantalla.
- Variantes: permiten intercambiar versiones de un componente sin duplicar trabajo.
Con todo el sistema de diseño listo y los componentes organizados, el siguiente paso es arrastrar cada pieza al layout principal y comenzar a prototipar. Si ya dominas la lógica de variantes y la jerarquía de nombres, montar interfaces responsivas se convierte en un proceso ágil y predecible. ¿Qué componente de tu design system te ha dado más trabajo al configurar?
