Diseño Responsive y Grids en Figma

Clase 4 de 29 • Curso de Figma: Técnicas Avanzadas de Diseño

Ariel Hernán Contini

student•

Una grid es una cuadrícula que se usa para organizar y diseñar el contenido de una pagina web. Siguiendo unas guías básicas, se crea un aspecto uniforme y se pueden alinear los elementos de manera ordenada. El principio de la cuadricula de 8pt es que se utilizan múltiplos de 8 (8,16,24,32,40...)para el diseño, las dimensiones, el relleno y el margen de los elementos.

Proporciona una jerarquía visual a los elementos e impulsa una escalabilidad coherente con menos decisiones que tomar mientras se mantiene un ritmo de calidad.

Santiago Peñuela

student•

Aquí pueden revisar las cuadriculas, si no las tienen activadas con shift + G las activan 😄 https://www.figma.com/community/file/1255273164363221819

Ariel Hernán Contini

student•

**RESPONSIVE ** Cuando utilizamos el término Responsive (Adaptable), nos referimos principalmente al responsive web design (Diseño web adaptable).

Esto significa hace que un sitio web sea accesible y adaptable en todos los dispositivos: tablets, smartphones.

Ariel Hernán Contini

student•

Mobile First es un enfoque de desarrollo y diseño web que se enfoca en la priorización del diseño y el desarrollo para dispositivos móviles por encima del diseño y desarrollo para pantallas de escritorio.

Rulo Code

student•

Excelente el uso de Grid no puedo esperar a ver como acomodar todo de manera responsive !

Daniel Jiménez Prestan

student•

Hola! Con el auto-layout podemos definir el padding de los elementos (de izq a derecha; y de arriba a abajo), qué beneficio tiene entonces usar el grid al mismo tiempo que el auto-layout?

Carmen Ansio

teacher•

Hola Daniel! Para diseñar, tener unas grids definidas ayudan a tener consistencia y facilitan el acomodamiento de los elementos. En el caso del autolayout, si utilizas grids, puedes utilizar las constraints a la vez para que los elementos se basen en estas grids a al hora de crecer ☺️

Jonathan Antonio González

student•

Podrías pasarme el link a ese figma para ver las grids?

Carmen Ansio

teacher•

Hola Jonathan!

Aquí lo tienes archivo en community cualquier duda al respecto no dudes en preguntarla.

Carolina Gómez

student•

¿Qué es el diseño responsive?

Responsive Web Design significa que un sitio se adapta y se ve bien en cualquier dispositivo: móviles, tablets, computadores.
Asegura una experiencia de usuario fluida sin importar el tamaño de pantalla.

Mobile First

Es una metodología que prioriza el diseño para móviles antes que para escritorio.
Hoy en día, los navegadores modernos ya trabajan con este enfoque, por lo tanto, diseñar desde móvil garantiza una base sólida para crecer hacia pantallas más grandes.
Los estilos deben pensarse primero para móviles, luego se escalan con media queries u otras herramientas.

Uso de Grids (Cuadrículas)

Las grids vienen desde el diseño editorial y permiten orden y coherencia visual.
En diseño web, se usan para alinear contenido de forma lógica y estética.
La cuadrícula de 8pt: usa múltiplos de 8 (8, 16, 24, etc.) para márgenes, paddings y tamaños. Esto:
- Reduce decisiones innecesarias.
- Mantiene una escala visual armónica y consistente.

Figma y diseño responsive

En Figma, se pueden crear Frames (F) con tamaños predefinidos como Desktop 1440x1024.
Dentro del Frame se añade una Layout Grid, que puede ser:
- De columnas (por ejemplo, una grid de 12 columnas).
- Con valores personalizados o presets.
Los grids son adaptables, lo que los hace útiles para prototipos responsive.
Se pueden ajustar colores, sombreado, tipo de tipografía y gutter (espacio entre columnas).

En resumen

Diseñar responsive no es solo una técnica, es una mentalidad de diseño.
Empieza con Mobile First, usa grids bien definidos y sigue una lógica de orden visual.
Herramientas como Figma te facilitan la maquetación con buenas prácticas y flexibilidad.

Miguel Alejandro Camacho Sánchez

student•

Puntos importantes de la clase:

Diseño responsive:
- Un diseño adaptable que funciona bien en cualquier dispositivo.
- Mobile First es un enfoque que prioriza los dispositivos móviles al diseñar, asegurando que el diseño sea óptimo desde el móvil hasta el desktop.
Grids (rejillas):
- Las grids son cuadrículas utilizadas para organizar el contenido de manera uniforme y coherente.
- Las grids en Figma pueden ser responsive y adaptarse a diferentes tamaños de pantalla.
- Utilizamos una grid de 12 columnas para los diseños de desktop, que es una convención común en el diseño web.
Escala basada en múltiplos de 8:
- Trabajar con una escala basada en múltiplos de 8 (8, 16, 24, 32...) permite coherencia en las dimensiones y espaciamiento de los elementos del diseño.
- Facilita la consistencia en el layout y la facilidad de uso.
Personalización de grids:
- Puedes ajustar el número de columnas, el gutter (espacio entre columnas), y si las columnas deben comportarse de manera fluida o fija.
- El gutter es la separación entre columnas, y en este caso se define como 24 píxeles, siguiendo la escala de 8.
Uso de constantes:
- Las constantes nos permiten definir cómo los elementos se ajustan o cambian de tamaño dentro de su contenedor en función del tamaño del dispositivo.
- Esto es esencial para asegurar que el diseño sea verdaderamente responsive.
Guardar y reutilizar grids:
- Las grids, al igual que los colores o tipografías, pueden guardarse y reutilizarse desde la librería en Figma.
- Esto facilita la consistencia entre diferentes proyectos y equipos de diseño.
Configuraciones avanzadas de grids:
- Puedes definir si las columnas se ajustan automáticamente al tamaño del contenedor (stretch), o si el ancho de las columnas debe mantenerse fijo.
- Las opciones de configuración permiten un mayor control sobre el diseño responsive.

Carolina Calvillo

student•

buen resumen! gracias

Xavier Flores

student•

[miclase](https://platzi.com/new-home/clases/7998-figma-tecnicas-avanzadas/63626-uso-de-grids/)

YirLe

student•

Hola, una pregunta... La profe compartió el archivo que está utilizando en Figma... Es que en el principio había uno, pero estaba roto el vínculo.

Danel Felipe Ortiz Mantilla

student•

Hola YirlLe, mira, es este:

Nayfer Carolina

student•

¿Dónde encuentro el archivo de figma del curso?

Carmen Ansio

teacher•

Hola! En la primera clase tienes el link, pero te lo comparto por aquí https://www.figma.com/community/file/1255273164363221819

David Pérez

student•

Hola estoy ingresando al link del figma pero me aparece solo una pagina que dice Figma avanzado pero no hay ningún elemento. Está desactualizado?

Ángela Herrera

student•

a mi no me reflejan los estilos de grid, eso suele suceder?

Ludvin Gutierrez

student•

Esos estilos de Grillas aparecen pporque sea han creado verdad?

pero si comienzo de nuevo en un ahoja en blanco esos estilos de grillas no apareceran. O por defecto igual aparecen?

Platzi

student•

Los estilos de grillas aparecen porque se han creado previamente en el design system. Si comienzas en una hoja en blanco, los estilos de grillas no aparecerán por defecto.

Carmen Ansio

teacher•

Hola Ludvin! Los estilos de Grillas se han creado previamente y guardado como estilo. Es igual que cuando guardas un color como estilo, pero en el apartado de Grid

Alejandra Espinosa

student•

¿existe alguna regla o como uno sabe cuantas columnas o filas en la grid se debe colocar para una aplicación mobile o web?

Carmen Ansio

teacher•

Te dejo por aquí un artículo estupendo que te explica el porqué y como utilizar un sitema de rejillas de 8 puntos

Esteban Fraccascia

student•

Perdón mi ignorancia en donde están las cuadrículas que la profe usa en los ejemplos?. Gracias

Victor Dzul

student•

Cabe mencionar que la cuadrícula de 8pt se utiliza mucho en la industria porque lo tomaron como base Google y Apple para su sistema de diseños.

David Pérez

student•

Hola, como puedo obtener la librería que ya tiene incluida Carmen? ya que en el minuto 2:43 ella le da clic a los 4 puntitos y se abren las grids que ya están en la librería y dice que estan por defecto, pero cuando yo lo hago no me muestra nada. :C

Xavier Flores

student•

text
```\[text]\(<u>https://nextjs.org/docs/getting-started/project-structure</u>)

Xavier Flores

student•

[text](<u>https://nextjs.org/docs/getting-started/project-structure</u>)

Diseño Responsive y Grids en Figma

Cómo iniciar los proyectos en Figma

Diseño Responsive y Prototipado Avanzado en Figma

Atomic Design: Creación de Componentes en Figma

Gestión de estilos y librerías compartidas en Figma

Diseño Responsive y Técnicas Avanzadas

Diseño Responsive y Grids en Figma

Uso de Constraints para Diseños Responsive en Figma

Menú Responsive en Figma: Uso de Constraints y Auto Layout

Nuevas Funciones de AutoLayout en Figma para Diseños Responsive

Montaje de Diseño Responsive con Figma: Mobile y Desktop

Creación de Interfaces Responsivas en Figma

Diseño de Interfaces Responsivas en Figma: Uso de Plugins y Breakpoints

Crea componentes avanzados

Creación de Componentes y Variantes en Figma

Propiedades de Componentes en Figma para Diseños Flexibles

Sincronización de Google Sheets con Figma para gestión de copies

Variables en Figma

Variables en Figma: Creación y uso para diseño eficiente

Gestión de Variables de Texto para Traducciones en Figma

Inteligencia Artificial para Figma

Plugins de IA en Figma: Uso de Magician para Diseños Eficientes

Generación de Títulos para Landing Page del Sector Banca

Crear Landing Pages con Figma

Integración de IA en Figma: Uso de Plugins para Diseño UI/UX

Paleta de Colores Corporativos para Banco Transfer

Diseño de Landing Page con Secciones y Wireframes

Diseño de Landing Page Responsive en Figma

Interacción Avanzada con Prototipos

Creación de Microinteracciones en Figma: Guía Paso a Paso

Creación de Microinteracciones con Figma Prototyping

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

Colaboración con desarrollo: Dev Mode de Figma

Colaboración con Desarrollo: Figma y Visual Studio Code