Analyser la concurrence dans Figma : un workflow pas à pas

Introduction

Une analyse de la concurrence dans Figma fonctionne mieux comme un fichier reproductible : trois ou quatre concurrents, les mêmes pages capturées à la même largeur, un seul jeu de catégories et un tableau comparatif daté à la fin. Un dossier de captures d'écran en vrac n'est pas une analyse.

Ce tutoriel suppose que vous connaissez les bases de Figma et que vous voulez une structure à réutiliser chaque trimestre. Le prérequis est d'avoir accès aux pages des concurrents que vous comptez étudier. Les étapes : choisir les concurrents et les questions, capturer chaque page, préparer le fichier, mesurer ce qui peut l'être, construire la comparaison et décider quoi changer. Il décrit l'analyse de pages publiques. Il ne décrit pas la republication du design d'autrui comme s'il était le vôtre.

Choisir les concurrents et les questions

Commencez par décider à qui vous vous comparez. Le guide d'analyse concurrentielle de Figma distingue les concurrents directs, qui proposent des produits similaires à vos clients cibles, des concurrents indirects, qui vendent des produits similaires à d'autres clients ou des produits différents aux mêmes clients. Pour une analyse de pages, commencez par les directs.

Gardez la liste courte. Le modèle d'analyse de la concurrence de Figma indique que "trois à quatre concurrents suffisent généralement" et recommande de choisir des concurrents aux offres, identités et valeurs proches. Plus de lignes rendent le tableau final plus difficile à lire sans améliorer les conclusions.

Ensuite, écrivez les catégories avant de capturer quoi que ce soit. Le même modèle cite le prix, la qualité du produit, le support client, le marketing et l'expérience utilisateur comme catégories courantes. Pour une analyse de design, réduisez-les à ce qui se voit sur une page :

1. La disposition du hero et l'appel à l'action principal.
2. La structure de navigation et le nombre d'entrées de premier niveau.
3. La disposition de la page de tarifs (pas les prix eux-mêmes, sauf si vous les vérifiez).
4. L'échelle typographique : tailles des titres et du corps de texte.
5. Le rythme des espacements et l'usage de la couleur.

Décider cela d'avance évite que le fichier devienne un tas d'observations sans cadre commun. Le guide de Figma cite les sites web, les réseaux sociaux, la couverture presse, les articles de blog, les FAQ et les avis clients comme sources de données. Une analyse de pages n'utilise que la première, donc les avis et le positionnement demandent une recherche à part.

Capturer chaque page

Vous avez deux options, et la bonne dépend de ce que vous voulez mesurer.

Captures d'écran

Les captures suffisent pour comparer la mise en page et les parcours. L'article d'aide sur les images de Figma liste les moyens d'importer : coller depuis le presse-papiers, glisser-déposer sur le canevas, le remplissage Image du sélecteur de couleur, ou Place image/video avec Shift Command K sur Mac ou Shift Ctrl K sur Windows. Place image/video est le plus utile pour un lot, car vous pouvez cliquer sur le canevas pour placer chaque fichier à sa taille d'origine ou utiliser Place all.

Deux limites comptent. Figma n'a pas de calque d'image dédié : chaque capture est donc un rectangle avec un remplissage d'image. Et les fichiers de plus de 4096 x 4096 px sont réduits pour que le plus grand côté mesure 4096 px ou moins. La capture pleine page d'une longue landing page peut dépasser cette hauteur, et le petit texte des sections du bas risque d'être flou. Capturez les pages longues par sections si vous comptez y lire des détails. Comparez cette approche à une capture plus un tracé d'image si vous êtes tenté de vectoriser le résultat.

Calques modifiables

Quand il vous faut des valeurs réelles, importez la page sous forme de calques plutôt que d'image. UnHTML est un plugin Figma qui prend un fichier .html autonome, un .webarchive de Safari ou un scene.json capturé avec sa CLI open source, et construit des frames, du texte, des images, des vecteurs et de l'auto layout à partir du CSS de la page. Vous choisissez un viewport (Desktop 1440, Mobile 390 ou une largeur personnalisée) et obtenez un rapport d'importation listant les polices substituées, les frames revenues au positionnement absolu et les images ignorées.

Soyez clair sur ce que vous obtenez. C'est une structure fidèle et modifiable, pas un clone au pixel près. Les polices manquantes sont remplacées (Inter par défaut) et le rapport consigne chaque remplacement : consultez-le avant de vous fier à une mesure typographique. Les sites en ligne, les ressources distantes et les pages construites en JavaScript doivent d'abord être capturés avec la CLI. Pour les pages derrière une connexion, voyez la capture d'une page derrière un login. Ne capturez que des pages que vous avez le droit de consulter, et respectez les conditions du site.

Préparer le fichier d'analyse

La structure compte plus que le soin du rendu. Les frames sont des conteneurs, et celles posées directement sur le canevas sont des frames de premier niveau. Figma affiche leurs noms sur le canevas et les met en gras dans le panneau des calques, selon l'article d'aide sur les frames. Les noms de frames deviennent donc vos étiquettes : servez-vous-en.

Une organisation qui tient la route :

• Une ligne par concurrent, une colonne par type de page (accueil, tarifs, produit).
• La même largeur pour chaque capture : 1440 px pour le bureau, 390 px pour le mobile.
• Un nom de frame comme competitor-a / pricing / 1440 / 2026-10-24, pour que la date de votre relevé fasse partie du fichier.
• Clip Content activé sur chaque frame de capture. Il masque tout ce qui dépasse du bord de la frame et évite que les captures trop grandes chevauchent leurs voisines.

Quick-add duplique une frame et décale ses voisines pour faire de la place, ce qui aide si vous ajoutez un quatrième concurrent plus tard. Votre propre produit va sur la première ligne, capturé de la même façon, pour que la comparaison reste équitable.

Mesurer ce qui peut l'être

Juger une capture à l'œil donne des impressions. Mesurer donne des chiffres pour un tableau. Avec des captures, vous pouvez toujours mesurer en superposant des rectangles et en lisant leurs tailles, mais c'est lent et aussi précis que la capture elle-même. Avec des calques importés, vous sélectionnez un calque de texte et lisez directement sa taille, son interligne et son remplissage.

Relevez les mêmes champs pour chaque concurrent :

Les exemples sont des valeurs fictives pour montrer le format, pas des mesures d'un site réel. Remplissez les vôtres.

Si des couleurs reviennent, regroupez-les en styles partagés ; le tutoriel sur l'extraction des styles de couleur d'une page importée explique comment. Notez l'origine de chaque chiffre. Une valeur lue dans un import dont la police a été substituée est plus fragile qu'une valeur lue sur une page dont le rapport n'indique aucune substitution.

Construire le tableau comparatif

Rassemblez maintenant tout sur une même surface. L'approche du modèle de Figma est un tableau avec votre entreprise à côté de chaque concurrent et les catégories en lignes, que vous pouvez monter dans FigJam ou sous forme de frame dans votre fichier de design. Placez les mesures dans les cellules et liez chaque cellule à sa frame de capture pour que chacun puisse vérifier.

Deux règles préservent l'honnêteté. Première règle : datez tout. Les prix, les limites et la mise en page d'un concurrent évoluent, donc une cellule indiquant "vérifié le 2026-10-24" est utile, et une cellule sans date ne l'est pas. Ne recopiez pas des prix de mémoire ; lisez-les sur la page de tarifs du concurrent le jour où vous les notez, et laissez la cellule vide si vous ne pouvez pas les vérifier. Deuxième règle : restez impartial. Le conseil du modèle est que si un concurrent vous devance dans la plupart des catégories, vous y voyiez une occasion de progresser plutôt qu'une raison d'écarter la comparaison.

Transformer les constats en décisions

Les quatre étapes de Figma se terminent par l'application des enseignements à un plan stratégique. Pour une analyse de design, cela revient à transformer le tableau en une courte liste de décisions :

1. Où votre page est nettement en retard (par exemple, une page de tarifs qui manque de repères pour une lecture rapide).
2. Où tous les concurrents font la même chose, ce qui est probablement une convention à suivre.
3. Où personne ne fait quelque chose, ce qui peut être un vide ou une mauvaise idée. Testez avant de vous engager.

Gardez le fichier en interne. L'objectif est d'apprendre ce qui fonctionne et pourquoi, puis de concevoir votre propre réponse. Si vos constats suggèrent de nouveaux tokens ou composants, construire un design system à partir d'un site importé montre comment les organiser. Refaites l'analyse à intervalles réguliers, avec les mêmes noms de frames et les mêmes dates, pour voir les évolutions dans le temps.

Questions fréquentes

Combien de concurrents une analyse Figma doit-elle couvrir ?

Le modèle de Figma indique que trois à quatre suffisent généralement. Au-delà, le tableau comparatif devient illisible. Choisissez des concurrents aux offres et aux publics proches.

Est-il légal d'analyser la page d'un concurrent dans Figma ?

Consulter une page publique et noter ce que vous observez relève de la recherche ordinaire. Republier le design d'autrui comme s'il était le vôtre est autre chose, et une question de droit d'auteur. Cet article n'est pas un conseil juridique. Gardez le fichier en interne et consultez un juriste en cas de doute.

Faut-il utiliser des captures ou des calques modifiables pour une analyse ?

Les captures suffisent pour comparer la mise en page et les parcours. Les calques modifiables aident quand il vous faut des espacements, des tailles de texte et des couleurs réels, car vous pouvez les inspecter au lieu de les estimer.

UnHTML peut-il cloner exactement la page d'un concurrent ?

Non. UnHTML produit des calques fidèles et modifiables, pas un clone au pixel près. Son rapport d'importation liste les polices substituées, les retours au positionnement absolu et les images ignorées : lisez-le avant de vous fier à une mesure.