馃帹 M贸dulo 5: Tipograf铆a y Dise帽o Responsivo en Figma
Objetivo del m贸dulo:
Aprender谩s a trabajar con tipograf铆as web, jerarqu铆as visuales y c贸mo preparar tus dise帽os para que sean responsivos en diferentes dispositivos.
✅ 1. Tipograf铆as web y Google Fonts
Figma incluye integraci贸n con Google Fonts, lo que te permite usar tipograf铆as libres y optimizadas para la web.
Es importante elegir fuentes legibles y compatibles con diferentes navegadores.
馃搷 Ejemplo: Usar “Roboto” para textos y “Montserrat” para t铆tulos.
✅ 2. Jerarqu铆a tipogr谩fica
Define niveles de texto como: t铆tulos (H1, H2, H3), subt铆tulos y p谩rrafos.
Usa tama帽os, pesos y colores para diferenciar cada nivel.
Mant茅n consistencia en toda la p谩gina.
馃搷 Ejemplo: H1 de 36px Bold, H2 de 24px Regular, p谩rrafo de 16px Regular.
✅ 3. Dise帽o responsivo y frames adaptativos
Para dise帽ar responsivamente:
- Usa frames con tama帽os est谩ndar para desktop, tablet y m贸vil.
- Aplica constraints (restricciones) para que los elementos se ajusten al cambiar tama帽o del frame.
- Las constraints controlan posici贸n y tama帽o relativo dentro del frame.
馃搷 Ejemplo: Configurar un bot贸n para que se mantenga centrado en el frame m贸vil.
✅ 4. Mini ejercicio pr谩ctico
馃幆 Objetivo: Crear texto con jerarqu铆a y aplicar constraints para responsividad.
- Crea un frame de 375 x 812 px (m贸vil).
- Agrega un t铆tulo H1 con “Bienvenido” en 36px Bold.
- Agrega un p谩rrafo de 16px Regular debajo.
- Coloca un bot贸n y ajusta constraints para que est茅 siempre centrado horizontalmente.
馃搷 Resultado esperado: Texto legible y bot贸n que se adapta al tama帽o del frame.
馃摜 Tips r谩pidos del m贸dulo
- Usa Google Fonts para mejor compatibilidad web.
- Define claramente los tama帽os y pesos para cada tipo de texto.
- Prueba tus dise帽os cambiando el tama帽o del frame para verificar responsividad.
馃搶 Preguntas de repaso
Pregunta 1: ¿Qu茅 es una constraint en Figma?
- A) Una limitaci贸n del programa.
- B) Una configuraci贸n que controla c贸mo se ajustan elementos al cambiar tama帽o del frame.
- C) Un tipo de fuente.
- D) Un plugin de Figma.
Pregunta 2: ¿Cu谩l es un tama帽o t铆pico para un p谩rrafo web?
- A) 36px
- B) 24px
- C) 16px
- D) 8px
No hay comentarios:
Publicar un comentario