Módulo 1 Figma

🎨 Módulo 1: Introducción a Figma y la Interfaz

Objetivo del módulo:
Al finalizar este módulo, entenderás qué es Figma, por qué es tan popular en el diseño web y podrás orientarte en su interfaz principal.

---

✅ 1. ¿Qué es Figma?

Figma es una herramienta de diseño de interfaces 100% online que permite crear prototipos de sitios web, apps y diseños colaborativos en tiempo real.

• ✔️ Funciona en el navegador (no necesitas instalar nada, aunque existe versión de escritorio).
• ✔️ Es colaborativo, como Google Docs (puedes invitar a otros a editar o comentar).
• ✔️ Tiene una versión gratuita muy completa.

📍 Dato: Grandes empresas como Uber, Zoom y Spotify usan Figma para sus equipos de diseño.

---

✅ 2. Creación de cuenta en Figma

Para usar Figma necesitas una cuenta gratuita.

1. Ingresa a figma.com.
2. Regístrate con tu correo o con tu cuenta de Google.
3. Elige la opción Free Starter Plan para comenzar.

📍 Recomendación: Si vas a trabajar en equipo, puedes crear un espacio llamado “Team” desde el inicio.

---

✅ 3. Tour por la interfaz

Una vez dentro de Figma verás varias secciones importantes:

• Toolbar: Parte superior, contiene las herramientas (mover, texto, formas, pluma).
• Layers Panel: Parte izquierda, donde ves tus capas, páginas y frames.
• Canvas: El “lienzo” donde dibujas y diseñas.
• Inspector Panel: Parte derecha, muestra propiedades y configuraciones del elemento seleccionado.

📍 Ejemplo: Selecciona una forma y verás cómo el panel derecho cambia para mostrar sus colores, bordes y sombras.

---

✅ 4. Espacios de trabajo (Files, Drafts y Teams)

• Drafts: Espacio privado para practicar y crear sin compartir.
• Files: Archivos que puedes organizar en carpetas o proyectos.
• Teams: Espacio colaborativo donde varias personas pueden editar.

📍 Consejo: Comienza trabajando en Drafts hasta familiarizarte y luego mueve tus diseños a un Team.

---

✅ 5. Mini ejercicio práctico

🎯 Objetivo: Familiarizarse con la interfaz de Figma.

1. Crea una cuenta en Figma.
2. Abre un nuevo archivo (File).
3. Identifica en voz alta (o mentalmente) las 4 áreas principales: Toolbar, Layers Panel, Canvas, Inspector Panel.
4. Dibuja un rectángulo y cambia su color desde el Inspector Panel.

📍 Resultado esperado: Un rectángulo de cualquier color en tu lienzo y mayor confianza en la interfaz.

---

📥 Tips rápidos del módulo

• 👉 Usa Ctrl + / (o ⌘ + / en Mac) para abrir el buscador de comandos de Figma.
• 👉 Familiarízate con la barra superior, ahí están las herramientas más usadas.
• 👉 Explora “Drafts” para practicar sin miedo a borrar algo importante.

---

📌 Preguntas de repaso

Pregunta 1: ¿Qué tipo de herramienta es Figma?

• A) Una app para edición de video.
• B) Un editor de texto.
• C) Una herramienta de diseño y prototipado.
• D) Un sistema de bases de datos.

✅ Respuesta correcta: C) Una herramienta de diseño y prototipado.

---

Pregunta 2: ¿Cuál de estas áreas NO forma parte de la interfaz de Figma?

• A) Toolbar
• B) Canvas
• C) Inspector Panel
• D) Consola de comandos SQL

✅ Respuesta correcta: D) Consola de comandos SQL.