À l’occasion d’une de nos API Hours, nous avons choisi de présenter la création d’un Bento Design avec Figma. Voici un retour sur cet atelier que vous pouvez consulter à tout moment sur notre chaîne YouTube.
L’UX/UI, expérience utilisateur et interface, occupe une place centrale dans le webdesign, car elle façonne l’expérience utilisateur et définit la manière dont les visiteurs interagissent avec un site web. Les développeurs ont tout intérêt à s’y former et c’est pourquoi on observe une utilisation croissante d’outils comme Figma pour créer, planifier, conserver des conceptions de design web et applications.
Figma : rapide présentation
Figma est une plateforme de conception collaborative basée sur le cloud qui permet à un webdesigner, un développeur ou des équipes de créer, partager et collaborer sur des projets de design. Avec ses fonctionnalités intuitives et son interface conviviale, Figma permet aux designers de créer des prototypes interactifs, des maquettes de haute qualité et des interfaces utilisateur, le tout en temps réel et avec la possibilité de travailler à plusieurs simultanément. Grâce à sa capacité à centraliser tous les aspects du processus de conception, depuis la conception initiale jusqu’à la livraison finale, Figma facilite la communication et la coordination au sein des équipes. Que ce soit pour concevoir des applications mobiles, des sites web ou des interfaces utilisateur complexes, Figma offre une solution complète et efficace pour transformer les idées en réalité.
Durant l’atelier, nous avons pu observer que Figma permet à l’équipe de collaborer en temps réel : chaque membre de l’équipe peut voir les modifications apportées par son coéquipier en direct à l’écran.
Pourquoi avons-nous choisi Figma ?
Sur le marché actuel, Figma et Adobe XD sont les deux choix favoris des designers. Ils proposent tous deux des options pour créer des grilles de mise en page, mais Figma va encore plus loin avec sa fonctionnalité de « mise en page automatique ». Cela permet aux concepteurs de créer des composants réactifs qui s’ajustent automatiquement à mesure que le contenu change, ce qui constitue un avantage significatif lors de la conception pour plusieurs tailles d’écran.
Figma se distingue par ses nombreuses différences et ses avantages distincts par rapport aux autres logiciels du marché. Tout d’abord, Figma se démarque par sa nature entièrement basée sur le cloud, offrant une collaboration en temps réel vraiment utile. Contrairement à d’autres logiciels qui nécessitent des téléchargements et des installations fastidieuses, Figma permet à plusieurs utilisateurs de travailler simultanément sur un même projet, favorisant ainsi une véritable expérience de conception collaborative.
Un autre avantage majeur de Figma réside dans sa polyvalence. Contrairement à certains logiciels qui se concentrent uniquement sur le design statique ou sur la création de prototypes, Figma offre une plateforme complète qui couvre l’ensemble du processus de conception, de la conception initiale à la réalisation de prototypes interactifs. Cette polyvalence permet aux designers de rester dans un seul environnement pour toutes leurs tâches de conception, ce qui se traduit par un flux de travail plus fluide et efficace.
Figma : quel forfait choisir pour débuter sur la plateforme ?
Parmi les différents plans tarifaires de Figma, il est crucial de choisir celui qui correspond le mieux à vos besoins. Voici un aperçu des différentes options :
- Le forfait gratuit : il permet d’avoir 3 fichiers de design collaboratifs, un nombre illimité de brouillons personnels, et l’inspection basique des fichiers. Parfait pour se familiariser avec l’outil et explorer ses fonctionnalités de base sans engagement financier. C’est celui que nous recommandons !
- Le forfait pro : pour les utilisateurs avancés qui exigent plus de fonctionnalités et de flexibilité, le forfait Pro est une option à considérer. Bien que plus coûteux, ce forfait offre des fonctionnalités avancées telles que les variables et les composants, et le dev mode ou mode développeur très utile pour inspecter et connecter les outils que vous utilisez et vos composants de code au fichier du design.
- Figjam : en plus des plans traditionnels, Figma propose également Figjam, un outil collaboratif similaire à Monday, conçu spécifiquement pour la génération d’idées et la prise de notes en équipe. Cette option est idéale pour les équipes qui recherchent un moyen efficace de collaborer et de brainstormer de manière créative.
La création d’un Bento design avec Figma, comment ça se passe ?
Si vous avez récemment visité des landing pages, vous l’avez probablement déjà vue. Popularisé par les slides d’Apple, le Bento Design est actuellement très présent en ligne.
Le concept de Bento Design tire son origine du Bento Box japonais 🍱, cette boîte à repas où différents éléments sont soigneusement disposés dans un espace restreint.
En webdesign, le Bento Design vise à simplifier et à hiérarchiser l’information en regroupant les éléments de manière stratégique pour une meilleure expérience utilisateur. En combinant l’esthétique minimaliste avec une organisation intelligente du contenu, le Bento Design permet aux utilisateurs de naviguer facilement à travers les informations tout en offrant une expérience visuelle attrayante.
L’intérêt du Bento Design réside dans sa capacité à optimiser l’efficacité de la conception en présentant de manière concise et ordonnée les éléments essentiels, ce qui favorise l’engagement et la compréhension de l’utilisateur.
On citera, ici, le remarquable travail de Mickadoule se prête à l’exercice de la création d’un Bento design avec Figma avec un sujet de taille, puisqu’il s’attaque à l’interface UI de YouTube.
Quelques astuces pour commencer avec Figma
- Changer la couleur d’un objet : pour changer la couleur d’un objet dans Figma, sélectionnez-le puis cliquez sur la couleur dans la palette ou utilisez l’outil Pipette.
- Utiliser la touche SHIFT : maintenez la touche SHIFT pour maintenir les proportions ou l’alignement des objets pendant leur manipulation.
- Ajouter du texte rapidement : sélectionnez l’outil Texte ou utilisez la combinaison de touches Cmd/Ctrl + T pour ajouter du texte rapidement.
- Ajuster les contours des éléments et l’espace entre eux : utilisez les poignées de contrôle pour modifier les contours et les options de distribution pour ajuster l’espace entre les éléments.
Le mode développeur sur Figma
Le Dev Mode ou mode développeur dans Figma ouvre de nouvelles perspectives pour les webdesigner, développeurs web ou les équipes de conception en permettant la création de projets personnalisés et la manipulation avancée des éléments.
Il offre la possibilité de créer des mises en page sur mesure et d’ajouter des éléments spécifiques tels que des carrés et des cadres, offrant ainsi une flexibilité maximale dans la conception des interfaces utilisateur. Mais il peut ne pas être visible à cause des paramètres d’équipe, ce qui limite parfois son intérêt pour la collaboration. De plus, contrairement à d’autres fonctionnalités, les variables ne sont pas créées automatiquement dans Figma et doivent être importées manuellement. Malgré ces limitations, le mode développeur reste un outil intéressant permettant de personnaliser les projets et de répondre aux besoins spécifiques des utilisateurs ou de vos clients.
L’évolution constante du monde du design et du développement web
Comme Marème N’Dong, alumni O’clock aujourd’hui Designer UX UI, le soulignait dans son interview :
Notre métier nous oblige à être constamment à l’affût des dernières technologies et tendances du secteur. Ainsi, rester informé sur différentes plateformes, sujets et/ou secteurs d’activité représente un défi stimulant.
L’adoption rapide d’outils tels que Figma témoigne de l’évolution du monde du design et du développement web vers une approche plus collaborative, agile et s’appuyant sur le cloud. Ces outils permettent aux indépendants comme aux équipes de concevoir, de prototyper et de collaborer en temps réel, quel que soit leur emplacement géographique, ce qui favorise une meilleure communication et une plus grande efficacité dans le processus de création.
La popularité de ces outils souligne l’importance croissante accordée à l’expérience utilisateur et à la conception centrée sur l’utilisateur, ainsi qu’à la nécessité pour les professionnels du design et du développement de s’adapter rapidement aux nouvelles technologies et aux nouvelles méthodes de travail pour rester compétitifs sur le marché.
En somme, l’adoption de Figma et d’autres outils similaires reflètent la transformation continue du secteur vers des pratiques de conception et de développement plus modernes, agiles et collaboratives !
