Aprende a usar Figma
Herramienta de diseño colaborativo para crear interfaces web y de aplicaciones, reutilizar componentes y probar recorridos con prototipos interactivos antes de desarrollarlos. Comparte un enlace para que el equipo revise, comente e inspeccione el diseño.
Qué es Figma
Esta guía se centra en Figma Design: aprenderás a organizar pantallas, reutilizar elementos y construir un prototipo para revisar una idea. Figma también ofrece FigJam para pizarras y otros productos de creación; conviene distinguir sus funciones antes de elegir un recurso o contratar un puesto.
Qué es
Figma es una plataforma de creación y colaboración visual. En Figma Design trabajas con archivos, páginas, marcos y capas para diseñar interfaces y conectarlas mediante prototipos. FigJam sirve para pizarras, diagramas y talleres; Figma Slides para presentaciones. La oferta también incluye productos como Figma Sites y Figma Make, con disponibilidad y límites propios según el plan y el tipo de puesto.
Qué problema resuelve
Ayuda a evitar que cada revisión dependa de enviar imágenes y documentos distintos: el equipo puede trabajar sobre un archivo compartido, comentar partes concretas, reutilizar componentes y probar cómo se conectan las pantallas antes de implementar el producto.
Comparativa con otras herramientas
Canva ofrece un editor y plantillas para crear piezas como presentaciones. Figma Design se centra en interfaces, componentes y prototipos interactivos; si buscas diapositivas, Figma tiene un producto específico llamado Figma Slides.
Ver guía de CanvaEl editor de diseño de Sketch es una aplicación para macOS; su aplicación web permite revisar e inspeccionar diseños desde otros sistemas. Figma Design ofrece edición en el navegador y aplicaciones de escritorio para Windows y macOS.
Ver guía de SketchPenpot es de código abierto y permite alojar la plataforma en tu propia infraestructura. Si ese control es un requisito, compáralo con el modelo de Figma y revisa también los formatos, los permisos y la colaboración que necesita tu equipo.
Ver guía de Penpot¿Es Figma para ti?
Figma es para ti si…
- Diseñas interfaces para una web, una aplicación o un producto digital.
- Quieres probar un recorrido interactivo antes de invertir en su desarrollo.
- Necesitas colaborar con otras personas y recoger comentarios sobre el mismo diseño.
- Repites botones, tarjetas o formularios y quieres mantenerlos coherentes con componentes.
- Trabajas con desarrollo y necesitas compartir medidas, recursos y contexto del diseño.
Quizá no es para ti si…
- Solo quieres una pieza sencilla para redes o imprimir y prefieres una herramienta con menos conceptos de diseño de interfaces.
- Necesitas más de tres archivos compartidos de Figma Design y Figma Sites en la carpeta de Starter sin contratar un plan superior.
- Quieres que varias personas editen tus borradores personales gratis: Starter no permite invitar editores a esos borradores.
- Esperas que un prototipo de Figma Design sea por sí solo una web publicada con todas sus funciones reales.
Primeros pasos en Figma
Empieza con un caso pequeño: dos pantallas de una web o una aplicación y un botón que permita pasar de una a otra. La meta inicial es entender la estructura y probar el recorrido, no crear un sistema de diseño completo.
Tu primera tarde con Figma
- 1Crea una cuenta gratuita y entra en Figma desde el navegador o la aplicación de escritorio.
- 2Cambia la preferencia de idioma a español desde los ajustes de tu cuenta si lo necesitas.
- 3Crea un archivo de Figma Design o duplica un recurso de aprendizaje; comprueba antes su autor, licencia y precio.
- 4Añade una página y crea los marcos de las pantallas que vas a diseñar.
- 5Construye una primera pantalla con texto, formas e imágenes, y nombra sus capas de forma clara.
- 6Añade disposición automática a un botón o una tarjeta para que se ajuste al contenido.
- 7Convierte un elemento repetido en componente y utiliza instancias en lugar de copias independientes.
- 8Crea la segunda pantalla y conecta el botón con su destino desde la pestaña Prototipo.
- 9Reproduce el prototipo y comparte el archivo con permisos de visualización para recibir comentarios.
- 10Revisa los cambios y exporta los recursos necesarios; comprueba el tipo de puesto antes de solicitar funciones avanzadas de Dev Mode.
Conceptos clave
Necesarios
El archivo reúne un trabajo de diseño; sus páginas separan lienzos para organizar pantallas, exploraciones u otros recursos.
Contenedor para una pantalla o un conjunto de capas; puede representar un dispositivo, una tarjeta o parte de una interfaz.
Objeto del diseño, como un texto, una forma, una imagen o un contenedor, que puedes seleccionar y organizar.
Auto layout organiza los elementos de un marco y adapta su posición y tamaño cuando cambian el contenido o el espacio disponible.
Elemento reutilizable cuyo diseño principal sirve de referencia a las instancias, como un botón o una tarjeta.
Uso de un componente vinculado a su componente principal; recibe sus actualizaciones y admite determinados cambios locales.
Versión de un componente dentro de un conjunto, por ejemplo un botón en estado normal, desactivado o pulsado.
Valor reutilizable que puedes aplicar a propiedades del diseño o a acciones de un prototipo.
Conjunto de valores para un contexto, como claro u oscuro; su disponibilidad y límites dependen del plan.
Conexiones e interacciones entre pantallas que permiten probar un recorrido; no equivalen por sí solas a una aplicación implementada.
Recursos compartidos, como componentes, estilos y variables, que ayudan a mantener la coherencia entre archivos; revisa las condiciones de tu plan.
Vista para inspeccionar el diseño y facilitar la entrega a desarrollo. Las funciones avanzadas requieren el plan y el puesto adecuados.
Glosario
- Archivo
- Documento de trabajo de un producto de Figma, como Design, FigJam o Slides.
- Biblioteca
- Recursos reutilizables compartidos entre archivos, según el plan y los permisos.
- Borrador
- Archivo que todavía no se ha movido a una carpeta; en Starter no admite otros editores.
- Capa
- Objeto individual o contenedor que forma parte de un diseño.
- Carpeta
- Contenedor para organizar archivos; Starter incluye una y los planes de pago permiten crear más.
- Comentario
- Observación vinculada a una ubicación del diseño para aportar contexto o pedir cambios.
- Componente principal
- Elemento reutilizable que define las propiedades compartidas por sus instancias.
- Conjunto de componentes
- Contenedor que organiza componentes relacionados como variantes.
- Créditos de IA
- Unidad de consumo compartida entre funciones y productos de Figma AI, con una asignación según plan y puesto.
- Dev Mode
- Interfaz de inspección y entrega a desarrollo con funciones sujetas al plan y al puesto.
- Disposición automática
- Sistema que organiza elementos dentro de un marco y adapta su disposición al contenido.
- FigJam
- Producto de Figma para pizarras colaborativas, diagramas, talleres y planificación.
- Flujo
- Conjunto de marcos y conexiones que representa un recorrido dentro de una página.
- Grupo
- Agrupación de capas para seleccionarlas y organizarlas juntas.
- Instancia
- Uso de un componente que conserva su vínculo con el componente principal.
- Interacción
- Comportamiento que determina qué ocurre al actuar sobre un elemento del prototipo.
- Lienzo
- Área de trabajo donde colocas y organizas los objetos del diseño.
- Marco o frame
- Contenedor que representa una pantalla o agrupa elementos de una interfaz.
- Modo
- Conjunto de valores de variables para un contexto, como claro y oscuro.
- Página
- Lienzo dentro de un archivo de Figma Design que permite separar partes del trabajo.
- Prototipo
- Representación interactiva que conecta diseños para explorar un recorrido.
- Puesto o seat
- Tipo de acceso a productos y funciones; puede ser Full, Dev, Collab o View.
- Punto de inicio
- Marco desde el que comienza un flujo en la presentación de un prototipo.
- Recurso exportado
- Archivo generado a partir de capas o marcos para utilizarlo fuera de Figma.
- Variable
- Valor reutilizable para propiedades de diseño o acciones de prototipo.
- Variante
- Versión de un componente que representa atributos como tamaño o estado.
- Wireframe
- Representación inicial de la estructura de una pantalla, antes de sus detalles visuales.
Convertirte en Pro
Atajos de teclado
Trucos que ahorran tiempo
- Empieza con un wireframe sencillo y comprueba la estructura antes de dedicar tiempo a colores y detalles.
- Usa disposición automática en botones y tarjetas: el contenido puede cambiar sin recolocar cada elemento a mano.
- Reutiliza instancias de un componente en vez de mantener muchas copias independientes.
- Mantén un objeto seleccionado y pulsa Opción en Mac o Alt en Windows para medir su distancia respecto a otro.
- Conecta solo las pantallas necesarias para probar una tarea concreta y revisa el prototipo como si fueras el usuario.
- Comprueba autor, licencia, precio e idioma de cada recurso de la comunidad antes de duplicarlo para un proyecto real.
- Selecciona la distribución de teclado española en las preferencias si las combinaciones no coinciden con tu teclado.
- Revisa el tipo de puesto y los permisos antes de invitar a alguien a editar o pedir acceso avanzado a Dev Mode.
Errores comunes
Starter ofrece borradores ilimitados, pero no permite invitar a otros editores a esos borradores. La colaboración de equipo utiliza la carpeta compartida y sus límites de archivos.
En la carpeta de Starter, Figma Design y Figma Sites comparten un límite total de tres archivos. FigJam y Figma Slides tienen límites independientes.
Si repites el mismo elemento, crea un componente e inserta instancias. Así puedes actualizar el diseño principal y mantener coherencia sin editar cada copia por separado.
Utiliza disposición automática cuando una estructura deba adaptarse a texto, espaciado o elementos nuevos. No elimina la necesidad de probar el diseño con contenido real.
El prototipo de Figma Design representa interacciones y recorridos. La implementación real o la publicación con otro producto requieren revisar sus funciones y condiciones específicas.
Los puestos Full, Dev, Collab y View tienen capacidades distintas. Un puesto Collab no equivale a editar Figma Design y ver o comentar no exige comprar un puesto de pago.
Buenas prácticas
- 1Nombra páginas, marcos y componentes con criterios que el equipo pueda entender sin pedir explicaciones.
- 2Diseña con contenido realista y comprueba textos largos, estados vacíos y errores.
- 3Define componentes para los patrones que de verdad se repiten antes de construir una biblioteca grande.
- 4Prueba la disposición automática con distintos contenidos y tamaños de marco.
- 5Comparte enlaces con el permiso mínimo necesario y distingue revisión de edición.
- 6Documenta el propósito de cada prototipo y qué interacciones son simuladas.
- 7Revisa puestos facturables, créditos de IA y recursos de la comunidad antes de ampliar el uso.
Preguntas frecuentes sobre Figma
Es una plataforma de creación y colaboración visual. Figma Design permite diseñar interfaces y prototipos; FigJam sirve para pizarras y talleres; Figma Slides para presentaciones. Otros productos, como Sites o Make, tienen sus propias funciones y condiciones.
Sí. Starter incluye borradores ilimitados y una carpeta compartida con un máximo total de tres archivos entre Figma Design y Figma Sites. FigJam y Figma Slides tienen límites independientes de tres archivos cada uno. El historial de versiones de Starter es de 30 días.
Con facturación anual, Professional cuesta 16 USD por puesto Full al mes, 12 USD por puesto Dev y 3 USD por puesto Collab. La página también publica 55 USD por puesto Full al mes en Organization y 90 USD en Enterprise, ambos con facturación anual. Professional permite contratar con pago mensual, pero debes comprobar su tarifa al cambiar la modalidad; no todos los puestos permiten editar Figma Design.
Sí. Figma admite euros para nuevas suscripciones Professional, Organization y Enterprise. Los importes en USD de esta guía son los publicados por la página consultada, no conversiones ni tarifas oficiales en euros; revisa la moneda, los impuestos y el total en la contratación.
Sí. Puedes elegir español en la preferencia de idioma de tu cuenta. También hay guías y galerías oficiales en español; los textos de los archivos, las plantillas y los vídeos pueden estar en otro idioma.
Figma Design sirve para crear interfaces, componentes y prototipos con precisión. FigJam es una pizarra colaborativa para ideas, diagramas, talleres y planificación; no son el mismo tipo de archivo ni tienen las mismas herramientas.
Puedes compartir archivos para ver y comentar sin comprar puestos de pago. En Starter puedes colaborar en los archivos de la carpeta compartida dentro de sus límites; para invitar a otros editores a tus borradores personales necesitas actualizar a un plan de pago.
En un plan de pago, Full permite trabajar con Figma Design y los demás productos incluidos. Dev da acceso completo a Dev Mode y a ciertos productos de colaboración, pero no equivale a editar Figma Design. Collab se orienta a productos de colaboración; View permite ver y comentar sin coste de puesto.
No. Un prototipo representa pantallas, conexiones e interacciones para probar un recorrido. Figma ofrece otros productos como Sites y Make, pero su publicación, alojamiento, funciones y límites deben revisarse por separado.
La galería oficial tiene una versión en español y la comunidad ofrece recursos gratuitos y de pago. Que una ficha esté en español no garantiza que su archivo lo esté. Revisa el autor, el idioma, la licencia y el precio antes de reutilizarlo.
No para crear y utilizar componentes locales y disposición automática dentro de un archivo al que tengas permiso de edición. Las bibliotecas compartidas, ciertas capacidades de prototipado, variables y funciones avanzadas sí dependen del plan.
No. Utiliza créditos compartidos entre funciones y productos. La página de precios indica para Starter hasta 500 créditos al mes, con un límite diario de 150; los puestos Full incluyen 3.000 al mes en Professional, 3.500 en Organization y 4.250 en Enterprise. La asignación no significa que todas las funciones estén disponibles en todos los puestos.