Lección 2 de 7 · 10 min
Arma tu estudio
Objetivo:Deja listas tus tres herramientas, sabe qué trabajo hace cada una y aprende a moverte por Figma.
TU ESTUDIO, DESDE CERO
uxuiopen.comTres herramientas, tres trabajos. Un chat de IA te ayuda a pensar, Claude Design te ayuda a explorar opciones rápido y Figma es donde pules el diseño final a mano. Tu diario las conecta. Mira el vídeo de dos minutos y luego arma el tuyo.
- 1 · Pensar
ChatGPT
Planes, investigación, ideas
- 2 · Explorar
Claude Design
Layouts, opciones, presentaciones
- 3 · Pulir
Figma
Trabájalo a mano
- 4 · Registrar
Diario
Qué pediste y qué decidiste
Usa un chat de IA para…
- planear un proyecto y dividirlo en pasos
- investigar un público o un tema
- generar ideas de nombres, titulares y conceptos
- recibir feedback sobre tu razonamiento
Usa Figma para…
- maquetar pantallas y pósteres con precisión
- controlar a mano la tipografía, el color y el espaciado
- crear componentes que puedes reutilizar
- compartir diseños y prototipos con otras personas
Figma
Tu lienzo. Donde pules, organizas y entregas el trabajo.
Pasos
- 1Crea una cuenta gratis.
- 2¿Estás en una cohorte? Te verificamos para el plan Education, así que regístrate con el email con el que postulaste.
- 3Crea un archivo de diseño nuevo llamado "Estudio".
ChatGPT
Tu compañero para pensar. Planes de investigación, ideas, crítica y redacción.
Pasos
- 1Inicia sesión.
- 2Crea un proyecto llamado "Estudio de diseño" para mantener juntos tus chats.
Claude y Claude Design
Tu explorador. Layouts, mockups y presentaciones rápido, y puede seguir un design system.
Pasos
- 1Inicia sesión en Claude.
- 2Crea un proyecto llamado "Estudio de diseño".
- 3Claude Design requiere un plan pago y está en vista previa de investigación. Es opcional en esta unidad.
Aprende a moverte por Figma
Figma parece abrumador la primera vez que lo abres, pero todos los archivos tienen las mismas cinco áreas. Apréndelas una vez y cualquier tutorial tendrá sentido. Haz clic en esta ventana simplificada de Figma y encuentra las cinco.
Haz clic en cada parte de la ventana de Figma para encontrar las cinco.
0 de 5 encontradasTodo en Figma vive en un árbol sencillo. Los archivos contienen páginas, las páginas contienen frames y los frames contienen capas. Cuando ves el árbol, siempre sabes dónde está cada cosa.
- 📁Unidad 1 (archivo)
- 📄Zona de pruebas (página)
- #Póster (frame)
- ▢Encabezado (grupo)
- TTitular (texto)
- ◯Círculo (forma)
- 🖼Foto (imagen)
- 📄Diario (página)
- Archivo
- Un proyecto. Puedes compartirlo con otras personas mediante un enlace.
- Página
- Una pestaña dentro del archivo. Usa páginas para separar el trabajo: Zona de pruebas, Diario, Biblioteca de prompts.
- Frame
- Una mesa de trabajo con un tamaño: una pantalla de teléfono, un póster, una diapositiva. Los diseños viven dentro de frames.
- Capa
- Cualquier cosa dentro de un frame: texto, formas, imágenes, grupos. El panel de capas las muestra todas.
Leer sobre una herramienta enseña muy poco. Aquí tienes una herramienta de diseño reducida a lo esencial, dentro de esta misma página. Completa las seis tareas y habrás hecho todo lo que te pedirán tus primeros diez minutos en Figma.
Capas
- Frame 1
Posición y tamaño
Auto layout
Apariencia
Relleno
Trazo
Un archivo vacío, un frame y seis cosas por hacer. Presiona V para mover, F para dibujar un frame, T para texto y R para un rectángulo: las mismas teclas que usa Figma.
- 1
Ponle nombre al frame
Selecciónalo en la lista de capas y escribe un nombre real arriba del panel Diseño, por ejemplo «Póster». Nadie puede trabajar en un archivo lleno de Frame 1, Frame 2, Frame 3.
- 2
Dale forma de póster
- 3
Agrega un titular
- 4
Agranda el titular: 36 o más
- 5
Agrega una forma
- 6
Empieza el siguiente frame
Ahora hazlo de verdad. Abre Figma en otra pestaña y repite los mismos seis movimientos allí: las teclas son las mismas que acabas de usar.
Tus primeros diez minutos en Figma
Crea un archivo
Crea un archivo de diseño nuevo y llámalo "Unidad 1". Agrega dos páginas más: "Diario" y "Biblioteca de prompts".
Dibuja un frame
Presiona F y arrastra sobre el lienzo. En el panel derecho, ajusta el frame a 1080 × 1350, el formato de una publicación en redes sociales.
Agrega texto
Presiona T, haz clic dentro del frame y escribe un titular. Con el texto seleccionado, cambia la fuente y el tamaño en el panel derecho.
Agrega una forma
Presiona R para un rectángulo u O para una elipse, arrástrala y elige un color de relleno en el panel derecho.
Mueve y duplica
Presiona V para volver a la herramienta mover. Selecciona algo y presiona Ctrl + D (⌘ + D en Mac) para duplicarlo.
Míralo todo
Presiona Shift + 1 para hacer zoom y que todo quepa en pantalla. Presiona Shift + 0 para volver al 100%.
Palabras clave
- Lienzo
- El espacio de trabajo infinito de Figma. Desplázate para moverte; mantén Ctrl o ⌘ y desplázate para hacer zoom.
- Relleno
- El color (o la imagen) dentro de una forma, un frame o un texto.
- Auto layout
- Un ajuste de Figma que espacia las cosas automáticamente, como una pila. Lo usarás mucho desde la Unidad 5.
- Componente
- Una pieza reutilizable, como un botón. Cambias el principal y todas las copias se actualizan.
Ahora comprueba que sabes qué herramienta usar.
¿Qué herramienta usarías primero?
Redactar diez preguntas para una entrevista con usuarios.
Ver tres direcciones de layout para una landing page.
Arreglar el espaciado de la versión que elegiste.
Convertir tus pantallas en un set de componentes.
Recibir crítica honesta sobre por qué un layout se siente recargado.
Prepara el archivo de tu estudio
Crea el archivo de Figma que usarás durante el resto del curso.
- 1Crea un archivo llamado "UX UI Open – Unidad 1" con tres páginas: Zona de pruebas, Diario, Biblioteca de prompts.
- 2En Zona de pruebas, crea tres frames: un teléfono (390 × 844), un póster (1080 × 1350) y una diapositiva (1920 × 1080).
- 3Pon un titular en cada frame con una fuente distinta.
- 4Cambia el nombre de cada frame para que diga qué es.
- 5Cuenta en el debate que ya estás listo y qué fue lo que más te confundió.
Para leer después