Créer des sites et applications avec un design responsive est devenu essentiel. En effet, de plus en plus d’utilisateurs y accèdent en utilisant une grande variété d’appareils avec des tailles d’écrans différentes.
Avec Figma, vous pouvez créer des designs responsives car cet outil offre des fonctionnalités avancées pour la conception d’interfaces utilisateur responsives. Si vous n’avez jamais utilisé Figma, n’hésitez pas à contacter un graphiste freelance qui pourra vous accompagner dans la prise en main de l’outil.
En suivant les étapes présentées dans ce tutoriel, vous serez en capacité de concevoir des designs responsives avec Figma pour améliorer l’expérience utilisateur et l’accessibilité de votre site web.
Pourquoi créer un design responsive sur Figma ?
Smartphones, tablettes ou ordinateurs… De nos jours, plusieurs tailles d’écrans ont accès à un même contenu et cela peut être problématique si le design ne s’adapte pas automatiquement à toutes les tailles.
Les design responsives sont devenus une norme au vu du nombre d’appareils différents utilisés pour accéder à des applications ou des sites web. Grâce au responsive design, les sites web et applications s’adaptent automatiquement à la taille de l’écran des utilisateurs et offrent ainsi une meilleure expérience utilisateur, quel que soit l’appareil utilisé.
L’amélioration de l’expérience utilisateur est l’un des principaux avantages d’un design responsive. Une bonne expérience utilisateur assure aux utilisateurs une utilisation simple et facile avec n’importe quel dispositif d’accès.
Avec le responsive design, les utilisateurs peuvent voir plus facilement et clairement les informations importantes. Ils arrivent mieux à naviguer sur un site ou une application et les fonctionnalités y sont plus accessibles.
Un second avantage non négligeable du responsive design est qu’il est favorisé par les moteurs de recherche tels que Google. L’objectif des moteurs de recherche est de satisfaire leurs utilisateurs en leur proposant les meilleurs résultats selon leur recherche et l’expérience utilisateur.
Les sites qui ont un design responsive seront mis plus en avant par les moteurs de recherche, car ceux-ci offrent une expérience utilisateur de meilleure qualité. En ayant des positions plus hautes dans les résultats de recherche, vous pouvez augmenter le trafic organique de votre site et améliorer la visibilité de votre entreprise.
Créer un design responsive qui garantit que votre site web ou application s’adapte automatiquement à la taille de l’écran n’est pas une obligation, mais est fortement recommandé pour que vos utilisateurs soient pleinement satisfaits.
Comment utiliser les contraintes et la mise en page automatique pour créer un design responsive avec Figma ?
Si vous êtes en plein dans la conception des maquettes de votre site web ou de votre application avec Figma, alors vous allez devoir adapter chaque maquette pour différentes tailles d’écran.
Cela peut paraître compliqué et effectivement, ce le sera si vous le faites manuellement. Mais puisque Figma est un outil complet et moderne, vous allez pouvoir utiliser certaines fonctionnalités pour créer des maquettes qui s’adaptent automatiquement à de multiples tailles.
C’est tout le principe du responsive design dans lequel la taille et la position des éléments, dans un écran d’application ou une page web, sont ajustées automatiquement selon la taille de l’écran de l’appareil utilisé.
Grâce aux fonctionnalités de « Contraintes » et de « Mise en page automatique » (« Constraints » et « Auto-layout » sur l’interface en anglais de Figma), vous allez pouvoir créer un design responsive où les éléments vont se repositionner en fonction :
- De la taille du conteneur de l’élément ;
- Des autres éléments.
Quel est le problème d’un design non-responsive ?
Prenons un exemple assez simple d’un titre et d’un sous-titre avec l’un au-dessus de l’autre. Lorsque vous allez redimensionner, augmenter la taille, écrire un titre trop long ou sur deux lignes, alors le titre va chevaucher le sous-titre.
Ce n’est qu’un problème lié à un design non-responsive, mais ce n’est pas l’unique problème. Nous évoquerons uniquement ce problème pour montrer que le design non-responsive n’est pas optimal.
Pour régler le problème ci-dessus, vous devrez donc réajuster manuellement la position du sous-titre pour qu’il s’adapte à la nouvelle mise en page du titre. Ceci représente le problème principal d’un design non-responsive sur Figma : vous devrez constamment revoir la mise en page et la mise en forme de chaque élément de manière manuelle.
Sans design responsive, des éléments de vos maquettes pourront se superposer lors de nombreuses modifications et il vous faudra alors revoir l’ensemble du design de votre site ou de votre application.
En utilisant les options de « Constraints » et « Auto-layout » sur Figma, vos éléments s’adapteront par eux-mêmes aux modifications que vous apporterez aux autres éléments de votre maquette.
1. Adapter les éléments avec un auto-layout
Pour que vos éléments s’adaptent entre eux, vous devez appliquer un auto-layout sur l’ensemble des éléments concernés.
Commencez par sélectionner l’ensemble des éléments qui doivent s’ajuster les uns aux autres (1), vous pouvez faire une sélection multiple en maintenant la touche « Shift ». Puis cliquez sur l’option « Auto-layout » dans le panneau latéral de Figma (2).
Vos éléments seront alors contenus dans une « Frame » qui représente l’auto-layout précédemment ajoutée. Vous pouvez retrouver l’ensemble des éléments contenus dans l’auto-layout en ouvrant l’élément « Frame » dans le panneau des « Layers » de Figma.
Comme vous pouvez le voir, les éléments dans la « Frame » ne se superposent plus, comme nous avons pu le voir dans la partie précédente qui évoque le problème d’un design non-responsive, mais le sous-titre s’est adapté au titre situé au-dessus.
Cependant, si nous réduisons la largeur du conteneur, à savoir l’élément « Frame », alors les éléments contenus dedans dépasseront s’ils ont une largeur plus grande. Ce que nous souhaitons, c’est que l’ensemble des éléments du conteneur s’adaptent aux modifications du conteneur. Si sa largeur change, la largeur maximale des éléments devra changer aussi.
Pour cela, il va falloir modifier les paramètres de l’auto-layout pour chaque élément de votre conteneur par « Fill Container ».
Sélectionnez un élément de votre conteneur (1) puis dans les options d’auto-layout, vous pouvez modifier les valeurs qui sont par défaut sur « Hug » (2) pour « Hug contents » par « Fill Container » (3) qui se raccourcira en « Fill ».
Répétez cette opération pour l’ensemble des éléments de votre conteneur qui doivent s’adapter aux changements qui lui sont apportés.
Avec l’option « Fill container » sur la largeur, les éléments vont s’adapter au conteneur. Par conséquent, si la largeur du conteneur diminue, la largeur maximale des éléments contenus à l’intérieur diminuera aussi (4), alors qu’avec l’option « Hug contents », la largeur des éléments est définie selon le contenu.
2. Ajuster la taille des éléments avec des contraintes
Imaginons que vous souhaitiez ajouter une photo à votre titre et au sous-titre. Sur Figma, vous allez ajouter une nouvelle frame avec l’outil « Frame » ou la touche « F » et créer une frame aux dimensions souhaitées.
Importez votre image dans Figma et intégrez-la dans le frame précédemment créé, aux dimensions de la frame. Vous devriez avoir un résultat similaire à celui-ci :
Le problème est que si vous souhaitez agrandir la taille de la frame de l’image en largeur ou en hauteur, l’image ne suivra pas ce changement et restera à ses dimensions initiales :
La solution à ce problème est relativement simple grâce à la fonctionnalité de « Contraintes » ou « Constraints » sur Figma.
Revenez quelques pas en arrière, lorsque l’image avait les mêmes dimensions que son conteneur. Sélectionnez l’image qui doit s’adapter à son conteneur (1).
Dans la section « Constraints » du panneau latéral droit de Figma, sélectionnez la valeur « Scale » en horizontal et vertical pour que l’image s’adapte parfaitement aux redimensionnements de son conteneur.
Essayez de changer les valeurs de largeur et hauteur du conteneur et vous pourrez voir que l’image est bien redimensionnée de la même manière.
En reprenant l’exemple utilisé dans la partie précédente sur l’auto-layout, vous pouvez intégrer le conteneur « Frame » de votre image dans le conteneur de votre titre et sous-titre (1). Puis, sélectionnez le conteneur de votre image pour définir les valeurs d’auto-layout sur « Fill Container » ou « Fill » pour la largeur et la hauteur (2).
De cette manière, vous aurez un bloc contenant une image, un titre et un sous-titre entièrement responsive que vous pouvez redimensionner à votre guise et dont les éléments s’adapteront automatiquement (3).
On imagine vite qu’un tel bloc peut être utilisé en introduction d’un article de blog et vous pouvez rapidement réaliser la mise en page pour ordinateur à l’horizontale ou pour mobile à la verticale.
Notre astuce pour créer des designs responsives sur Figma
En suivant ce tutoriel, vous aurez appris à créer simplement et efficacement un design responsive sur Figma qui vous servira pour créer des maquettes pour toutes les tailles d’écran !
Si vous préférez déléguer la création des maquettes de votre site ou de votre application, n’hésitez pas à poster une annonce gratuite sur Graphiste.com pour trouver rapidement l’aide d’un graphiste spécialiste de Figma qui pourra concevoir sur Figma les maquettes dont vous avez besoin.
