La Guía Completa de Figma

Figma se ha convertido en la herramienta número uno en el mundo del diseño de productos digitales. No solo porque es gratuita para principiantes, sino porque es browser-based — es decir, puedes trabajar en ella desde cualquier lugar, en cualquier dispositivo, sin descargar nada. Ya sea que estés aprendiendo o trabajando en una gran empresa, Figma es la herramienta que usarás todos los días.

En esta guía iremos paso a paso: desde abrir Figma por primera vez hasta crear un diseño completo con Components, Auto Layout y un Prototype que puedas compartir con tu equipo y los desarrolladores.

La interfaz de Figma: una primera vista

Cuando abres Figma por primera vez y creas un nuevo archivo, encontrarás la interfaz dividida en 4 secciones principales:

La barra de herramientas (Toolbar): Contiene herramientas de dibujo, formas, texto y Frames. Este es el lugar que usarás para agregar nuevos elementos al Canvas.

El Canvas (el gran espacio blanco): Aquí es donde diseñas. Puedes hacer zoom con el scroll y moverte con Space + arrastrar.

El panel izquierdo (Layers Panel): Contiene todas las capas y elementos del diseño. Puedes organizarlos en grupos y frames y controlar su orden.

El panel derecho (Properties Panel): Cuando seleccionas cualquier elemento, aquí aparecen todas sus propiedades — tamaño, color, fuente, efectos, restricciones y todo lo demás.

Consejo práctico: Aprende los atajos desde el primer día. F para crear un Frame, T para escribir texto, R para crear un Rectangle. Los atajos te ahorrarán mucho tiempo.

Los Frames: la base sobre la que construyes todo

El Frame en Figma es el concepto más importante que debes entender bien. Un Frame no es solo un "cuadro" — es un contenedor inteligente que puede controlar todo lo que hay dentro de él.

¿Cuál es la diferencia entre un Frame y un Rectangle?

Un Rectangle es una forma simple — no tiene hijos ni contiene nada. Un Frame puede contener elementos dentro de él, y puedes aplicarle Auto Layout, Constraints y Clip content.

Usos de los Frames:

• Pantallas de la app: cuando presionas F y eliges iPhone o Desktop, estás creando un Frame con unas dimensiones específicas que representa una pantalla real
• Secciones de la página: cada sección de la página puede ser su propio Frame
• Tarjetas y elementos compuestos: cualquier elemento con más de una parte — como una tarjeta con imagen, título y descripción — debe ser un Frame
• Components: todo componente es esencialmente un Frame

Consejo práctico: Usa nombres claros para tus Frames. En lugar de "Frame 47", nómbralo "Hero Section" o "Product Card". Esto ayuda a ti y a tu equipo a encontrar cualquier cosa rápidamente.

Los Components: diseña una vez, usa mil veces

Los Components son el verdadero poder de Figma. La idea es simple: diseñas un elemento una sola vez (esto se convierte en el Main Component), y luego usas copias de él (Instances) en todos lados. Si cambias algo en el Main Component, todas las Instances se actualizan automáticamente.

Cómo crear un Component:

1. Diseña el elemento que quieres — por ejemplo, un Button
2. Selecciónalo y presiona Ctrl/Cmd + Alt + K
3. El Frame se vuelve morado — esto significa que ya es un Main Component
4. Arrastra una Instance usando Alt + Drag

Las Variants:

Las Variants te permiten crear diferentes versiones del mismo Component. Por ejemplo, un Button puede tener:

• State: Default, Hover, Pressed, Disabled
• Size: Small, Medium, Large
• Type: Primary, Secondary, Ghost

En lugar de crear 12 componentes separados, creas un componente con todas estas variantes y seleccionas la que necesitas desde el Properties Panel.

Component Properties:

Figma te da 4 tipos de Properties:

• Boolean: puedes mostrar u ocultar un elemento (por ejemplo, un icono en el Button)
• Instance Swap: puedes cambiar un icono por otro
• Text: puedes cambiar el texto sin abrir la Instance
• Variant: puedes seleccionar la variante que quieras

Consejo práctico: Empieza con componentes simples — Buttons, Input Fields, Cards — y ve construyendo a partir de ahí. No intentes construir un design system completo el primer día.

Auto Layout: diseño inteligente

Auto Layout es lo que hace que tu diseño sea responsive y organizado. En lugar de colocar cada elemento en una posición de píxeles fija, Auto Layout organiza los elementos automáticamente.

Cómo agregar Auto Layout:

Selecciona un Frame y presiona Shift + A. El Frame ahora tiene Auto Layout.

Propiedades principales:

• Direction: los elementos se organizan horizontalmente o verticalmente
• Gap: el espacio entre los elementos
• Padding: el espacio entre los elementos y los bordes del Frame
• Alignment: cómo se anclan los elementos (derecha, izquierda, centro)

Resizing:

Aquí es donde ocurre la magia real:

• Fixed: el elemento tiene un ancho fijo
• Hug: el elemento toma el tamaño de su contenido
• Fill: el elemento llena el espacio disponible

Por ejemplo, si tienes una Card y quieres que el título ocupe todo el ancho de la Card — pon el título en Fill Container. Y si quieres que la Card crezca y se encoja con su contenido — pon la Card en Hug Contents.

Wrap:

Una de las nuevas funcionalidades de Figma — puedes hacer que los elementos pasen a una nueva línea cuando no haya suficiente espacio. Esto es muy útil para cosas como Tags o una Grid de Cards.

Consejo práctico: Intenta usar Auto Layout para todo. Si un Frame no tiene Auto Layout, probablemente hay un problema de diseño. Auto Layout hace que los diseños sean más fáciles de editar y más cercanos al código real.

Styles y Variables: consistencia en el diseño

Para que tu diseño sea consistente, debes usar Styles y Variables en lugar de escribir colores y tamaños manualmente en cada lugar.

Color Styles:

En lugar de escribir #6366F1 en todas partes, crea un Color Style llamado "Primary" y úsalo. Si decides cambiar el color después, lo cambias una vez y todo se actualiza.

Text Styles:

La misma idea para los textos. Crea estilos para cada tipo:

• Heading 1: tamaño 32, peso Bold
• Body: tamaño 16, peso Regular
• Caption: tamaño 12, peso Regular

Variables (el enfoque más reciente):

Las Variables en Figma te dan más poder que los Styles. Puedes crear:

• Color Variables: soportan Theming — la misma variable puede ser blanca en Light Mode y negra en Dark Mode
• Number Variables: para el espaciado y el border radius
• Boolean Variables: para mostrar y ocultar elementos
• String Variables: para textos variables

Consejo práctico: Usa Variables para colores y espaciado para poder crear Dark Mode fácilmente. Crea dos grupos: Primitives (colores base) y Semantic (colores con significado como "background" y "text-primary").

Prototyping: haz que tu diseño se mueva

El diseño estático no es suficiente para transmitir la idea. El Prototyping en Figma te permite crear una experiencia interactiva real sin código.

Fundamentos del Prototyping:

1. Ve a la pestaña Prototype en el panel derecho
2. Selecciona un elemento (por ejemplo, un Button)
3. Arrastra la flecha azul a la pantalla a la que quieres ir
4. Elige el tipo de Interaction:
   • On Click: cuando el usuario hace clic
   • On Hover: cuando el usuario pasa el ratón
   • On Drag: cuando el usuario arrastra
   • While Pressing: mientras el usuario mantiene presionado

Tipos de animaciones:

• Instant: la transición es inmediata
• Dissolve: la pantalla aparece gradualmente
• Smart Animate: Figma crea una animación inteligente entre elementos similares en ambas pantallas
• Slide In/Out: la pantalla entra o sale desde una dirección específica

Scrolling:

Puedes hacer que un Frame sea desplazable:

• Pon el contenido dentro de un Frame más pequeño que el contenido
• En la pestaña Prototype, selecciona Overflow: Scroll
• Elige la dirección: Vertical, Horizontal o Both

Overlays:

¿Quieres crear un popup, dropdown o bottom sheet? Usa Overlays:

• Crea el popup como un Frame separado
• En la conexión, elige Open Overlay en lugar de Navigate
• Define la posición y el fondo

Consejo práctico: No crees un prototype para todo. Concéntrate en los flujos principales que quieres probar o presentar a los stakeholders. Por ejemplo: el flujo de Sign Up, o el flujo de compra.

Dev Mode: el puente entre diseño y desarrollo

Dev Mode es una función de Figma diseñada específicamente para los desarrolladores. Convierte el diseño en información técnica clara.

Lo que proporciona Dev Mode:

• CSS Code: para cada elemento, Figma genera su CSS — colores, tamaños, sombras, bordes
• Spacing: las distancias entre elementos se muestran claramente
• Assets: los desarrolladores pueden exportar cualquier imagen o icono directamente
• Component Properties: si el elemento es un componente, el desarrollador ve todas las variantes y propiedades
• Variables: el desarrollador ve las Variables por nombre — así en lugar de #6366F1 ve --color-primary

Annotations:

Como diseñador, puedes añadir anotaciones para los desarrolladores — notas sobre elementos específicos. Por ejemplo: "Este Button debe hacer una llamada API cuando se haga clic" o "Esta List viene del backend."

Ready for Dev:

Cuando termines de diseñar una sección determinada, puedes marcarla como "Ready for Dev." Esto ayuda a los desarrolladores a saber qué está finalizado y listo para trabajar.

Consejo práctico: Habla con los desarrolladores de tu equipo sobre su forma de trabajar. Algunos prefieren tomar el CSS directamente de Dev Mode, mientras que otros prefieren ver los design tokens. Entender su flujo de trabajo hará que la colaboración sea mejor.

Plugins: amplía las capacidades de Figma

Figma tiene un gran ecosistema de Plugins que extienden significativamente las capacidades de la herramienta.

Plugins que debes conocer:

• Iconify: una biblioteca con miles de iconos de diferentes conjuntos — Heroicons, Phosphor, Lucide — que puedes agregar directamente al diseño
• Unsplash: fotos gratuitas de alta calidad que puedes colocar directamente en el diseño
• Lorem Ipsum: texto de marcador de posición en lugar de escribir "texto texto texto"
• Contrast Checker: verifica que tus colores tengan suficiente contraste para la accesibilidad
• Content Reel: llena tu diseño con nombres, imágenes y textos realistas

Plugins avanzados:

• Tokens Studio: si quieres gestionar los design tokens de forma profesional y vincularlos al código
• Anima: convierte el diseño en código real HTML/CSS/React
• Autoflow: dibuja automáticamente líneas entre pantallas para mostrar los user flows

Consejo práctico: No instales demasiados plugins — ralentizará Figma. Elige 5-7 plugins principales y apréndalos bien. Y prueba las funciones integradas de Figma antes de buscar un plugin externo.

Consejos para profesionales

Organización del archivo:

• Usa Pages para dividir el archivo — una página para Components, una para Screens, una para Archive
• Nombra todo con nombres claros y organizados
• Usa Sections para agrupar las pantallas relacionadas
• Crea una Cover Page con la información del proyecto y el estado

Trabajar con el equipo:

• Usa Comments para obtener feedback
• Comparte el archivo con "Can View" para los stakeholders y "Can Edit" para los diseñadores
• Usa Branching cuando trabajas en cambios importantes
• Usa el modo Presentation para presentar el trabajo profesionalmente

Rendimiento:

• Reduce el número de Variants que no necesitas
• Usa Simplify Stroke en iconos complejos
• No coloques imágenes con resolución muy alta — Figma maneja las imágenes de manera diferente a producción

Figma es una herramienta profunda que continúa evolucionando. Lo más importante es empezar a usarla en proyectos reales — aunque sean personales — y aprender a través de la práctica. Cuanto más la uses, más nuevas funcionalidades y formas más rápidas de trabajar descubrirás.