Figma desde Cero

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

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