Figma
Figma, Inc. · Productividad · Negocios
Figma es una plataforma de diseño en el navegador donde los equipos crean interfaces, prototipos y sitios, con agentes de IA que convierten instrucciones en diseños editables y código funcional en el mismo lienzo.
Acerca de Figma
About
Qué es Figma
Figma es una herramienta de diseño con IA que funciona en el navegador, aunque el trabajo manual sobre el lienzo sigue siendo el centro. Los equipos la usan para dibujar pantallas, montar prototipos, mantener un sistema de diseño compartido y entregar el trabajo a desarrollo sin exportar archivos de un lado a otro.
El producto ha crecido mucho más allá del diseño de interfaces. Un mismo archivo puede alojar una sesión de pizarra en FigJam, una presentación, una ilustración de Figma Draw, una pieza de marketing de Figma Buzz y una página publicada con Figma Sites. Figma Make convierte una instrucción o un frame existente en una app interactiva que funciona de verdad. El agente de Figma atraviesa todas estas herramientas: edita capas, genera sombreadores o crea una herramienta pequeña a partir de una descripción.
Lo que mantiene todo unido es el archivo. Diseñadores, redactores e ingenieros abren el mismo lienzo, dejan comentarios en el sitio exacto y ven los cambios al momento. Desarrollo obtiene medidas, recursos y fragmentos de código con Dev Mode, y el servidor MCP de Figma pasa ese contexto a agentes de programación externos.
Los límites son comerciales y prácticos. Los planes se cobran por asiento y cada tipo de asiento desbloquea cosas distintas. Las funciones de IA consumen un cupo mensual de créditos, así que un uso intensivo de instrucciones acaba costando más que la cuota del plan. Varias herramientas recientes, entre ellas Sites y Buzz, siguen en beta, y eso significa que su interfaz cambia de una versión a otra.
Primeros pasos
- Crea una cuenta gratuita en figma.com con tu correo, una cuenta de Google o el SSO de la empresa. El plan Starter no pide tarjeta.
- Abre un archivo de diseño y elige un tamaño de frame para la pantalla que vas a trabajar, o parte de una plantilla de la Community para ver cómo se organiza un archivo terminado.
- Trabaja con frames, auto layout y componentes. Cuando el equipo acuerde colores, estilos de texto y componentes, publícalos en una biblioteca compartida.
- Pulsa Play para probar el prototipo, o entra en Figma Make y describe la app que quieres ver en marcha.
- Invita al equipo por enlace o correo, asigna el tipo de asiento y abre Dev Mode cuando el archivo pase a implementación.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Figma.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Diseñadores de producto en empresas de software
- Quien mantiene el sistema de diseño
- Fundadores y perfiles de marketing sin formación de diseño
Tareas
- Diseñar y probar un flujo móvil
- Convertir una idea suelta en algo que se pueda clicar
- Entregar una pantalla terminada a ingeniería
Casos de uso
- Un equipo remoto revisa trabajo en husos distintos
- Un equipo de marca necesita cincuenta variaciones para redes antes del viernes
- Una startup quiere su página de marketing publicada esta semana
Funciones clave
Lienzo compartido y edición en tiempo real
Todo el mundo ve el mismo cursor, los mismos comentarios y el mismo árbol de capas. Dos diseñadores pueden trabajar en el mismo frame a la vez, y una persona de desarrollo puede inspeccionar un componente mientras el diseño sigue cambiando. Las ramas mantienen un rediseño arriesgado lejos del archivo principal hasta que alguien lo revise.
Agente de Figma para el trabajo de diseño
El agente recibe una instrucción y actúa sobre el lienzo: borra una pantalla, reestiliza una selección, genera un sombreador o arma un plugin pequeño con los controles que le describas. Lee los componentes y las variables del archivo, y eso acerca el resultado al sistema del equipo mucho más que un generador de imágenes genérico. Las skills personalizadas guardan instrucciones repetidas para no escribirlas cada vez.
Figma Make
Figma Make es una herramienta de instrucción a app para asientos Full en planes de pago. Adjuntas un diseño o una imagen, describes el comportamiento y obtienes una app en marcha con código editable en la pestaña Files. Puede publicar el resultado como sitio web, lo que sirve para probar una idea de producto antes de que alguien abra un ticket.
Capas de código y Figma Motion
Las capas de código ponen código en el lienzo como un material más, al lado de vectores e imágenes. Una capa de diseño se convierte en capa interactiva con un clic, y los cambios pueden volver a frames editables. Figma Motion añade una línea de tiempo con keyframes y curvas de aceleración, y esos datos siguen legibles en Dev Mode o se exportan a CSS, JSON, React, MP4 o GIF.
Dev Mode y entrega por MCP
Dev Mode da a ingeniería una vista de inspección con medidas, nombres de componentes y código listo para copiar. El servidor MCP de Figma lleva ese contexto a agentes como Cursor o Claude Code, de modo que el agente lee la estructura real en lugar de adivinarla desde una captura. Ambos requieren un asiento Dev o Full, y el servidor MCP se ejecuta desde la app de escritorio.
Sistemas de diseño con variables y bibliotecas
Las variables guardan colores, espaciados y modos en un solo sitio, y un cambio se propaga a cada archivo que usa la biblioteca. Los equipos mantienen tema claro y oscuro, o modos de marca separados, sin duplicar componentes. Esta es la parte que más tiempo ahorra a escala y la que peor castiga una nomenclatura descuidada.
Ventajas y desventajas
Ventajas
- Todo el flujo vive en una pestaña del navegador, desde el primer wireframe hasta el enlace del prototipo y la entrega a desarrollo.
- El agente y Figma Make trabajan con componentes y variables reales, así que lo generado suele parecerse al sistema de diseño que ya existe.
- Dev Mode y el servidor MCP de Figma eliminan la ronda habitual de capturas y anotaciones entre diseño e ingeniería.
- La colaboración en tiempo real y los comentarios anclados aguantan bien en equipos distribuidos, y el historial de versiones permite volver atrás sin drama.
- El plan Starter gratuito alcanza para evaluar la herramienta, y la Community ofrece plantillas y plugins para casi cualquier flujo.
Desventajas
- El uso de IA se mide en créditos. Un equipo que recurre al agente a diario acabará comprando créditos extra por encima del cupo mensual.
- Los tipos de asiento se cobran por separado, así que un equipo pequeño puede pagar Full, Dev y Collab antes de darse cuenta.
- Los archivos grandes con muchos prototipos tardan en cargar en portátiles viejos, y la edición en tiempo real necesita una conexión estable.
- Sites, Buzz y varias funciones del agente siguen en beta, de modo que los límites y las interfaces cambian sin mucho aviso.
Preguntas frecuentes
Figma sirve para diseñar interfaces, montar prototipos clicables, mantener sistemas de diseño y entregar el trabajo a desarrollo. La misma plataforma cubre ahora pizarras, presentaciones, ilustraciones, piezas de marketing y apps creadas con instrucciones.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Figma.
Alternativas a Figma
Base Code
Base44 (Wix) · Programación · ProductividadBase Code es un entorno de desarrollo en la nube compartido de Base44. El equipo describe cambios sobre un repositorio de GitHub en el chat, los ve en una vista previa y los envía como pull requests.
Knocket
Knocket (Tencent RTC team) · Productividad · Negocios · ChatbotKnocket es una herramienta gratuita de chat en vivo y página de contacto: los visitantes escriben desde tu web, tu app o un enlace, y tú respondes desde Telegram o una sola bandeja.
FloorGen
Vinit Kumar (FloorGen) · Productividad · IA chinaFloorGen es un creador de planos que funciona en el navegador y convierte una frase o un boceto en un plano 2D editable y un recorrido en 3D. Exporta a PDF, DXF o vídeo, y dibujar no exige cuenta.