Abrir Figma por primera vez puede sentirse como buscar un botón de guardar en una app desconocida. La buena noticia es que toda la interfaz se organiza en cuatro zonas claras, y una vez que las identificas, cada sesión de diseño se vuelve mucho más fluida. A continuación, se desglosa cada una de esas zonas con sus herramientas y atajos esenciales.
¿Cuáles son las cuatro zonas del espacio de trabajo en Figma?
Al abrir un archivo de diseño, el espacio se divide en áreas con funciones muy específicas [0:22]:
- Toolbar (zona inferior): contiene todas las herramientas disponibles para trabajar.
- Panel izquierdo: funciona como el índice del archivo, mostrando páginas y capas.
- Panel derecho: muestra los ajustes finos del elemento seleccionado.
- Canvas: es el lienzo completo donde se colocan prototipos, pantallas y componentes.
Entender esta división es el primer paso para dejar de sentirse perdido. Cada zona cumple un rol distinto y se complementan entre sí para ofrecer un flujo de trabajo ordenado.
¿Qué herramientas incluye el toolbar de Figma?
El toolbar agrupa las herramientas principales que usarás constantemente [0:44]:
- Herramienta de selección (tecla V): el cursor por defecto para seleccionar elementos.
- Herramienta de navegación (tecla H): la "manita" que permite desplazarse por el canvas, especialmente útil con mouse. También se puede activar temporalmente manteniendo la barra espaciadora mientras estás en la herramienta de selección; esto se conoce como paneo [1:08].
- Frames (tecla F): los contenedores fundamentales para crear pantallas [1:22].
- Formas: rectángulos con la tecla R, elipses con la tecla O (círculos u óvalos), además de líneas, flechas, polígonos, estrellas e imágenes [1:30].
- Herramienta de pluma: permite crear nodos y conectarlos para generar figuras complejas, similar a otras herramientas vectoriales [1:50].
- Texto (tecla T): crea nodos de texto sobre el canvas [2:00].
- Comentarios: ideal para mencionar colaboradores o stakeholders, recibir feedback y dejar anotaciones para desarrolladores [2:08].
Además, desde el toolbar se puede cambiar entre tres modos de trabajo: Figma Design (por defecto), Figma Draw (para ilustraciones y figuras complejas) y Dev Mode (orientado a la parte técnica de desarrollo) [2:24].
¿Cómo funciona el panel izquierdo como índice del archivo?
Este panel se divide en dos secciones clave [2:36]:
- File: organizado por páginas, donde cada página representa un canvas independiente. Dentro de cada página se encuentran los layers (capas), que reflejan todo lo que has construido.
- Assets: aquí aparecen los componentes que has creado y las librerías indexadas disponibles. Incluye un buscador para localizar componentes rápidamente y agregarlos al canvas con drag and drop [2:56].
Esta estructura permite mantener archivos complejos bien organizados, separando flujos, pantallas o secciones en páginas distintas.
¿Qué información muestra el panel derecho en Figma?
El panel derecho es contextual: la información que presenta cambia según el elemento seleccionado [3:10]. Al seleccionar un frame, por ejemplo, se muestran propiedades como auto layout, posición, ancho, altura y constraints como los paddings, la apariencia y el fondo definido [3:24].
Si seleccionas un nodo de texto, el panel cambia para mostrar la configuración tipográfica: fuente, peso, tamaño y line height [3:38]. Al elegir un contenedor con relleno degradado, aparecen opciones de gradiente y efectos de sombra [3:48].
Dentro del mismo panel existe la pestaña Prototipo, donde se configuran las conexiones entre frames y los settings de visualización: fondo, tipo de dispositivo y comportamiento del prototipo [3:56].
Un detalle práctico: si no tienes nada seleccionado y estás en la pestaña de diseño, puedes cambiar el fondo de la página. Si trabajas en light mode, conviene un canvas claro; para dark mode, uno más oscuro [4:16].
¿Cuál es el atajo más útil para encontrar acciones rápidas?
Figma tiene múltiples acciones que pueden ser difíciles de ubicar. El atajo Comando + coma abre el menú de acciones rápidas, un buscador donde puedes escribir el nombre de cualquier herramienta o función [4:30].
Por ejemplo, si necesitas renombrar capas de forma masiva, basta con seleccionar los elementos, abrir el menú de acciones y buscar Rename layers. Figma procesará el renombrado automáticamente [4:46]. Este atajo se convierte en un recurso indispensable conforme crece la complejidad de tus archivos.
Ahora que tienes el mapa completo de la interfaz, el siguiente paso es entender la diferencia entre frames, grupos y secciones, porque elegir el contenedor equivocado puede cambiar por completo el comportamiento de tu diseño. ¿Qué zona de Figma te resultó más difícil de entender al principio? Comparte tu experiencia.
