Cómo usar el design system en Figma

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:005:47

Cómo usar el design system en Figma

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

Clase 8 de 29

Clase 8 / 29

Recursos

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:

Nombra cada componente con la estructura nombre/variante.
Selecciona los componentes que comparten ese prefijo.
Haz clic en combinar como variantes desde el panel derecho.
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.

Carolina Gómez

Hace un año

Resumen de la clase sobre Design System y Figma

¿Qué es un Design System?

Es una herramienta que permite al equipo de diseño y desarrollo trabajar de forma colaborativa con un lenguaje común.
Su objetivo es crear interfaces consistentes, escalables y fáciles de usar, utilizando componentes reutilizables (como piezas de LEGO).
Se basa en el enfoque de Atomic Design, construyendo desde elementos pequeños hasta estructuras completas.

Beneficios:

Ahorra tiempo en el diseño y desarrollo.
Facilita el mantenimiento y evolución del producto.
Permite reutilizar componentes y mantener coherencia visual en todos los dispositivos.

Aplicación en Figma:

Se está utilizando un Design System ya construido durante el curso, que incluye versiones para mobile, tablet y desktop.
Los componentes incluyen: navegación, tarjetas (cards), menús, secciones principales, entre otros.
Todo está organizado en una librería que se puede buscar por nombre desde el panel de assets.

Buenas prácticas en Figma:

No se recomienda copiar y pegar componentes desde otros archivos (copy-paste), porque se pierde el vínculo con el archivo original. En su lugar, usar cortar y pegar (cut-paste).
Para componentes con variantes (como el menú), usar la función "Combinar como variantes".
Se pueden agregar propiedades para organizar mejor los componentes (por ejemplo, cambiar "Property 1" por "Type").

Trabajo práctico:

Se va a montar una interfaz responsive usando el sistema de diseño.
Se construirán primero las versiones mobile, con menú y componentes adaptados.
Al prototipar en Figma, se puede mostrar la interfaz dentro de un marco de dispositivo (como un iPhone) y personalizar su apariencia para presentaciones.

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

Cómo usar el design system en Figma