17 mai 2026 · 11 min de lecture

How to Design App Store Screenshots in Figma

Figma est une solution solide pour concevoir des captures d'écran de l'App Store si vous souhaitez un contrôle total de la mise en page. Vous pouvez créer vos propres cadres d'appareils, typographies, dégradés, composants, préréglages d'exportation et variantes localisées. La contrepartie est que Figma ne connaît pas grand-chose d'App Store Connect ou de Google Play. Vous devez créer le système de production vous-même.

Ce tutoriel explique comment concevoir des captures d'écran d'App Store dans Figma sans laisser le fichier se transformer en une pile de cadres dupliqués. Il fonctionne pour les captures d'écran iOS, iPadOS, macOS et Android, et il est particulièrement utile si vous hésitez encore à savoir si Figma suffit ou si vous avez besoin d'un outil de captures d'écran d'App Store dédié.

1. Commencez par les tailles imposées par les stores

Ne commencez pas avec un cadre de présentation aléatoire. Partez des tailles en pixels réellement acceptées par les boutiques. Apple et Google peuvent rejeter des captures d'écran qui ne correspondent pas à leurs règles de dimension, de format ou de ratio d'aspect.

Pour les captures d'écran iPhone actuelles, une taille principale sûre pour l'App Store est de 1320 x 2868 pour les appareils de 6,9 pouces. Pour l'iPad, les tailles courantes incluent 2064 x 2752 pour l'iPad 13" et 1668 x 2388 pour l'iPad 11". Google Play est plus flexible, mais les captures d'écran doivent tout de même respecter les règles de longueur de côté et de ratio d'aspect de Google.

Références utiles :

2. Créez une page Figma par type d'écran

Restez simple et prévisible. Une structure claire est bien plus précieuse qu'une organisation trop complexe :

01 - iPhone 6.9 pour les captures d'écran principales de l'App Store sur téléphone.
02 - iPad 13 pour les captures d'écran iPad.
03 - Google Play Phone pour les captures d'écran de téléphones Android.
04 - Components pour les styles partagés, les cadres d'appareils, les badges et les blocs de texte.
05 - Archive pour les anciennes captures d'écran dont vous pourriez avoir besoin plus tard.

Dans chaque page, créez un cadre (frame) pour chaque emplacement de capture d'écran :01 - Main Benefit, 02 - Feature Detail,03 - Social Proof, etc. Conservez le préfixe numérique dans le nom du cadre, car cela facilitera le tri des exportations Figma.

3. Créez un composant de capture d'écran réutilisable

La plus grande erreur est de concevoir chaque capture d'écran sur un plan de travail (artboard) unique. Cela fonctionne pour une version, puis tout s'effondre dès que vous mettez à jour l'application, ajoutez une langue ou modifiez le style d'arrière-plan.

Créez plutôt une structure de capture d'écran réutilisable :

Un calque d'arrière-plan avec votre traitement de couleur, dégradé ou image.
Un bloc de texte de titre avec des styles de typographie partagés.
Un bloc de sous-titre facultatif.
Un composant de cadre d'appareil.
Un calque de capture d'écran masqué à l'intérieur du cadre de l'appareil.
Des badges, flèches, légendes ou étiquettes de fonctionnalités optionnels.

Utilisez les composants Figma pour les éléments récurrents tels que les cadres d'appareils, les badges et les étiquettes de légende. Utilisez l'Auto Layout aux endroits où le contenu doit s'adapter, en particulier pour les groupes de texte dont la longueur peut varier lors de la localisation.

Références Figma : propriétés des composants, variantes et Auto Layout.

4. Concevez la première capture du point de vue d'un visiteur

Votre première capture d'écran doit répondre à une seule question : pourquoi devrais-je m'intéresser à cette application ? Évitez d'utiliser le premier emplacement pour un écran de paramètres, un écran de bienvenue (onboarding) ou une liste floue de fonctionnalités.

Une formule pratique :

Titre : 4 à 8 mots qui décrivent le bénéfice ou le résultat.
Capture d'écran de l'appareil : montrez l'application en action, pas un écran vide.
Visuel d'appui : un badge, un graphique ou une légende si cela clarifie la valeur.
Arrière-plan : aux couleurs de la marque, simple et cohérent sur toute la série.

Gardez le texte suffisamment grand pour qu'il soit lisible dans les résultats de recherche de l'App Store et les aperçus des pages produit. Si le texte n'est lisible que lorsque le canevas Figma est zoomé, c'est qu'il est probablement trop petit.

5. Déclinez une mise en page en une série complète

Une fois que la première capture d'écran est prête, dupliquez le cadre pour chaque emplacement et changez un message à la fois. Voici un enchaînement classique de sept captures d'écran :

Bénéfice principal.
Flux de travail de base.
Fonctionnalité qui différencie l'application.
Personnalisation ou paramètres.
Confiance, confidentialité, synchronisation ou intégrations.
Cas d'usage secondaire.
Raison finale de télécharger.

Conservez la même position pour l'appareil, le titre et l'arrière-plan, à moins d'avoir une raison bien précise d'en changer. La série doit être perçue comme une seule histoire de produit, et non comme sept publicités distinctes.

6. Anticipez la localisation avant de traduire

La localisation est l'étape où la gestion des captures d'écran sur Figma peut devenir un calvaire. Si vous dupliquez chaque plan de travail pour chaque langue, la moindre modification esthétique se traduit par des dizaines de retouches manuelles.

Pour rendre la localisation moins fastidieuse :

Conservez le texte dans des calques bien identifiés : Headline, Subheadline, Badge.
Utilisez l'Auto Layout pour les conteneurs de texte qui doivent s'étirer.
Évitez les retours à la ligne forcés, sauf si la phrase est définitive.
Laissez de la largeur supplémentaire pour l'allemand, le français, l'espagnol et les autres langues aux formulations plus longues.
Attendez que la version de base en anglais soit parfaitement stable avant de créer une page ou une section distincte par langue.

Si vous devez gérer de nombreuses langues, c'est à ce moment précis que Figma montre ses limites en termes de productivité. C'est faisable, mais cela demande une rigueur de fer : conventions de nommage, composants, préréglages d'exportation et checklist de vérification à chaque version. Si la traduction de vos visuels est une tâche récurrente, comparez ce processus manuel à un flux de travail de localisation de captures d'écran dédié.

7. Configurez des profils d'exportation

Figma vous permet d'exporter les calques et cadres sélectionnés dans les formats d'image courants. Pour les captures d'écran destinées aux stores, exportez les cadres principaux (top-level) et non les groupes imbriqués.

Configuration d'exportation recommandée :

Réglez chaque cadre de capture d'écran sur les dimensions exactes en pixels requises par le store.
Ajoutez un paramètre d'exportation au format PNG pour chaque cadre final.
Nommez vos cadres avec un préfixe numéroté à deux chiffres : 01, 02, 03.
Exportez une seule gamme d'appareils à la fois pour éviter de mélanger les fichiers.
Vérifiez les fichiers PNG exportés dans le Finder avant de les mettre en ligne.

Le fonctionnement de l'exportation dans Figma est détaillé dans son guide d'exportation. La règle d'or pour la mise en production est simple : App Store Connect et Google Play ne s'intéressent qu'au fichier final, et non à l'organisation interne de votre document Figma.

8. Soyez méticuleux lors de la mise en ligne

Avant d'importer vos captures, vérifiez ces quatre points :

Les dimensions des fichiers correspondent bien à l'emplacement cible.
Les fichiers sont classés dans le bon ordre.
Les captures d'écran correspondent à la bonne langue.
Aucun fond transparent ou problème de recadrage accidentel ne s'est glissé dans la version finale.

Concernant plus spécifiquement App Store Connect, chaque langue possède sa propre série de captures d'écran. Si vous exportez vos visuels en anglais, allemand, espagnol et français depuis Figma, séparez ces répertoires et importez-les langue par langue. Pour un guide plus complet, lisez Comment envoyer des captures d'écran vers App Store Connect.

Dans quels cas Figma est-il performant ?

Figma est idéal si vous avez besoin de mises en page sur mesure, si vous travaillez déjà avec un designer et si vos captures d'écran ne changent pas toutes les semaines. Il vous offre un contrôle absolu sur la composition, la typographie, les éléments de marque et la finition visuelle.

Dans quels cas Figma devient-il contraignant ?

Figma complique la tâche dès lors que les captures d'écran font partie intégrante de votre cycle de déploiement régulier. Les inconvénients les plus fréquents sont :

Des cadres dupliqués pour chaque taille d'écran d'appareil.
Des cadres dupliqués pour chaque langue.
Le remplacement manuel des captures d'écran issues de simulateurs.
L'exportation manuelle et la gestion fastidieuse des dossiers.
Des mises en page qui se déforment facilement lorsque les traductions s'allongent.
L'absence de passerelle native pour envoyer les visuels vers App Store Connect.

Cela ne signifie pas pour autant que Figma est un mauvais outil. C'est simplement un outil de conception généraliste, et non une solution dédiée à la création et à l'envoi de captures d'écran pour l'App Store.

Une alternative plus rapide pour les développeurs indépendants

Si vous ne créez des captures d'écran qu'une ou deux fois par an, Figma peut suffire. Mais si vous publiez fréquemment des mises à jour, si vous gérez plusieurs langues ou si vous devez maintenir simultanément des captures pour l'App Store et Google Play, essayez Screenshot Bro.

Screenshot Bro est une application macOS native pour concevoir, localiser, exporter et mettre en ligne les captures d'écran de vos fiches de store. Elle vous propose des rangées d'appareils, des modèles réutilisables, une localisation intégrée, l'exportation par lots et le transfert vers App Store Connect sans avoir à réinventer un système complexe dans Figma. Vous pouvez également parcourir la présentation des fonctionnalités pour découvrir en quoi ce flux de travail se distingue d'un simple fichier de conception.