Créer ses captures d’écran App Store dans Figma (et quand un générateur va plus vite)

Pour créer des captures d’écran App Store dans Figma, créez une frame par capture à la taille exacte en pixels qu’accepte Apple (par exemple 1290 × 2796 pour le plus grand emplacement iPhone), construisez un composant réutilisable qui contient le titre et un mockup d’appareil, placez vos captures de l’app dans le mockup, puis exportez chaque frame en 1x au format PNG ou JPG. Comme les unités de Figma sont des pixels en 1x, une frame à la bonne taille s’exporte exactement à la taille qu’attend App Store Connect.

Figma est un excellent outil pour ça, mais cela devient aussi beaucoup de travail manuel dès que vous ajoutez des appareils, des langues et Google Play. Ce guide présente l’organisation qui garde ce travail gérable, et dit franchement où un générateur dédié fait gagner du temps.

Quelles tailles de frame utiliser pour les captures d’écran App Store dans Figma

Partez des spécifications des captures d’écran d’Apple, qui listent les tailles exactes en pixels de chaque emplacement d’écran. App Store Connect réduit vos plus grandes captures pour les appareils plus petits si votre interface est identique d’une taille à l’autre : la plupart des apps conçoivent donc une série iPhone et, si elles prennent en charge l’iPad, une série iPad. Ajoutez Google Play si vous y publiez.

Apple autorise de 1 à 10 captures par emplacement ; Google Play jusqu’à 8 par type d’appareil. Notre référence des tailles de captures d’écran contient le tableau complet, et l’article sur les exigences de Google Play pour les captures d’écran détaille les règles de Play. S’il vous faut aussi l’image de présentation, consultez notre guide de l’image de présentation Google Play.

Un conseil pratique : alignez les frames d’une série côte à côte sur une seule ligne, avec un écart fixe. Vous voyez toute la série comme le voit quelqu’un qui fait défiler la fiche, et vous repérez d’un coup d’œil un titre trop long ou une couleur qui détonne.

Construire un composant de capture d’écran réutilisable

Ce qui sépare un fichier Figma facile à maintenir d’un fichier qu’on redoute d’ouvrir, ce sont les composants. Construisez la mise en page une fois, puis faites de chaque capture une instance.

1. Le bloc de titre

Créez une frame en auto layout vertical contenant le titre et un sous-titre facultatif. Réglez la largeur pour remplir le parent et la hauteur pour épouser le contenu : un titre sur deux lignes pousse ainsi l’appareil vers le bas au lieu de le chevaucher. Utilisez des styles de texte pour les deux, pour que changer la police ou la taille plus tard ne demande qu’une modification. Les grands corps de texte fonctionnent le mieux ici : le titre se lit à la taille d’une vignette dans les résultats de recherche.

2. Le mockup d’appareil

Dans le cadre de l’appareil, placez un rectangle de la taille de la zone d’écran, avec votre capture de l’app en remplissage d’image réglé sur Fill. Masquer le rectangle avec la forme de l’écran gère les coins arrondis. Faites du mockup un composant à part entière, avec l’image d’écran exposée en propriété d’échange d’instance ou d’image : remplacer une capture ne vous obligera plus à fouiller dans les calques.

3. Le composant de capture d’écran

Englobez le bloc de titre et le mockup d’appareil dans une frame parente à la taille du store, en auto layout vertical, avec des marges intérieures et un remplissage d’arrière-plan. Ajoutez des propriétés de composant pour le texte du titre et l’image d’écran. Les variantes sont utiles si vous utilisez plusieurs mises en page, par exemple appareil centré, appareil coupé en bas, ou pas d’appareil du tout pour une capture de clôture.

Chaque capture de la série devient alors une instance dont vous modifiez deux propriétés : le titre et l’image. Un changement de marges, de typo ou d’arrière-plan dans le composant principal les met toutes à jour.

Où trouver des mockups d’appareils pour Figma

• Figma Community. Cherchez le nom de l’appareil suivi de « mockup ». Il existe de nombreux fichiers gratuits avec des cadres d’iPhone, d’iPad et de Pixel récents. Vérifiez la licence de chacun, et vérifiez que la zone d’écran correspond à l’appareil sur lequel vous avez fait la capture, sinon votre capture sera étirée.
• Apple Design Resources. La page des ressources de design d’Apple propose des cadres d’appareils officiels, mais en fichiers Photoshop et PNG, pas en fichiers Figma. Vous pouvez placer le PNG par-dessus votre rectangle d’écran dans Figma. Apple vous demande de consulter ses directives marketing si vous utilisez ces cadres dans des supports marketing. La même page propose un kit d’interface iOS et iPadOS officiel dans Figma, pratique si vous maquettez un écran qui n’est pas encore développé.
• Pas d’appareil du tout. Beaucoup de bonnes séries se passent de cadre et affichent la capture bord à bord, ou zooment sur une seule partie de l’interface. C’est un choix de style, pas une obligation.

Quoi que vous mettiez dans le cadre, partez d’une capture propre : barre d’état fixée à 9:41, données réalistes, aucune surcouche de débogage. Notre guide sur les captures d’écran propres depuis le simulateur et l’émulateur donne les commandes.

Exporter des captures d’écran App Store depuis Figma au pixel près

1. Sélectionnez toutes les frames de captures de la série (pas les instances qu’elles contiennent).
2. Dans la section Export du panneau de droite, ajoutez un réglage d’export : 1x, format PNG ou JPG.
3. Exportez. Chaque frame donne un fichier portant le nom de la frame.

Quelques pièges fréquents :

• Mauvais multiplicateur. Le 2x sur une frame en taille réelle la double, et le store refusera le fichier. Si vous obtenez 2580 × 5592, c’est ce qui s’est passé.
• Tailles de frame fractionnaires. Une frame de 1290,5 px de large s’exporte à une taille que le store n’accepte pas. Saisissez les dimensions au clavier plutôt que de les ajuster à la souris.
• Transparence. App Store Connect n’accepte pas les images avec un canal alpha, et Google Play demande du JPEG ou du PNG 24 bits sans alpha. Donnez à chaque frame un arrière-plan opaque ; si un PNG est encore refusé pour cause de transparence, exportez plutôt en JPG.
• Ordre des fichiers. Préfixez les noms de frames par un numéro (01-hook, 02-proof) pour que les fichiers se trient dans l’ordre d’importation.

Le problème de la localisation

C’est là que Figma coûte cher. Si votre fiche est disponible en cinq langues, vous avez cinq séries de frames par appareil, chacune avec ses titres à modifier, vérifier et exporter. Ajoutez l’iPad et Google Play, et vous voilà à maintenir quinze séries.

Deux approches permettent de garder la main :

• Dupliquer par langue, garder des composants partagés. Copiez la ligne d’instances pour chaque langue et ne remplacez que le texte. Les changements de mise en page continuent de venir du composant principal. Cela fonctionne avec toutes les formules, mais chaque changement de texte est une modification manuelle dans chaque langue.
• Des variables de type chaîne avec des modes. Enregistrez chaque titre dans une variable de type chaîne et ajoutez un mode par langue. Changer le mode d’une frame change son texte. D’après le centre d’aide de Figma, les modes sont disponibles avec les formules Education, Professional, Organization et Enterprise, et le nombre de modes par collection dépend de la formule.

Aucune des deux ne règle l’allongement du texte. Les titres allemands et finnois sont souvent plus longs qu’en anglais, et un titre qui tient sur deux lignes en anglais peut en demander trois. Vérifiez chaque frame et, pour les langues qui s’écrivent de droite à gauche, inversez la mise en page et pas seulement le texte. La traduction elle-même mérite aussi du soin ; nos guides sur la localisation des captures d’écran App Store et sur pourquoi traduire n’est pas localiser abordent les deux.

Les pages produit personnalisées multiplient encore le travail, puisque chacune a en général ses propres captures. Si vous en prévoyez, notre guide des pages produit personnalisées vaut la peine d’être lu avant de monter le fichier.

Quand Figma est le bon outil, et quand un générateur va plus vite

Nous développons un générateur de captures d’écran, alors prenez ceci avec le recul qui s’impose. Mais nous conseillerions sincèrement à certaines équipes de rester sur Figma.

Une voie médiane courante : concevoir le visuel clé et la première capture dans Figma, où vous avez un contrôle total, puis utiliser un générateur pour la partie répétitive, à savoir produire chaque taille et chaque langue. Notre comparatif Launch Shots vs Figma met les compromis côte à côte, et notre sélection de générateurs de captures d’écran passe en revue les autres options.

Si vous optez pour un générateur, Launch Shots tient à jour les tailles des stores pour tous les appareils, traduit les titres dans les langues des stores et publie sur App Store Connect et la Google Play Console. Il dispose aussi d’un serveur MCP si vous préférez générer la série depuis Claude Code ou Cursor.

Check-list : captures d’écran App Store dans Figma

• Des frames saisies aux tailles exactes des stores (1290 × 2796 ou 1320 × 2868 pour l’iPhone, 2064 × 2752 pour l’iPad, 1080 × 1920 pour Play).
• Un composant principal en auto layout pour le titre, avec un mockup d’appareil imbriqué ; chaque capture est une instance.
• Le titre et l’image d’écran exposés en propriétés de composant.
• Des captures propres : barre d’état à 9:41, données réalistes, rapport d’aspect de l’appareil respecté.
• Un arrière-plan opaque sur chaque frame ; export en 1x en PNG ou JPG ; préfixes numériques dans les noms de frames.
• Un plan pour les langues avant de commencer, que ce soit des lignes dupliquées ou des modes de variables.
• Un contenu vérifié par rapport aux bases de nos bonnes pratiques pour les captures d’écran, à commencer par ce qu’on met sur la première capture.