Guide pratique
Fusionner des captures UI pour des handoffs design propres
Les handoffs design échouent quand les développeurs ne voient que le cas nominal. Une grille montrant tous les états UI — par défaut, survol, chargement, vide, erreur — en une seule image garantit une implémentation complète et supprime la source la plus fréquente d'allers-retours entre design et ingénierie.
Essayer MergeFrame — GratuitLe handoff design-développement est là où la plupart des problèmes de qualité produit naissent. Un designer livre un fichier Figma avec le parcours nominal parfait, le développeur l'implémente — mais personne ne spécifie à quoi ressemble le bouton au survol, ce qui se passe quand la soumission de formulaire échoue, ou comment doit apparaître l'état vide.
Une grille de captures des états UI élimine cette ambiguïté. Faites une capture de chaque état que votre composant peut avoir et fusionnez-les en une seule image de référence. Ensembles d'états courants : (par défaut / survol / actif / désactivé) pour les boutons ; (vide / chargement / rempli / erreur) pour les tableaux de données ; (mobile / tablette / bureau) pour les mises en page responsive.
Cette approche fonctionne aux côtés d'outils comme Figma et Storybook — ce n'est pas un remplacement des bibliothèques de composants, mais un raccourci visuel pour la communication asynchrone rapide dans Slack, les commentaires Linear ou les fils d'emails où les membres de l'équipe ne peuvent pas toujours ouvrir un fichier de design.
Comment faire — Étape par étape
- 1
Identifiez tous les états du composant ou du flux
Listez chaque état : par défaut, survol, focus, actif, chargement, vide, erreur, succès, désactivé.
- 2
Capturez un screenshot de chaque état
Utilisez les DevTools navigateur pour simuler les états hover/focus. Même taille de viewport pour toutes les captures.
- 3
Ouvrez MergeFrame et sélectionnez la taille de grille
Pour 4 états utilisez un 2×2, pour 6 états un 2×3. Gardez des cellules de taille égale pour un équilibre visuel.
- 4
Étiquetez chaque cellule avec le nom de l'état
Ajoutez des étiquettes d'état ('Par défaut', 'Erreur', 'Chargement') comme texte sur chaque capture avant la fusion.
- 5
Partagez la grille dans votre commentaire de handoff
Collez le PNG dans Linear, un commentaire Figma, Jira ou Slack comme référence spec visuelle.
Prêt à fusionner vos images ?
100% navigateur. Sans compte. Sans upload. Gratuit.
Questions fréquentes
Quand utiliser une grille de captures vs. un lien Figma pour le handoff ?
Les liens Figma pour les specs détaillées (espacement, couleurs, tokens). Les grilles de captures pour la communication asynchrone, les mises à jour Slack, et quand vous devez montrer de vrais états rendus plutôt que des maquettes.
Comment capturer les états hover dans un screenshot ?
Dans Chrome DevTools, clic droit sur un élément → Inspecter → cliquez :hov dans le panneau Styles → cochez :hover. Prenez ensuite votre screenshot. Pour Firefox : Inspecteur → Basculer pseudo-classe.
Puis-je inclure des états mobile et bureau dans la même grille ?
Oui. Utilisez un 2×2 avec bureau par défaut/erreur dans la ligne du haut et mobile par défaut/erreur dans la ligne du bas. Ajoutez une étiquette 'Bureau' et 'Mobile' pour la clarté.
MergeFrame — Combinez des images en grille. Gratuit. Sans compte. Navigateur uniquement.
Essayer MergeFrame Gratuitement →