Figma es la herramienta de diseño basada en la nube más utilizada del mundo. Desde diseñadores UI/UX hasta emprendedores, desarrolladores y profesionales del marketing, todo el mundo usa Figma. En esta guía aprenderá Figma desde cero hasta un nivel avanzado, una herramienta que ofrece funciones potentes incluso en su plan gratuito.
¿Qué es Figma?
Figma es una herramienta de diseño y prototipado basada en el navegador. No necesita instalar nada en su ordenador: puede usarla directamente desde el navegador (también existe una aplicación de escritorio). Gracias a su colaboración en tiempo real, varias personas pueden trabajar a la vez sobre el mismo archivo.
Características destacadas de Figma:
- Basada en la nube: acceso desde cualquier lugar
- Colaboración en tiempo real: como en Google Docs
- Plan gratuito: suficiente para uso personal
- Sistema de componentes (component): elementos de diseño reutilizables
- Auto Layout: alineación y dimensionamiento automáticos
- Prototipado: creación de prototipos interactivos
- Dev Mode: exportación de CSS/código para desarrolladores
Primeros pasos en Figma
Crear una cuenta
Cree una cuenta gratuita en figma.com. Puede iniciar sesión con un solo clic usando su cuenta de Google. El plan gratuito incluye lo siguiente:
- 3 archivos de Figma
- Archivos de borrador personales ilimitados
- Historial de versiones de 30 días
- Compatibilidad básica con componentes y estilos
Presentación de la interfaz
La interfaz de Figma consta de cuatro secciones principales:
Panel izquierdo: capas y páginas:
Muestra jerárquicamente todos los elementos de su archivo. Desde aquí puede cambiar entre páginas.
Barra de herramientas superior:
Aquí se encuentran las herramientas básicas: Selección (V), Frame (F), Forma (R), Pluma (P), Texto (T) y Mano (H).
Panel derecho: propiedades:
Desde aquí edita las propiedades del elemento seleccionado, como tamaño, color, tipografía y efectos.
Zona central: canvas:
El espacio blanco infinito donde crea su diseño. Puede trabajar acercando y alejando la vista.
Herramientas básicas
Frame (F)
El Frame es el bloque de construcción fundamental de su diseño. Se usa para crear una página web, una pantalla móvil o cualquier área.
Tamaños de Frame más habituales:
- iPhone 15 Pro: 393 x 852
- Desktop: 1440 x 900
- iPad: 834 x 1194
- Instagram Post: 1080 x 1080
Consejo: Pulse la tecla F y elija los tamaños de dispositivo predefinidos en el panel derecho.
Herramientas de forma
- Rectangle (R): rectángulo, para botones, tarjetas y fondos
- Ellipse (O): círculos y elipses, para fotos de perfil e iconos
- Line (L): línea, para separadores
- Polygon: polígono, para formas personalizadas
- Star: estrella, para representaciones de valoraciones
Texto (T)
Active la herramienta de texto con la tecla T. Desde el panel derecho puede ajustar lo siguiente:
- Font: puede usarse toda la biblioteca de Google Fonts
- Tamaño: en píxeles
- Grosor: Regular, Medium, Semi Bold, Bold
- Interlineado (Line height): el espacio entre líneas
- Espaciado entre letras (Letter spacing): el espacio entre caracteres
Color y estilo
Cada elemento tiene propiedades de relleno (fill), borde (stroke) y efectos (shadow, blur).
Consejos para elegir colores:
- Cree paletas de colores armónicas con Coolors
- Previsualice su paleta en un sitio web real con Realtime Colors
- Tome muestras de los colores existentes con el cuentagotas de Figma (tecla I)
Sistema de componentes (Component)
Los componentes son la función más potente de Figma. Al convertir un elemento de diseño en componente, puede reutilizarlo en cualquier lugar. Cuando modifica el componente principal, todas las copias se actualizan automáticamente.
Crear un componente
- Seleccione el elemento de diseño
- Haga clic con el botón derecho y elija "Create Component" (o Ctrl+Alt+K)
- El componente se vuelve de color morado: es el componente principal (main component)
Usar un componente
Al copiar y pegar el componente principal se crea una "instance" (copia). Las instancias:
- Reciben automáticamente los cambios del componente principal
- Permiten modificar localmente propiedades como el texto o el color (override)
- Permiten hacer ediciones específicas en esa copia sin modificar el componente
Variants (variantes)
Los distintos estados de un componente se gestionan con variantes. Por ejemplo, en un componente de botón:
- State: Default, Hover, Active, Disabled
- Size: Small, Medium, Large
- Type: Primary, Secondary, Outline
Así, con un solo componente de botón obtiene 12 combinaciones distintas.