馃帹 M贸dulo 2: Conceptos b谩sicos de dise帽o web en Figma
Objetivo del m贸dulo:
Aprender谩s a trabajar con frames, grids y layouts, sentando las bases para dise帽ar p谩ginas web con estructura y orden.
✅ 1. Frames, grupos y p谩ginas
- Frames: Son como “artboards” o lienzos donde organizas elementos. Puedes crear varios frames para diferentes pantallas o secciones.
- Grupos: Agrupan elementos juntos para moverlos o modificarlos como una unidad.
- P谩ginas: En Figma puedes tener varias p谩ginas dentro de un mismo archivo para separar ideas o versiones.
馃搷 Ejemplo: Crea un frame para desktop y otro para m贸vil en la misma p谩gina.
✅ 2. Configuraci贸n de grids y layouts para web
Para dise帽ar webs responsivas, es fundamental usar grids.
Puedes activar el grid en un frame con el bot贸n derecho → Layout Grid → +, y elegir entre:
- Grid (rejilla cuadrada).
- Columns (columnas), ideal para dise帽o web.
- Rows (filas).
Para web, el grid de columnas suele ser 12 columnas con gutters (espacio entre columnas) y m谩rgenes.
馃搷 Ejemplo: Aplica un grid de 12 columnas a un frame para desktop y ajusta gutters a 20 px.
✅ 3. Tama帽os de lienzo y artboards para dise帽o web
Los tama帽os est谩ndar para web son:
- Desktop: 1440 x 1024 px (o 1920 x 1080 para pantallas grandes).
- Tablet: 768 x 1024 px.
- M贸vil: 375 x 812 px (iPhone X como referencia).
馃搷 Consejo: Usa estos tama帽os para crear frames y as铆 dise帽ar para distintos dispositivos.
✅ 4. Mini ejercicio pr谩ctico
馃幆 Objetivo: Crear una estructura base para una p谩gina web.
- Crea un frame con tama帽o 1440 x 1024 px (desktop).
- Activa un layout grid de 12 columnas con gutters de 20 px.
- Crea otro frame en la misma p谩gina de 375 x 812 px para m贸vil.
- Agrega un rect谩ngulo simple que ocupe las primeras 6 columnas en el frame desktop.
馃搷 Resultado esperado: Dos frames con grids aplicados y un rect谩ngulo en el frame desktop alineado a la mitad del layout.
馃摜 Tips r谩pidos del m贸dulo
- ✔️ Usa frames para separar pantallas o secciones.
- ✔️ Aplica grids para mantener alineaci贸n y consistencia.
- ✔️ Usa tama帽os est谩ndar para asegurarte que tu dise帽o se ver谩 bien en dispositivos reales.
馃搶 Preguntas de repaso
Pregunta 1: ¿Qu茅 es un frame en Figma?
- A) Un conjunto de capas agrupadas.
- B) Un lienzo o 谩rea de trabajo para organizar elementos.
- C) Un estilo de texto.
- D) Una herramienta para dibujar.
Pregunta 2: ¿Cu谩l es el n煤mero t铆pico de columnas en un layout grid para dise帽o web?
- A) 6
- B) 8
- C) 12
- D) 24
No hay comentarios:
Publicar un comentario