Si te mueves en el mundo digital, ya sea como diseñador, desarrollador, marketer o emprendedor, has escuchado la palabra Figma hasta en la sopa. Y no es para menos. En la última década, hemos visto muchas herramientas intentar destronar a Adobe (Sketch, InVision, Adobe XD), pero solo una lo ha conseguido, cambiando para siempre la forma en que se construye internet.
Pero, ¿qué es Figma exactamente? ¿Por qué las ofertas de trabajo lo exigen como requisito indispensable? Y, lo más importante: si no eres diseñador gráfico, ¿deberías aprender a usarlo?
Soy Òscar Bordetas, y en mi día a día como desarrollador web y consultor, Figma no es un programa más; es el sistema operativo de mi negocio. Es donde las ideas abstractas se convierten en sistemas visuales tangibles antes de escribir una sola línea de código. En este megatutorial actualizado a 2025, no voy a explicarte solo «dónde están los botones». Voy a enseñarte a pensar en Figma. Desde los conceptos básicos hasta los flujos de trabajo avanzados con Inteligencia Artificial y código, esta guía está diseñada para llevarte de cero a profesional.
Índice del Tutorial Definitivo:
- ¿Qué es Figma y por qué ha matado a la competencia?
- Primeros Pasos: Web, Desktop y Configuración Inicial
- Dominando la Interfaz: Frames, Capas y Vectores
- Auto Layout: El secreto del diseño responsive (Vital para Web)
- Sistemas de Diseño: Componentes, Variantes y Variables
- Figma Dev Mode: El puente entre Diseño y Código
- El Ecosistema: Plugins y Recursos que te ahorran horas
- Flujo de Trabajo Real: De Figma a WordPress
- Precios de Figma 2025: ¿Quién debe pagar?
- Preguntas Frecuentes Avanzadas
¿Qué es Figma y por qué ha matado a la competencia?
Técnicamente, Figma es un editor de gráficos vectoriales y una herramienta de prototipado basada en la web. Pero definirlo así es quedarse muy corto. Figma es la primera herramienta de diseño verdaderamente colaborativa y «cloud-native» (nativa de la nube).
Antes de Figma, el flujo de trabajo era un infierno: un diseñador trabajaba en un archivo local en su Mac (usando Sketch o Photoshop), lo guardaba como «Web_Home_v4_Final_AhoraSi.jpg», lo subía a Dropbox y el desarrollador tenía que adivinar las medidas. Si había un cambio, el proceso se reiniciaba.
Las 3 Revoluciones de Figma:
- El «Multijugador» del Diseño: Figma funciona como Google Docs. Múltiples personas (diseñadores, copywriters, desarrolladores, clientes) pueden entrar en el mismo archivo simultáneamente. Ves sus cursores moverse, pueden dejar comentarios en tiempo real y editar a la vez. Esto eliminó los problemas de versiones para siempre.
- Independencia del Sistema Operativo: Al ejecutarse en el navegador (gracias a tecnologías como WebGL y WebAssembly), Figma funciona igual de rápido en un MacBook Pro de 3.000€ que en un portátil Windows barato o incluso en Linux. Democratizó el acceso a herramientas de diseño de alto nivel.
- Comunidad Open Source: Figma permitió que cualquiera creara plugins y compartiera archivos. Hoy, la «Figma Community» es un repositorio gigantesco de recursos gratuitos (kits de UI, iconos, ilustraciones) que puedes copiar a tu proyecto con un clic.
Primeros Pasos: Web, Desktop y Configuración Inicial
Una de las primeras dudas al buscar «descargar Figma» es si usar la versión de navegador o instalar la aplicación. Aunque ambas son casi idénticas, hay matices importantes para el uso profesional.
| Característica | Versión Navegador | Figma Desktop App (Recomendada) |
|---|---|---|
| Fuentes Locales | Requiere instalar un «Font Installer» extra para usar tus tipografías. | ✅ Nativo. Accede a todas las fuentes instaladas en tu ordenador automáticamente. |
| Rendimiento (RAM) | Depende de las extensiones y pestañas abiertas en Chrome/Edge. | ✅ Optimizado. Gestiona mejor la memoria en archivos pesados. |
| Navegación | Pestañas del navegador (se mezclan con Gmail, YouTube, etc.). | Pestañas internas de proyecto + Ventana de Inicio separada. |
| Modo Offline | Limitado. | Permite guardar cambios en caché local si se cae el WiFi. |
💡 Consejo Pro: Descarga la App de Escritorio para trabajar, pero usa la versión web para compartir enlaces rápidos con clientes o para revisar diseños en ordenadores ajenos.
Dominando la Interfaz: Frames, Capas y Vectores
Si vienes del mundo de Adobe (Photoshop/Illustrator), tendrás que «desaprender» algunos conceptos. Figma está pensado para diseño de producto digital, no para arte o retoque fotográfico.
1. El concepto de FRAME vs. Grupo
Este es el error número 1 de los principiantes. En Photoshop agrupas capas (`Ctrl+G`). En Figma, aunque puedes agrupar, lo correcto el 99% de las veces es usar FRAMES (`F`).
Un Frame es un contenedor inteligente. Piensa en él como un <div> en HTML o una mesa de trabajo supervitaminada:
- Tienen su propio sistema de coordenadas.
- Pueden recortar el contenido (Clip Content).
- Pueden anidarse infinitamente (un botón dentro de una tarjeta, dentro de una sección, dentro de una página).
- Soportan Grids (rejillas) y Auto Layout.
2. Herramientas Vectoriales (Shape Tools)
Figma es vectorial. Todo lo que dibujes son fórmulas matemáticas, no píxeles. Esto significa que puedes diseñar un icono de 20px y escalarlo para una valla publicitaria sin perder calidad.
- Rectángulo (`R`), Elipse (`O`), Línea (`L`): Las bases de cualquier UI.
- Pluma (`P`): La herramienta más potente para dibujar iconos personalizados o formas orgánicas complejas.
3. Propiedades y Restricciones (Constraints)
Al diseñar para web, no diseñamos un cuadro estático; diseñamos algo que se verá en un móvil, una tablet y un monitor 4K. Las Constraints (Restricciones) te permiten decirle a un elemento cómo comportarse cuando su contenedor cambia de tamaño: «Quédate pegado a la derecha» o «Estírate a lo ancho».
Auto Layout: El secreto del diseño responsive (Vital para Web)
Si hay una funcionalidad que hace que Figma sea superior a cualquier otra herramienta para diseño web, es el Auto Layout. Aprender esto no es opcional si quieres dedicarte al diseño UI.
¿Qué es el Auto Layout?
Básicamente, es la implementación visual de Flexbox (CSS). Permite crear contenedores que se adaptan dinámicamente a su contenido.
Ejemplos prácticos de uso:
- Botones: Si cambias el texto de «Ver más» a «Suscríbete ahora mismo», el botón crecerá automáticamente manteniendo los márgenes (paddings) perfectos.
- Listas y Menús: Si tienes un menú horizontal y borras un elemento, los demás se reorganizan para ocupar el espacio. Si añades uno nuevo, el contenedor crece.
- Cards (Tarjetas): Puedes diseñar una tarjeta de producto donde, si el título ocupa dos líneas, la tarjeta se estira hacia abajo empujando el precio y el botón, sin solaparse.
💡 Visión de Desarrollador: Cuando usas Auto Layout, estás «programando visualmente». Estás definiendo
display: flex;,gap,paddingyalign-items. Un diseño hecho con Auto Layout se convierte en código limpio en minutos; un diseño hecho «a ojo» es una pesadilla para programar.
Sistemas de Diseño: Componentes, Variantes y Variables
La potencia real de Figma se desata cuando dejas de diseñar pantallas sueltas y empiezas a diseñar Sistemas. Aquí es donde entra la metodología del Diseño Atómico (Atomic Design).
1. Componentes (Components)
Un componente es un elemento reutilizable. Creas un Componente Maestro (por ejemplo, tu botón principal) y luego usas copias de él (Instancias) por todo el diseño.
La magia: Si el cliente dice «quiero los botones azules en vez de verdes», cambias el Maestro y las 500 instancias de tu diseño se actualizan automáticamente. Atajo: `Ctrl + Alt + K` / `Cmd + Alt + K`.
2. Variantes (Variants)
Las variantes permiten agrupar componentes relacionados. En lugar de tener «Botón Azul», «Botón Rojo» y «Botón Desactivado» sueltos, tienes un solo componente «Botón» con propiedades configurables: Estado (Activo/Inactivo), Tamaño (S/M/L), Icono (Sí/No).
3. Variables (Novedad 2024/2025)
Esta es la última gran actualización. Las variables permiten almacenar valores (colores, números, textos, booleanos) que se pueden aplicar a todo el diseño.
- Modo Oscuro Automático: Puedes definir que la variable «Color-Fondo» sea blanco en el «Modo Día» y negro en el «Modo Noche». Con un clic, cambias el modo de todo el diseño.
- Espaciado y Radios: Defines tus tokens de diseño (ej. `space-m = 16px`). Si quieres cambiar el espaciado de toda la web, solo actualizas la variable.
Figma Dev Mode: El puente entre Diseño y Código
Durante años, el traspaso del diseño al desarrollador (Handoff) fue un punto de fricción. Los desarrolladores tenían que inspeccionar archivos complejos, calcular márgenes a ojo y exportar assets manualmente. Figma solucionó esto con el Dev Mode (Modo Desarrollador).
Es un interruptor en la interfaz que transforma Figma en una herramienta técnica:
- Inspección CSS/iOS/Android: Al hacer clic en un elemento, obtienes el código listo para copiar. Si está hecho con Auto Layout, el código Flexbox es casi perfecto.
- Box Model: Muestra los márgenes y paddings visualmente, igual que el inspector de Google Chrome.
- Exportación de Assets: El desarrollador puede descargar todos los iconos e imágenes en SVG, PNG o WebP sin riesgo de mover nada en el diseño.
- Comparación de Cambios: Permite ver qué ha cambiado exactamente desde la última vez que miraste el archivo (ej. «Se ha cambiado el color del botón de #333 a #000»).
El Ecosistema: Plugins y Recursos que te ahorran horas
Figma viene «desnudo», pero puedes vitaminarlo con plugins. Estos son los imprescindibles que uso en cada proyecto:
| Plugin | ¿Para qué sirve? | Precio |
|---|---|---|
| Unsplash | Inserta fotos de stock de alta calidad directamente en tus formas. | Gratis |
| Iconify | Acceso a más de 100.000 iconos vectoriales (Material Design, FontAwesome, etc.). | Gratis |
| Stark | Comprueba si tus colores cumplen los estándares de accesibilidad (WCAG) para personas con problemas de visión. | Freemium |
| Lorem Ipsum | Genera texto de relleno automáticamente para tus párrafos. | Gratis |
| Remove BG | Elimina el fondo de las imágenes con un clic (requiere API key). | Freemium |
Flujo de Trabajo Real: De Figma a WordPress
Muchos clientes me preguntan: «¿Existe un botón para pasar de Figma a WordPress automáticamente?». La respuesta honesta es: existen plugins (como Figma to WordPress o constructores visuales que importan diseños), pero el resultado suele ser código sucio, no optimizado y malo para el SEO.
El flujo de trabajo profesional que garantiza una web de alto rendimiento (WPO) es el siguiente:
- Fase de Diseño (Figma): Aquí iteramos rápido. Probamos colores, estructuras y textos. Es barato equivocarse aquí. Validamos la UX (Experiencia de Usuario).
- Style Guide & Tokens: Extraigo del Figma todas las variables: colores, tipografías, sombras y espaciados.
- Desarrollo a Medida (WordPress): Utilizo el Dev Mode para replicar el diseño escribiendo código HTML/CSS/JS limpio o usando un tema base optimizado. Las imágenes se exportan optimizadas en WebP.
¿El resultado? Una web que se ve 100% idéntica al diseño aprobado, pero que carga en milisegundos y Google adora.
Precios de Figma 2025: ¿Quién debe pagar?
El modelo de precios de Figma es generoso, pero tiene una «trampa» en la colaboración que debes conocer.
| Plan | Precio | Ideal Para… | Detalles Clave |
|---|---|---|---|
| Starter (Gratis) | 0 € | Estudiantes, Freelancers solitarios. | Archivos ilimitados en «Borradores». Límite de 3 archivos compartidos. No tiene Dev Mode ni Variables avanzadas. |
| Professional | 12 €/mes (por editor) | Freelancers profesionales y Estudios. | Archivos ilimitados, Librerías compartidas, Dev Mode incluido, Variables y Prototipos avanzados. |
| Organization | 45 €/mes | Grandes empresas. | Sistemas de diseño centralizados a gran escala, SSO, analíticas de uso. |
La trampa de los «Editores»: En Figma, los espectadores son gratis ilimitados. Pero si invitas a alguien a «Editar» un archivo en un equipo Profesional, te cobrarán un asiento extra (12€). Ten cuidado con los permisos.
¿Tienes un diseño en Figma y necesitas hacerlo realidad?
Tener el archivo de Figma es solo el 50% del trabajo. Ahora necesitas convertirlo en una web funcional, rápida y segura. Soy especialista en trasladar diseños UI/UX a WordPress con precisión milimétrica y código limpio.
Solicita presupuesto de Desarrollo Web
Reviso tu archivo Figma sin compromiso para darte una valoración técnica.
Preguntas Frecuentes Avanzadas (Resolviendo dudas reales)
Aquí respondo a las preguntas que más me hacen tanto mis alumnos como los clientes cuando decidimos usar Figma para su proyecto.
¿Es difícil aprender Figma si nunca he diseñado interfaces?
Sorprendentemente no, pero requiere un cambio de mentalidad. La curva de aprendizaje de Figma es mucho más suave que la de Adobe Photoshop o Illustrator porque elimina el ruido: no hay miles de filtros fotográficos ni herramientas 3D complejas. Al estar enfocado 100% en UI (Interfaz de Usuario), las herramientas son lógicas y estructuradas. En una semana de práctica intensiva puedes estar diseñando interfaces de calidad aceptable. El reto real no es la herramienta, sino aprender los fundamentos del diseño digital: jerarquía visual, teoría del color, tipografía y sistemas de retículas.
¿Puedo exportar mi diseño de Figma directamente a código HTML/CSS?
Esta es la «ballena blanca» del diseño web. La respuesta corta es NO existe un botón mágico que genere una web completa, funcional y optimizada (SEO/WPO) con un clic. Sin embargo, Figma facilita enormemente el proceso:
- El Dev Mode te da el CSS exacto de cada elemento (sombras, gradientes, posiciones).
- Existen plugins como «Figma to Code» o «Anima» que generan un HTML base, pero suele ser código «sucio» que no recomiendo para una web profesional en producción.
Figma es para crear el plano arquitectónico; el código debe escribirlo un desarrollador (o usar un constructor visual en WordPress) basándose en esas medidas.
¿Realmente puedo usar Figma Gratis para trabajar con clientes?
Sí, absolutamente. El plan Starter (Gratis) es increíblemente generoso. Su limitación principal suele malinterpretarse: «Solo 3 archivos de diseño». Esto aplica solo a la carpeta de «Equipo». En tu carpeta de «Borradores» (Drafts), puedes tener archivos ilimitados.
Puedes invitar a tus clientes como «visualizadores» (viewers) a tus borradores para que dejen comentarios sin pagar nada. Solo necesitarás el plan Profesional si necesitas bibliotecas de componentes compartidas entre varios archivos o funciones avanzadas del Dev Mode.
¿Puedo usar Figma sin conexión a internet (Offline)?
Sí, pero con matices importantes que debes conocer para no perder trabajo. Si tienes el archivo abierto en la App de Escritorio antes de perder la conexión (por ejemplo, en un tren o avión), puedes seguir trabajando con total normalidad. Figma guardará todos los cambios en una caché local en tu disco duro.
En el momento en que recuperes la conexión, la app sincronizará automáticamente los cambios con la nube. Sin embargo, ten en cuenta que NO podrás abrir archivos nuevos que no hayas cargado previamente, ni cargar imágenes nuevas que no estén en caché, ni usar plugins que requieran llamadas a API externas mientras estés desconectado.
Figma vs. Canva: ¿Cuál debo usar para mi web?
Son herramientas para fases distintas del negocio. Usa Figma para construir el producto: diseñar la estructura de tu web, la experiencia de usuario, los flujos de navegación y la identidad visual completa antes de programar.
Usa Canva para promocionar el producto: una vez la web existe y tienes tu marca definida, usa Canva para crear los posts de Instagram, los banners de LinkedIn o las presentaciones de ventas de forma rápida. Intentar diseñar una web completa en Canva suele dar resultados pobres en usabilidad; intentar hacer un post rápido de redes en Figma puede ser matar moscas a cañonazos.
¿Necesito un ordenador potente (mucha RAM) para Figma?
Figma es mucho más ligero que la suite de Adobe porque renderiza en la nube usando tecnologías WebGL. Funciona decentemente en portátiles de gama media (8GB de RAM) e incluso en algunos Chromebooks. Sin embargo, Figma vive en la memoria RAM.
Si trabajas en archivos gigantescos con cientos de «Artboards» (Frames), imágenes en alta resolución sin comprimir y miles de componentes complejos, el navegador (especialmente Chrome) puede colapsar. Para uso profesional intensivo, recomiendo 16GB de RAM y usar siempre la App de Escritorio, que gestiona los recursos mejor que el navegador.
¿De quién es la propiedad intelectual de los diseños?
Los diseños son 100% tuyos (o de tu cliente, según vuestro contrato). A diferencia de Canva, donde usas recursos de stock que tienen licencias de uso limitadas, en Figma tú creas los vectores desde cero o importas tus propios recursos.
Figma no reclama propiedad intelectual sobre lo que dibujas en su lienzo. Es una herramienta estándar en la industria usada por empresas como Netflix, Uber o Microsoft, por lo que ofrece garantías de seguridad y privacidad de datos muy altas.
¿Qué es FigJam y por qué me pide pagar aparte?
FigJam es una pizarra blanca digital infinita que viene integrada en el ecosistema Figma, pero es un producto separado. Está pensada para la fase previa al diseño: lluvia de ideas (brainstorming), diagramas de flujo, mapas mentales y retrospectivas de equipo con post-its.
Es ideal para reuniones con clientes donde no se habla de píxeles, sino de conceptos. Tiene su propio plan de precios (también tiene versión gratis), pero si tienes una licencia de Figma Design Professional, sueles tener acceso a las funciones básicas. No es obligatorio usarlo para diseñar webs, pero ayuda mucho en la fase de estrategia.
¿Son seguros los plugins de la Comunidad?
Figma revisa los plugins que se publican en su comunidad, por lo que generalmente son seguros en términos de no contener virus tradicionales. Sin embargo, debes tener en cuenta la privacidad de los datos. Algunos plugins (especialmente los que usan IA o conectan con bases de datos externas) pueden requerir enviar partes de tu diseño a servidores de terceros para procesarlos. Si trabajas en proyectos con acuerdos de confidencialidad (NDA) muy estrictos, revisa siempre los permisos que solicita cada plugin antes de ejecutarlo.
¿Sirve Figma para editar fotos o crear logotipos?
Para logotipos: Sí. Al ser una herramienta vectorial potente con operaciones booleanas (unir, restar formas) y control de curvas Bézier, es excelente para crear isotipos y logotipos modernos.
Para editar fotos: No. Figma tiene ajustes básicos (brillo, contraste, saturación) y modos de fusión (Multiply, Overlay), pero no es un editor de mapa de bits (raster). No puedes clonar zonas, corregir imperfecciones de piel o usar pinceles artísticos complejos. Para eso, edita la foto en Photoshop o Lightroom y luego impórtala a Figma.