Figma pour le design d'application mobile : guide complet
Guide complet pour concevoir des applications mobiles dans Figma : grilles iOS/Android, composants natifs et prototypage.
Le design d applications mobiles dans Figma exige une maitrise des contraintes specifiques aux plateformes iOS et Android, des grilles adaptees aux formats d ecran et des interactions tactiles. Figma offre tous les outils necessaires pour concevoir, prototyper et specifier des interfaces mobiles professionnelles.
Contrairement au design web, le mobile impose des contraintes physiques strictes : taille des cibles tactiles, zones atteignables au pouce, densite de pixels variable et conventions de navigation propres a chaque systeme d exploitation. Ignorer ces contraintes produit des interfaces frustrantes pour les utilisateurs.
Ce guide couvre l ensemble du processus de design mobile dans Figma, depuis la configuration des frames et des grilles jusqu au prototypage interactif et a l export des assets pour les equipes de developpement iOS et Android.
1. Frames et grilles pour iOS et Android
Configurez vos frames Figma aux dimensions standard des appareils les plus repandus. Pour iOS, utilisez 393x852 points pour l iPhone 15 Pro et 430x932 pour l iPhone 15 Pro Max. Pour Android, 360x800 et 412x915 couvrent la majorite des appareils Samsung et Pixel actuels.
Appliquez une grille de 4 colonnes avec des gouttieres de 16px et des marges laterales de 16px pour les ecrans mobiles. Cette configuration s aligne avec les guidelines Material Design de Google et les Human Interface Guidelines d Apple. Creez des Grid Styles dedies pour chaque plateforme.
Gerez les zones systeme dans vos designs en reservant l espace pour la barre de statut en haut et l indicateur home en bas. Sur iOS, la safe area exclut 59px en haut et 34px en bas sur les iPhones avec Dynamic Island. Sur Android, reservez 24px pour la barre de statut.
2. Composants natifs et patterns de navigation
Utilisez les UI kits officiels Apple iOS et Material Design 3 disponibles sur Figma Community comme base pour vos composants. Ces kits contiennent les barres de navigation, les tab bars, les bottom sheets, les modales et les controles de formulaire avec les dimensions et comportements exacts de chaque plateforme.
La navigation mobile repose sur des patterns specifiques : tab bar pour la navigation principale, pile de navigation pour les flux lineaires et modale pour les actions contextuelles. Dans Figma, modelisez ces patterns avec des composants qui incluent les animations de transition standard de chaque plateforme.
Respectez les conventions de chaque OS pour eviter de desorienter les utilisateurs. Sur iOS, le bouton retour est en haut a gauche avec un chevron. Sur Android, la fleche retour est en haut a gauche mais le comportement du bouton systeme back differe. Documentez ces differences dans vos annotations de design.
3. Cibles tactiles et zones d interaction
Apple recommande des cibles tactiles minimales de 44x44 points, tandis que Google preconise 48x48dp pour Material Design. Dans Figma, verifiez systematiquement la taille de vos zones interactives en ajoutant des calques transparents de la dimension minimale sur chaque element cliquable.
La zone du pouce definit les regions facilement atteignables d une seule main sur l ecran. Placez les actions principales dans la zone inferieure de l ecran, facilement accessible, et reservez les actions secondaires pour les zones superieures qui necessitent un etirement. Ce principe guide la disposition des boutons et des menus.
Espacez les cibles tactiles d au moins 8px pour eviter les erreurs de tap. Dans les listes et les formulaires, assurez que chaque ligne ou champ offre une zone de tap suffisante qui s etend sur toute la largeur de l ecran plutot que sur le texte visible uniquement.
Besoin d’aide en Figma ?
Nos experts vous accompagnent. Recevez 3 devis gratuits sous 24h.
Gratuit · Sans engagement · Reponse sous 24h
4. Prototypage et preview sur appareil
Le prototypage dans Figma permet de simuler les interactions mobiles avec des transitions, des overlays et des scrolls. Utilisez les interactions Smart Animate pour creer des transitions fluides entre les ecrans et les overlays pour modeliser les bottom sheets et les menus contextuels.
Testez vos prototypes directement sur un appareil reel grace a l application Figma Mirror pour iOS et Android. Cette application affiche votre prototype a l echelle native de l ecran, revelant les problemes de lisibilite, de taille de cibles et de densite d information invisibles sur un ecran d ordinateur.
Creez des flows de prototypage qui couvrent les parcours utilisateur complets, pas seulement les ecrans isoles. Liez l onboarding, la navigation principale, les actions cles et les etats d erreur pour obtenir un prototype qui permet de tester l experience globale avec de vrais utilisateurs.
5. Export et specifications pour le developpement mobile
Exportez vos assets en resolution multiple pour couvrir les differentes densites d ecran. Pour iOS, fournissez les versions 1x, 2x et 3x. Pour Android, exportez en mdpi, hdpi, xhdpi, xxhdpi et xxxhdpi. Figma genere automatiquement ces variantes via les parametres d export avec les suffixes appropriees.
Utilisez le mode Dev de Figma pour fournir aux developpeurs les specifications exactes : dimensions en points logiques, couleurs avec tokens semantiques, typographie avec les equivalents systeme et espacements exprimes dans l unite de la plateforme cible. Les developpeurs peuvent inspecter chaque element sans intervention du designer.
Annotez les comportements dynamiques que le visuel statique ne peut pas transmettre : animations de chargement, gestion du clavier virtuel, comportement au scroll, etats de connexion reseau et adaptation aux differentes tailles d ecran. Un document de specifications fonctionnelles complement les visuels Figma.
Questions frequentes
Faut-il designer separement pour iOS et Android ?
Cela depend de votre strategie produit. Si vous utilisez un framework cross-platform comme Flutter ou React Native, un design unifie avec des adaptations mineures suffit. Pour des applications natives, prevoyez des variantes respectant les conventions de chaque plateforme, au minimum pour la navigation et les controles systeme.
Quelle resolution utiliser pour les frames mobiles dans Figma ?
Travaillez en points logiques (1x), pas en pixels physiques. Un iPhone 15 Pro fait 393x852 points logiques. Figma affiche et exporte a cette echelle de reference, et les assets sont multiplies lors de l export en 2x et 3x pour correspondre aux ecrans haute densite.
Comment tester l accessibilite d un design mobile dans Figma ?
Utilisez des plugins comme Stark pour verifier les contrastes de couleurs et la taille des textes. Verifiez manuellement que toutes les cibles tactiles font au minimum 44x44 points et que les informations ne dependent pas uniquement de la couleur. Testez avec les modes de daltonisme disponibles dans les plugins.
Comment gerer les differentes tailles d ecran dans Figma ?
Creez des frames pour trois a quatre tailles representatives couvrant petit, moyen et grand ecran. Utilisez les Auto Layouts avec des contraintes de redimensionnement pour que vos compositions s adaptent naturellement. Testez chaque ecran critique sur les extremes de taille pour identifier les problemes de layout.
Quels plugins Figma sont utiles pour le design mobile ?
Les plugins essentiels incluent Autoflow pour visualiser les flux de navigation, Content Reel pour inserer du contenu realiste, Stark pour l accessibilite et Device Frames pour presenter vos designs dans des maquettes d appareil. Le plugin Icons8 donne acces a des milliers d icones natives iOS et Android.
Guides complementaires
Comment créer un design system sur Figma : guide complet 2025
Maîtrisez la création d'un design system complet sur Figma : couleurs, typographie, composants réutilisables et design tokens pour une cohérence parfaite.
FigmaLes 30 meilleurs plugins Figma pour designers en 2025
Sélection complète des 30 meilleurs plugins Figma classés par catégorie : productivité, accessibilité, contenu, animations et collaboration.
FigmaFigma vs Sketch : comparatif complet pour designers en 2025
Comparaison détaillée Figma vs Sketch : fonctionnalités, collaboration, prix et performances pour vous aider à choisir le bon outil.
Outils gratuits recommandes
Lancez votre projet figma
500+ experts verifies prets a vous accompagner. Devis gratuit sous 24h.