Módulo 3 Figma

🎨 Módulo 3: Herramientas esenciales de Figma

Objetivo del módulo:
Al finalizar este módulo, podrás manejar las herramientas básicas de Figma para crear formas, manejar textos y trabajar con vectores, sentando las bases para diseñar elementos de una página web.

---

✅ 1. Herramienta de formas (Shapes Tool)

Permite dibujar rectángulos, círculos, líneas, polígonos y estrellas.
Se accede con la tecla R (rectángulo) o O (círculo). Mantén presionada la tecla Shift para crear formas perfectas.
Propiedades:

• Fill (relleno): Color o gradiente.
• Stroke (contorno): Bordes de la forma (color, grosor).
• Corner radius: Bordes redondeados.

📍 Ejemplo: Crear un rectángulo para usarlo como botón y redondear sus esquinas.

---

✅ 2. Herramienta de texto (Text Tool)

Actívala presionando T. Haz clic en el canvas y escribe cualquier palabra.

• Fuente: Usa Google Fonts como “Roboto”, “Poppins”.
• Peso tipográfico: Ligero, Regular, Bold.
• Alineación: izquierda, centro, derecha.
• Altura de línea y espaciado: clave para diseño web.

📍 Ejemplo: Crear un título grande (H1) y un subtítulo (H2) para una landing page.

---

✅ 3. Herramienta de vectores (Pen Tool)

Actívala con la tecla P. Permite dibujar formas personalizadas y trazos libres.
Con clics creas puntos rectos; con clic y arrastrar creas curvas.

📍 Ejemplo: Dibujar un ícono de flecha personalizado.

---

✅ 4. Propiedades comunes

• Opacidad: Ajustar transparencia de cualquier elemento.
• Capas (Layers): Todo lo que dibujas aparece en la barra izquierda.
• Alineación: Botones de alinear en la barra superior para centrar elementos.

---

✅ 5. Mini ejercicio práctico

🎯 Objetivo: Diseñar un botón de llamada a la acción (CTA) para una página web.

1. Crea un rectángulo (R) de 200x50 px y cambia el relleno a color azul (#1E90FF).
2. Redondea los bordes a 8 px.
3. Agrega texto (T) “¡Compra Ahora!” en blanco y céntralo dentro del rectángulo.
4. Agrupa el rectángulo y el texto (Ctrl + G) y nómbralo “Botón Principal”.

📍 Resultado esperado: Un botón limpio y listo para usarse en el diseño web.

---

📥 Tips rápidos del módulo

• Usa atajos: R (rectángulo), O (círculo), T (texto), P (pluma).
• Mantén el diseño ordenado con nombres claros en capas.
• Practica usando colores y tipografías que después usarás en tu guía de estilos web.

---

📌 Preguntas de repaso

Pregunta 1: ¿Qué tecla rápida se usa para crear un rectángulo?

• A) T
• B) R
• C) O
• D) P

✅ Respuesta correcta: B) R

---

Pregunta 2: ¿Qué hace la herramienta Pen (P)?

• A) Crear botones automáticos.
• B) Dibujar formas personalizadas.
• C) Editar colores.
• D) Cambiar fuentes.

✅ Respuesta correcta: B) Dibujar formas personalizadas.