1893 avis : 5/5 ⭐️⭐️⭐️⭐️⭐️

Wordpress développement

Developpeur wordpress fullstack

figma tuto

Comment utiliser Figma les meilleures pratiques

Figma est un outil de conception d’interface utilisateur collaboratif qui permet à différentes personnes de communiquer au sein d’un même projet.
Il y a quelques années encore, le concept de collaboration au sein de ces outils se limitait à la possibilité de commenter les conceptions et guère plus. Aujourd’hui, avec l’adoption de plus en plus massive de Figma, les collaborations sont devenues plus faciles que jamais et le flux de travail a inévitablement changé.
Ce guide a été créé dans l’intention précise d’aider tous les développeurs à se déplacer de manière autonome entre les différentes toiles, pages et prototypes de Figma, un outil qui fait de la collaboration son point fort.
Nous avons adopté une division par macro sujets, certains très techniques, d’autres plus généraux, tout en essayant de garder l’accent sur le point de vue du développeur.
Donc, si vous êtes curieux de commencer à découvrir un outil extrêmement flexible et capable d’apporter de la nouveauté et de la rapidité dans le monde de la conception et du développement, il vous suffit de commencer à lire.

Organisation des contenus

Figma considère les pages comme de vastes zones de travail dans lesquelles vous pouvez insérer des cadres (des cadres aux dimensions prédéfinies qui sont utilisés pour simuler les tailles d’écran), des composants, des éléments non groupés et tout ce que vous pouvez imaginer. Nous pouvons trouver des pages dans la barre latérale de gauche et les renommer, en ajouter de nouvelles, les supprimer ou les dupliquer librement.

Bien qu’il n’y ait pas de manière correcte de gérer ces macro-groupes, nous suggérons de diviser les pages de cette manière :

  • En organisant les pages comme des entités opérationnelles, il est possible de tenir l’équipe informée de ce qui est en cours de réalisation et de ce qui ne l’est pas.
  • Nous vous conseillons une division par révisions, pages rejetées, pages de bureau, pages mobiles et pages de composants afin de toujours savoir où trouver le matériel de développement utile.
  • Vous pouvez également utiliser la première des pages comme couverture de projet dans les aperçus de votre compte en réglant le tableau d’art à 1920x960px. L’effet de la première page de Figma est celui d’une organisation claire et nette.

Gestion des composants

Pour ceux qui connaissent Sketch, les composants sont les mêmes que les symboles. Pour ceux qui ne sont pas familiers, une petite prémisse est toutefois nécessaire.

Imaginez les composants comme des objets instanciables : il y a un composant principal (maitre), représenté par une icône avec 4 petits losanges violets, et des composants d’instance, représentés par une icône avec un grand losange violet. Nous pouvons transformer tout élément ou groupe d’éléments en un composant et, à partir de là, le dupliquer un nombre illimité de fois, en créant des instances du composant maître.

En appliquant des changements au maître, tous les éléments en dessous s’adapteront en conséquence. Imaginez que vous ayez 16 plans représentant différentes pages d’un même site web et que vous puissiez changer l’élément Header sur toutes les pages en une seule modification, par exemple. Ouvrons une parenthèse sur une fonctionnalité du monde des composants Figma : les surcharges.

Comme nous l’avons vu, en modifiant le maître, les instances s’adaptent en conséquence. Il est toutefois possible de modifier les instances de manière indépendante et rapide, par exemple en changeant la couleur de l’arrière-plan ou la police de caractères d’un titre. Ainsi, le composant d’instance ne sera plus modifiable par le maître dans cette section particulière. Il se peut donc que l’on ne puisse pas voir les changements appliqués à une instance. Dans ce cas, il suffit de cliquer à côté de son nom, dans la barre latérale droite, sur l’icône à trois points et de sélectionner Réinitialiser les priorités.

Parmi les différentes options disponibles, il y a également la possibilité de pousser les changements effectués sur l’instance vers le composant principal (Push overrides to main component), qui à son tour modifiera les instances. Cette fonction est pratique si vous voulez tester les changements directement sur un écran et ensuite, une fois convaincu, mettre à jour tous les composants.

Il suffit de changer les couleurs, la taille, le contenu ou la taille de la police dans le composant maître pour modifier directement ses instances également. Admettons-le : cette logique proche du monde du développement nous épargne des heures et des heures de modifications mécaniques inutiles.

Existe-t-il un moyen de les organiser et/ou de les créer de manière logique et efficace ?

Partons du principe que, même dans ce cas, il n’existe pas de règles gravées dans la pierre, mais des bonnes pratiques qui peuvent être utiles pour réajuster notre méthode de travail.

La méthode que nous utilisons dans la gestion des composants Figma est directement héritée du monde des CSS : BEM – Block Element Modifier, ce qui nous permet d’utiliser la même logique d’organisation dans la conception et le développement.

Pour ceux qui ne sont pas familiers avec le BEM, le type d’organisation suit cette logique :

  • Bloc – un ensemble d’éléments (un en-tête, un pied de page, un article de produit)
  • Élément – la plus petite partie de l’interface utilisateur (une radio, une coche, un séparateur).
  • Modificateur – une variante qui affecte directement le bloc ou l’élément (un bouton désactivé ou un champ de saisie qui présente une erreur).

Il est clair que le BEM s’intègre parfaitement au système de composants que propose Figma. En outre, comme si toute cette liberté d’organisation ne suffisait pas, il est possible de nommer les composants de manière granulaire en utilisant le signe « / » dans le nom, afin de pouvoir les choisir directement dans les tableaux.

Un exemple classique est la création d’un sous-groupe dans les blocs de fiches produits, pour différencier la fiche en promotion de celle en rupture de stock. En organisant ces pièces avec une nomenclature telle que Bloc/Promo Product Card et Bloc/Product Card/Sold Out, Figma identifiera Product Card comme un groupe contenant Promo et Sold Out. En les insérant dans les tableaux, nous aurons la possibilité de passer de l’un à l’autre.

Vous pouvez utiliser ce système pour générer des Modifier, par exemple :

  • Élément/Bouton/Actif
  • Élément/Bouton/Survol
  • Élément/Bouton/Désactivé

Comme vous pouvez le constater, les états CSS, qui sont généralement considérés comme des pseudo-classes, nous les traitons de la même manière qu’un modificateur : bien que cela ne soit pas correct pour le BEM, cela permet de simplifier l’organisation du document.

Styles de calque

Nous avons beaucoup parlé des composants, mais tout ce tutoriel serait incomplet si nous ne parlions pas aussi des styles de calque.

Avec les Styles, vous pouvez modifier directement les éléments, et ils constituent un ensemble de paramètres qui peuvent être consultés dans le panneau de droite (qui est celui délégué aux caractéristiques de l’élément sélectionné).

Il est possible d’avoir une vue d’ensemble de tous les styles du document en cliquant simplement dans une zone vide du document : la barre latérale de droite se remplira de tous les styles créés, et vous permettra de visualiser leur code CSS (une fois que l’onglet d’inspection en haut à droite est sélectionné).

Figma permet de visualiser le code CSS, sous Android ou iOS.

Nomenclature correcte

Plutôt qu’une partie technique proprement dite, cette section sera davantage consacrée à quelques conseils utiles pour organiser tous les éléments que nous avons vus ci-dessus.

Une nomenclature correcte des éléments nous aide non seulement à visualiser correctement une hiérarchie et à comprendre d’un coup d’œil ce sur quoi nous nous trouvons, mais aussi à aider notre équipe à avancer dans un projet qu’elle n’a pas créé.

Lorsque vous travaillez plusieurs jours sur un projet, il est facile de commencer à déplacer et à dupliquer des éléments les yeux fermés, en sachant exactement ce que vous faites. Les projets font partie de nous, pour une courte durée, et l’organisation est donc plus mentale que visuelle.

On ne peut pas en dire autant de ceux qui doivent ensuite mettre la main dessus et modifier ou récupérer des éléments. Mais l’auteur lui-même, après deux mois de mise en veilleuse du projet, aura probablement du mal à se mouvoir avec la même agilité qu’auparavant.

Ainsi, ce qui peut sembler être une perte de temps pour l’individu au début, n’est rien d’autre qu’un gain de temps au niveau de l’entreprise par la suite.

En résumé

Pour récapituler, voici ce que vous pouvez renommer dans Figma de manière intelligente, en optimisant les communications indirectes :

  • Pages – pour indiquer la révision actuelle, les fichiers à ignorer, la section des composants et la section du moodboard.
  • Composants – utilisez le signe / et créez des sous-couches d’éléments avec différents états – comme un bouton qui peut être survolé, activé, désactivé ou désactivant.
  • Styles – indiquer les couleurs principales avec des noms cohérents, comme Couleur principale et Couleur secondaire, ou avec des polices, en indiquant leur type, comme Titre 1, Paragraphe 2 et tout autre élément pouvant servir notre projet.
  • Niveaux – indiquer le nom de l’élément, comme dans un en-tête en indiquant la couche qui contient la couleur de fond avec un Arrière-plan.
  • Groupes – en précisant ce que ce groupe représente, par exemple un groupe appelé Fiche produit, qui contient tous ses éléments (boutons, arrière-plans, images, texte et étiquettes).

Il est essentiel de demander à votre équipe de conception de renommer correctement les éléments, en expliquant leur utilité. Si le temps ne permet vraiment pas une nomenclature exhaustive, vous pouvez toujours utiliser un plugin pratique pour Figma.

Articles dans la thématique Wordpress :
Ajouter Geocoder sur une application rails

Avant de commencer (template utilisé 🙂 Avant de commencer, j’ai lancé le template très basique de rails new avec webpack + postgré Installer Geocoder Geocoder est une gem disponible dans la ruby gem (librairie de ruby), permettant ainsi de rajouter les points coordonnées GPS sur un élément. Une adresse est.

Lire l'article
Réussir son audit technique SEO

Un audit SEO technique est un prérequis essentiel pour garantir à votre site un bon positionnement dans les résultats des moteurs de recherche. Là où le SEO « on page » et le SEO « off page » sont respectivement dédiés à l’optimisation du contenu des pages Web et à la popularité du site,.

Lire l'article
devise authentification for rails
Installer Devise sur une app rails (authentification)

Qu’est ce que Devise ? Devise est une gem (librairie ruby) disponible dans la ruby gem, qui vous permet d’ajouter l’authentification et l’enregistrement d’utilisateurs sur votre application. Il est primordiale d’avoir Devise ! En effet, Devise vous permettra d’avoir accès a de nouvelles méthodes. Nous avons alors comme nouvelles notions.

Lire l'article