Figma desde Cero es un curso online de Cursalo en español para aprender con una ruta estructurada de módulos, lecciones y práctica. La página reúne el objetivo del curso, instructor, duración, contenido, preguntas frecuentes y opción de inscripción, para que estudiantes y motores de respuesta puedan entender rápidamente qué se aprende, para quién sirve y cómo empezar.
Figma desde Cero
Instructora
Acerca de este curso
Este curso de Figma desde Cero fue reforzado para funcionar como una ruta de aprendizaje seria, no como una colección de apuntes cortos. La idea es que el estudiante entienda los conceptos centrales, pero también sepa cuándo aplicarlos, qué errores evitar y cómo convertirlos en decisiones concretas.
A lo largo de los módulos se trabaja con explicaciones claras, ejemplos, criterios prácticos, ejercicios y checklists. El enfoque prioriza aprendizaje útil: menos teoría decorativa y más pasos que una persona pueda llevar a su trabajo, emprendimiento, estudio o proyecto digital.
La guía de Santiago Rojas acompaña el recorrido con una mirada aplicada: definir objetivos, practicar con entregables pequeños, revisar resultados y mejorar. Al final, el estudiante debería tener una base ordenada, vocabulario claro y un plan realista para seguir avanzando sin depender de recetas mágicas.
Santiago Rojas
Resumen del temario
Este curso incluye 4 modulos, 12 lecciones y 4:45 horas de materiales.
Conociendo Figma por Primera Vez Figma es una herramienta de diseño basada en el navegador que ha revolucionado la industria. A diferencia de Photoshop o Sketch, Figma funciona completamente en la nube, lo que permite colaboración en tiempo real con tu equipo. Es gratuito para uso individual. Áreas principales de la interfaz Barra de herramientas (arriba): acceso rápido a formas, texto, comentarios, frames y plugins Panel de capas (izquierda): estructura jerárquica de todos los elementos de tu d
Crear frame en Figma: frames, formas y capas Los frames son la base de todo diseño en Figma. A diferencia de los artboards de otras herramientas, los frames en Figma pueden anidarse, tienen propiedades de layout y se comportan como contenedores inteligentes. Respuesta rápida: cómo crear un frame en Figma: para crear un frame en Figma presioná F, elegí un preset como Desktop, iPhone o Tablet, o arrastrá un tamaño manual en el canvas. El frame funciona como pantalla o contenedor: adentro podés pon
Definiendo la Identidad Visual de tu Diseño El color y la tipografía son los pilares de cualquier diseño. En Figma puedes crear estilos reutilizables que garantizan consistencia en todo tu proyecto y se actualizan globalmente cuando los modificas. Trabajando con colores Selecciona un elemento y haz clic en el cuadro de color del panel derecho para abrir el selector Usa valores hexadecimales (#FF5733) para colores exactos — los diseñadores comparten colores así La opacidad se ajusta junto al colo
Auto Layout: El Superpoder de Figma Auto Layout es la funcionalidad que separa a los diseñadores principiantes de los profesionales en Figma. Permite crear diseños que se adaptan automáticamente al contenido, similar a Flexbox en CSS. Una vez que lo dominas, nunca volverás a mover elementos pixel por pixel. Respuesta rápida: Auto Layout en Figma: Auto Layout es una propiedad de los frames que ordena capas automáticamente según dirección, gap, padding, alineación y reglas de tamaño. En Figma se a
Componentes: Diseña una Vez, Usa en Todas Partes Los componentes son elementos de diseño reutilizables. Cuando creas un componente, puedes colocar instancias (copias) en todo tu diseño. Si actualizas el componente original, todas las instancias se actualizan automáticamente. Esto es fundamental para trabajar eficientemente. Crear y usar componentes Selecciona un frame o grupo y presiona Ctrl/Cmd + Alt + K para convertirlo en componente El componente original (main component) tiene un ícono de di
Dale Vida a tus Diseños con Prototipos Figma te permite crear prototipos interactivos sin escribir código. Puedes simular navegación, transiciones, animaciones y flujos completos para presentar a stakeholders o hacer pruebas de usabilidad con usuarios reales. Crear conexiones de prototipo Cambia a la pestaña 'Prototype' en el panel derecho (al lado de 'Design') Selecciona un elemento, arrastra el punto azul que aparece hacia el frame de destino Esto crea una conexión: cuando el usuario haga clic
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
Fase 1: De la Idea a los Wireframes Vamos a diseñar una app de gestión de tareas (tipo Todoist simplificado). Empezaremos con wireframes de baja fidelidad para definir la estructura antes de preocuparnos por colores o tipografía. Pantallas a diseñar Splash/Login: pantalla de inicio con opciones de registro e inicio de sesión Lista de tareas: la pantalla principal donde el usuario ve sus tareas pendientes y completadas Crear tarea: formulario para agregar una nueva tarea con título, fecha y prior
Fase 2: Del Wireframe al Diseño Visual Ahora transformamos los wireframes grises en un diseño visual pulido. Vamos a definir la identidad visual, crear componentes reutilizables y aplicar Auto Layout a todo. Definir el sistema visual Paleta de colores: elige un color primario (azul #3B82F6 es seguro), un secundario, grises neutros, y colores de estado Tipografía: usa Inter con la siguiente escala — Heading: 24px bold, Subheading: 18px semibold, Body: 16px regular, Caption: 12px regular Espaciado
Fase 3: Prototipo Interactivo y Entrega El paso final es conectar todas las pantallas en un prototipo navegable y preparar el archivo para entregarlo al equipo de desarrollo. Un buen prototipo comunica la experiencia mejor que cualquier documento. Conectar el flujo principal Login → Lista de tareas: al tocar 'Iniciar sesión', navega a la pantalla principal con transición Dissolve FAB (+) → Crear tarea: al tocar el botón flotante, abre el formulario con Slide In desde abajo TaskCard → Detalle: al
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
Responder al comentario