Cómo hacer un análisis de competidores en Figma: flujo de trabajo paso a paso

Introducción

Un análisis de competidores en Figma funciona mejor como un archivo repetible: tres o cuatro competidores, las mismas páginas capturadas con el mismo ancho, un único conjunto de categorías y una tabla comparativa con fecha al final. Una carpeta de capturas sueltas no es un desglose.

Este tutorial da por hecho que conoces lo básico de Figma y quieres una estructura que puedas reutilizar cada trimestre. El requisito previo es tener acceso a las páginas de los competidores que vas a estudiar. Los pasos son: elegir competidores y preguntas, capturar cada página, preparar el archivo, medir lo que se pueda medir, construir la comparación y decidir qué cambiar. Describe cómo analizar páginas públicas. No describe cómo republicar el diseño de otra persona como si fuera tuyo.

Elige los competidores y las preguntas

Empieza por decidir con quién te comparas. La guía de análisis competitivo de Figma distingue entre competidores directos, que ofrecen productos similares a tus clientes objetivo, e indirectos, que venden productos similares a clientes distintos o productos distintos a los mismos clientes. Para un desglose de páginas, empieza por los directos.

Mantén la lista corta. La plantilla de análisis de competidores de Figma dice que "tres o cuatro competidores suele ser suficiente" y recomienda elegir competidores con ofertas, identidades y valores parecidos. Más filas hacen la tabla final más difícil de leer y no mejoran las conclusiones.

Después, escribe las categorías antes de capturar nada. La misma plantilla menciona precios, calidad del producto, atención al cliente, marketing y experiencia de usuario como categorías habituales. Para un desglose de diseño, redúcelas a lo que se puede ver en una página:

1. Disposición del hero y llamada a la acción principal.
2. Estructura de navegación y número de elementos de primer nivel.
3. Disposición de la página de precios (no los precios en sí, salvo que los verifiques).
4. Escala tipográfica: tamaños de títulos y de texto.
5. Ritmo de espaciado y uso del color.

Decidirlo de antemano evita que el archivo se convierta en un montón de observaciones sin un marco común. La guía de Figma enumera sitios web, redes sociales, cobertura de prensa, artículos de blog, preguntas frecuentes y reseñas de clientes como fuentes de datos. Un desglose de páginas solo usa la primera, así que ten en cuenta que las reseñas y el posicionamiento requieren una investigación aparte.

Captura cada página

Tienes dos opciones, y la correcta depende de lo que necesites medir.

Capturas de pantalla

Las capturas bastan para comparar disposición y flujos. El artículo de ayuda sobre imágenes de Figma enumera las vías de entrada: pegar desde el portapapeles, arrastrar y soltar sobre el lienzo, el relleno Image del selector de color, o Place image/video con Shift Command K en Mac o Shift Ctrl K en Windows. Place image/video es la más útil para un lote, porque puedes hacer clic en el lienzo para colocar cada archivo en su tamaño original o usar Place all.

Hay dos límites que importan. Figma no tiene una capa de imagen dedicada, así que cada captura es un rectángulo con un relleno de imagen. Y los recursos de más de 4096 x 4096 px se reducen para que el lado más largo mida 4096 px o menos. La captura completa de una landing larga puede superar esa altura, así que el texto pequeño de las secciones inferiores puede quedar borroso. Captura las páginas largas por secciones si piensas leer detalles en ellas. Compara este método con una captura más un trazado de imagen si te tienta trazar el resultado.

Capas editables

Cuando necesites valores reales, importa la página como capas en lugar de usar una imagen. UnHTML es un plugin de Figma que toma un archivo .html autocontenido, un .webarchive de Safari o un scene.json capturado con su CLI de código abierto, y construye frames, texto, imágenes, vectores y auto layout a partir del CSS de la página. Eliges un viewport (Desktop 1440, Mobile 390 o un ancho personalizado) y obtienes un informe de importación con las fuentes sustituidas, los frames que volvieron a posicionamiento absoluto y las imágenes omitidas.

Sé claro sobre lo que obtienes. Es estructura fiel y editable, no un clon exacto al píxel. Las fuentes que faltan se sustituyen (Inter por defecto) y el informe registra cada cambio, así que revísalo antes de fiarte de cualquier medida tipográfica. Las páginas en vivo, los recursos remotos y las páginas construidas con JavaScript deben capturarse primero con la CLI. Para páginas tras un inicio de sesión, consulta cómo capturar una página tras un login. Captura solo páginas que tengas derecho a ver y respeta los términos del sitio.

Prepara el archivo del desglose

La estructura importa más que el acabado. Los frames son contenedores, y los que están directamente sobre el lienzo son frames de nivel superior. Figma muestra sus nombres en el lienzo y los resalta en negrita en el panel de capas, según el artículo de ayuda sobre frames. Eso convierte los nombres de los frames en tus etiquetas, así que aprovéchalos.

Una disposición que funciona:

• Una fila por competidor y una columna por tipo de página (inicio, precios, producto).
• El mismo ancho en todas las capturas: 1440 px para escritorio, 390 px para móvil.
• Un nombre de frame como competitor-a / pricing / 1440 / 2026-10-24, de modo que la fecha en que miraste forme parte del archivo.
• Clip Content activado en cada frame de captura. Oculta todo lo que sobresalga del borde del frame y evita que las capturas demasiado grandes se solapen con las vecinas.

Quick-add duplica un frame y desplaza a sus vecinos para dejar sitio, lo que ayuda cuando añades un cuarto competidor más tarde. Tu propio producto va en la primera fila, capturado de la misma forma, para que la comparación sea justa.

Mide lo que se pueda medir

Mirar una captura a ojo te da impresiones. Medir te da números para una tabla. Con capturas aún puedes medir superponiendo rectángulos y leyendo sus tamaños, pero es lento y tan exacto como la propia captura. Con capas importadas puedes seleccionar una capa de texto y leer directamente su tamaño, interlineado y relleno.

Recoge los mismos campos de cada competidor:

Los ejemplos son marcadores de posición del formato, no mediciones de ningún sitio real. Rellena los tuyos.

Si los colores se repiten, pásalos a estilos compartidos; la guía para extraer estilos de color de una página importada lo explica. Anota de dónde salió cada número. Un valor leído de una importación con una fuente sustituida es más débil que uno leído de una página cuyo informe no muestra ninguna sustitución.

Construye el tablero comparativo

Ahora júntalo todo en una sola superficie. El enfoque de la plantilla de Figma es una tabla con tu empresa junto a cada competidor y las categorías en vertical, que puedes montar en FigJam o como un frame en tu archivo de diseño. Pon las mediciones en las celdas y enlaza cada celda con su frame de captura para que cualquiera pueda comprobarla.

Dos reglas lo mantienen honesto. Primero, pon fecha a todo. Los precios, los límites y la disposición de las páginas de un competidor cambian, así que una celda que diga "comprobado el 2026-10-24" es útil y una sin fecha no lo es. No copies precios de memoria; léelos en la página de precios del propio competidor el día que los anotes, y deja la celda vacía si no puedes verificarlos. Segundo, mantén la imparcialidad. La recomendación de la plantilla es que, si un competidor te supera en la mayoría de las categorías, lo tomes como una oportunidad de mejora y no como un motivo para descartar la comparación.

Convierte los hallazgos en decisiones

Los cuatro pasos de Figma terminan con la aplicación de lo aprendido a un plan estratégico. En un desglose de diseño, eso significa convertir la tabla en una lista corta de decisiones:

1. Dónde tu página va claramente por detrás (por ejemplo, una página de precios que necesita más pistas para leerla de un vistazo).
2. Dónde todos los competidores hacen lo mismo, que probablemente sea una convención que deberías seguir.
3. Dónde nadie hace algo, que puede ser un hueco o una mala idea. Prueba antes de comprometerte.

Mantén el archivo como interno. El objetivo es aprender qué funciona y por qué, y después diseñar tu propia respuesta. Si tus hallazgos sugieren nuevos tokens o componentes, crear un sistema de diseño a partir de un sitio importado muestra cómo organizarlos. Repite el desglose de forma periódica, con los mismos nombres de frame y fechas, para ver cómo cambian las cosas con el tiempo.

Preguntas frecuentes

¿Cuántos competidores debe cubrir un desglose en Figma?

La propia guía de la plantilla de Figma dice que tres o cuatro suele ser suficiente. Con más, la tabla comparativa deja de ser legible. Elige competidores con ofertas y públicos parecidos.

¿Es legal desglosar la página de un competidor en Figma?

Mirar una página pública y anotar lo que observas es investigación corriente. Republicar el diseño de otra persona como si fuera tuyo es otra cosa y una cuestión de derechos de autor. Este artículo no es asesoramiento legal. Mantén el archivo como interno y consulta a un abogado si tienes dudas.

¿Debo usar capturas o capas editables para un desglose?

Las capturas bastan para comparar disposición y flujos. Las capas editables ayudan cuando necesitas espaciados, tamaños de texto y colores reales, porque puedes inspeccionarlos en lugar de estimarlos.

¿Puede UnHTML clonar exactamente la página de un competidor?

No. UnHTML produce capas fieles y editables, no un clon exacto al píxel. Su informe de importación enumera las fuentes sustituidas, los retornos a posicionamiento absoluto y las imágenes omitidas, así que léelo antes de fiarte de cualquier medida.