La Interfaz de Figma

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 diseño
• Canvas (centro): el lienzo infinito donde diseñas — usa scroll para moverte y Ctrl/Cmd + scroll para zoom
• Panel de propiedades (derecha): controles de posición, tamaño, color, tipografía y efectos del elemento seleccionado
• Barra inferior: zoom actual, vista de cuadrícula y opciones de presentación

Atajos esenciales que debes memorizar

• V: herramienta de selección (la que más usarás)
• F: crear un Frame (el contenedor fundamental en Figma)
• R: rectángulo / O: elipse / L: línea
• T: herramienta de texto
• Ctrl/Cmd + D: duplicar elemento seleccionado
• Ctrl/Cmd + G: agrupar elementos / Ctrl/Cmd + Shift + G: desagrupar
• Ctrl/Cmd + Z: deshacer (tu mejor amigo al empezar)

Conceptos fundamentales

• Frame: el contenedor principal — piensa en él como una pantalla o una sección. Todo diseño empieza con un Frame
• Grupo: une elementos visualmente pero sin propiedades de layout avanzadas
• Componente: un elemento reutilizable que puedes instanciar y actualizar globalmente
• Auto Layout: el superpoder de Figma para crear diseños flexibles y responsivos
• Variables y estilos: para mantener consistencia de colores, tipografía y espaciado

Consejo: Figma funciona en el navegador pero también tiene app de escritorio. La versión de escritorio es idéntica pero ligeramente más rápida. Descárgala desde figma.com/downloads.