Dans cet article, nous dirons comment nous avons développé non pas une sphère dans le vide, mais une véritable bibliothèque de composants, et comment nous avons réussi à ignorer le perfectionnisme excessif (pas au détriment du projet) pour
économiser 25% du budget .
Ceci est la première partie de l'article, dans laquelle il y aura beaucoup d'informations pratiques ennuyeuses mais concrètes sur la création de composants dans Figma, ainsi que les nuances, les pièges et les réalités de la création de projets avec un budget limité dans un cadre provincial =)
Le début des travaux a été précédé d'une longue période de négociations et de travaux analytiques, sur la base desquels un mandat détaillé a été rédigé avec une ventilation en blocs fonctionnels (dynamiques) et statiques. Des détails à ce sujet peuvent être trouvés
dans cet article . Si vous ne travaillez pas déjà sur ces savoirs traditionnels, nous vous le recommandons vivement. Expérience extrêmement positive pour toute l'équipe de développement et le projet dans son ensemble.
Mais revenons au design
Il est à noter que Figma a déployé une mise à jour très agréable au plus fort de l'œuvre, donc il n'y aura pas un mot sur les couleurs et les styles de texte. Nous espérons qu'un lecteur attentif apprendra quelque chose d'utile pour lui même sans ces nuances. De plus, si vous n'avez pas une compréhension de base des principes d'organisation des composants dans figma, nous vous recommandons de rechercher sur habr.com (il y a beaucoup d'excellents matériaux sur le sujet).
Avant de commencer la conception pixel-perfect, dans la plupart des cas, nous faisons un concept de conception. Habituellement, c'est une sorte de mise en page brute (du côté visuel), qui doit être soigneusement pensée en termes de comportement sur différents écrans et prendre en compte la fonctionnalité principale. Cela est nécessaire afin d'éviter des surprises désagréables à l'avenir lorsqu'un bloc oublié n'est pas intégré dans les dispositions approuvées. Par conséquent, un concept est plus une ébauche de mise en page de vraies pages qu'un style, qui fournit néanmoins un ensemble de base de styles et de
mises en page de base
pour les pages futures.
Dans ce cas, le concept était le suivant:
En général, rien de compliqué. La seule chose qui nécessitera une attention particulière (sur cette page) est un aperçu des lots (ces cartes), qui se composent d'un ensemble illimité de positions (ces lignes sont dans les cartes) et d'un ensemble différent de boutons pour différents rôles.
Il y a encore quelques nuances inexpliquées, mais nous avons accepté d'être honnêtes et de nous passer de postures inutiles, nous dirons donc comment elles sont apparues dans le processus.
Donc - tout est préparé. Nous avons des savoirs traditionnels avec des fonctionnalités prescrites pour comprendre le fonctionnement des composants; tableau de style comme concept pour comprendre le style des éléments; la norme pour nommer les composants pour un transfert indolore du design à la mise en page, et un nombre infini de tranquillisants de toutes sortes et couleurs ...
Vous pouvez commencer à fouiller dans la figure
L'algorithme de développement du système de conception sera un passage de composants simples et indivisibles (atomes) à des composants plus complexes, et pour un affichage visuel de la hiérarchie, nous tracerons chaque niveau de complexité suivant dans une nouvelle colonne.
Texte
Pour commencer, nous définirons des éléments indivisibles: un ensemble standard de titres, un paragraphe et des styles individuels pour le texte des boutons, un style pour les espaces réservés et les noms de filtre et autre chose. N'oubliez pas de tout transformer en composants!
Montserrat medium comme police principale et Montserrat bold pour les titres et les reflets.
Allez aux icônes. Nous les avons retirés de la bibliothèque gratuite "Feather"
Icônes
Chaque icône est placée dans un conteneur de 24 x 24 pixels et alignée au centre le long de deux axes (juste au cas où). Toutes les icônes sont appelées à goûter, mais avec l'ajout du préfixe «i» afin qu'il n'y ait pas de doublons dans les noms, et les grouper afin de ne pas encombrer le panneau avec des couches.
Nous aurons également des icônes de réseaux sociaux et des e-mails supplémentaires pour les notifications d'entrées incomplètes, la réinitialisation du filtre, un astérisque pour les positions requises dans le lot, un chevron pour les listes déroulantes et une coche pour les cases à cocher et les batttans radio. Toutes ces icônes seront plus petites et plus légères que les principales, mais pour des raisons de standardisation, nous les mettons également dans un conteneur 24x24.
Ensuite, nous passons à des composants plus complexes. Nous les positionnerons à droite et les assemblerons à partir des éléments de la première colonne et des bâtons.
Cases à cocher
Commençons par quelque chose de plus simple.
Cases à cocher et boutons radio dans des conteneurs de 16x16 pixels. Pour chaque état, créez un composant distinct. Cela est nécessaire pour que, dans la conception des pages (assemblées à partir de ces composants), nous puissions remplacer un état par un autre via le panneau INSTANCE.
Nous faisons de même avec tous les éléments dynamiques qui ont des états de guidage, actifs, passifs, etc.
Compteur et curseur
Nous avons également besoin d'un compteur pour afficher la quantité de quelque chose. Ce seront des données différentes selon son emplacement. Nous fabriquons un cadre 20x20 et une figure au centre.
Les boutons des objets curseur nous sont également utiles. Nous les faisons 30x30 et plaçons les icônes chevrons conditionnellement au centre. Nous créons des composants pour différents états.
Arborescence du catalogue
Récemment, nous avons commencé à adhérer au principe de réutilisation des mêmes composants sur différents appareils afin de ne pas produire d'entités inutiles et de maintenir la pureté du code (autant que possible). Par conséquent, nous faisons l'arborescence du catalogue, à partir de l'affichage mobile. Les savoirs traditionnels nous indiquent que le niveau d'imbrication maximal d'un arbre est de 3.
Nous partons du premier niveau: un cadre d'une hauteur de 60 pixels et d'une largeur sans dimension (il s'adaptera au conteneur), l'icône est alignée verticalement et à 20 pixels du bord gauche, le nom de la branche proviendra du composant h4. Tout cela est collé sur le côté gauche dans le panneau CONTRAINTES. Collez le nombre de lots (également h4) et le chevron sur le côté droit.
Redessinez le composant pour la branche ouverte. Nous organisons le deuxième niveau du catalogue de la même manière, mais parce que nous ne réutiliserons ces styles nulle part. Il vous suffit de cloner les lignes de paragraphe par incréments de 20 pixels. Comme dans Photoshop - aucun problème. De même pour le troisième niveau + stick + changement de couleur de ligne.
Vient ensuite une série de compromis continus
Le menu
Le panneau d'onglets pour toutes sortes de menus et d'onglets que nous avons placés dans un conteneur de 60 pixels de hauteur, et les éléments eux-mêmes ont été placés au centre. Pour l'avenir, nous disons que cette approche n'est pas vraie, car si vous voulez obtenir une mise en page entièrement en caoutchouc, chaque onglet doit être placé dans un cadre séparé. Sinon, cela ne fonctionnera pas pour définir le comportement des onglets les uns par rapport aux autres. Mais nous, en discutant avec les développeurs, avec un cœur calme l'a marqué.
Listes
Avec le temps, je me suis souvenu d'une bagatelle telle que des listes numérotées et non numérotées. Pour ajouter un nombre, nous revenons à la première colonne et créons une composante numérique à deux chiffres.
Entrées et filtres
Le moment est venu où nous avons violé nos propres règles de hiérarchie et placé les composants et composants constitués de ces composants (* _______ *) dans une colonne (rappel: la règle était de les placer à droite, en les supprimant dans une autre). Il était possible de s'en passer, mais nous avons décidé que le bloc (filtre ou entrée) et sa liste déroulante comprendraient un composant dans des états différents. Comme l'a dit Salvor Hardin: «Ne laissez jamais la morale vous dissuader de faire la bonne chose.»
Nous avons fait ce compromis pour la raison suivante: la composition de l'entrée et, par exemple, les cases à cocher doivent appartenir au même niveau de difficulté (une colonne), mais la liste déroulante dans l'entrée peut contenir des cases à cocher. Nous voulions vraiment que les listes déroulantes forment une seule unité avec entrée - pour une belle ombre.
Vous pouvez dire que vous deviez alors mettre l'entrée avec les listes déroulantes dans une colonne séparée (colonne suivante) et vous aurez raison. Mais pour nous dans le processus, cela est devenu évident pas immédiatement. Et depuis le lancement du convoyeur, nous, poussés par le budget et les délais, avons été forcés de violer cette loi non écrite de construction de systèmes de conception atomique. Laissez-moi vous dire par expérience - pas un seul concepteur ou développeur n'en a souffert.
Nous reviendrons sur le plan pratique.
Entrées
À l'intérieur du cadre 60 pixels, nous plaçons le composant de paragraphe comme espace réservé. Lorsque l'entrée est mise au point, l'espace réservé se déplace vers le haut. Nous lui donnons un retrait de 20 pixels et le collons au bord gauche. Sur la bordure inférieure du bloc, ajoutez une ligne de 2 pixels (utilisez des rectangles!), Collez verticalement vers le bas. Horizontalement, vous pouvez sélectionner Echelle. Plus à droite, dans différentes situations, on peut avoir soit une unité de mesure, soit un chevron déroulant. Ajoutez cela et un autre et collez-le sur le bord droit. Maintenant, tout est parfaitement étiré et toutes les copies de ce composant héritent du comportement du parent.
Nous ajoutons des composants pour différents états: curseur sur entrée de curseur, focus, liste déroulante ouverte, valide et invalide. Une des façons de créer rapidement des états est: cloner un composant, appuyer sur option + commande + b, ou «instance enfant» - via le menu contextuel. Nous éditons ce dont nous avons besoin et le transformons en un nouveau composant. N'oubliez pas de renommer.
Avec les filtres, la situation est similaire et à l'exception de l'état par défaut et de l'ajout d'une croix pour réinitialiser les valeurs, ils ne diffèrent pas des entrées. Oublié - les entrées se succéderont horizontalement, donc sur le bord droit nous ajoutons une ligne grise de 2px. N'oubliez pas de le coller sur le bord droit.
Boutons
Les boutons de notre projet seront de deux types.
Premièrement: les boutons habituels qui seront utilisés partout sauf pour les cartes d'aperçu du lot. Leur anatomie est la suivante: un cadre de 30 pixels de haut avec un fond transparent, un rectangle de taille similaire avec un arrondi de 15 pixels (dans le panneau CONTRAINTES nous définissons la valeur d'échelle dans les deux axes) et le composant btn-txt que nous alignons dans tous les axes au centre (pour chaque pompier, nous décidons soudainement augmenter la hauteur du bouton?) Dans un composant séparé, sélectionnez le style du bouton au survol et un style distinct pour appuyer.
Le deuxième type de boutons doit correspondre au style des cartes d'aperçu et avoir des icônes. En plus de la fonction push, les boutons signalent également via un compteur tiré de la même colonne (pardon), par exemple, combien de fois le bouton a été enfoncé.
Nous les fabriquons à partir de rectangles de 60 pixels de haut, la largeur dépendra du contenu. Nous intégrons et centrons les composants de l'icône et de btn-txt sur tous les axes. Nous imposons le composant compteur à l'icône de sorte que son coin inférieur gauche coïncide avec le centre de l'icône. Les boutons seront disposés les uns après les autres, nous ajoutons donc de chaque côté une bande grise de 2 pixels pour une séparation visuelle. Inutile puis éteignez en place. Dans ce cas, dans le composant d'aperçu du lot.
Nous reviendrons sur ce niveau de composants, mais pour l'instant, continuons.
Chapeau
Accédez à la nouvelle colonne et commencez à collecter l'en-tête.
Nous prenons comme base la trame des mêmes soixante pixels de hauteur. En bas, ajoutez une ligne grise de 2 pixels. Prenez la largeur de 1440 px, car nous collecterons tous les modèles de bureau avec cette autorisation. Nous suivons déjà le schéma standard: alignement avec le centre de l'indentation verticale, horizontale de 20 pixels, logo, onglets de menu, recherche (il a été assemblé par analogie avec l'entrée dans la deuxième colonne).
Le côté droit de l'en-tête doit contenir un panneau d'informations avec les informations du compte actuel, et même avec une liste déroulante. Nous revenons à la colonne précédente et collectons ce bien à partir des icônes et du texte (vous savez déjà comment).
Pour consulter une liste déroulante sur n'importe quel modèle, nous attachons deux composants à la fois (liste déroulante ouverte et fermée). L'un est désactivé en poussant dans l'œil sur le panneau des calques. N'oubliez pas de décocher le contenu du clip dans le panneau BACKGROUND.
Ensuite, nous simplifions l'en-tête pour les écrans plus petits en recadrant l'inutile. Nous agissons de manière éprouvée. Nous clonons, détachons, supprimons l'inutile, ajoutons l'icône du burger, renommez-le, transformez-le en composant.
Pour 320 pixels, on peut légèrement déplacer l'indentation entre les icônes.
Il est maintenant temps de régler le caoutchouc. Pour ce faire, sélectionnez notre composant «En-tête-bureau» et accédez à LAYOUT GRID. Passez aux haut-parleurs. Le nombre de colonnes dans ce cas n'a pas d'importance, l'essentiel est que la grille soit (pour différentes tâches, essayez différentes grilles) des marges de 20 pixels. Ensuite, nous configurons le comportement des composants imbriqués de l'en-tête.
Plus en détail sur les paramètres de l'élasticité des modèles, nous le dirons dans la deuxième partie de cet article.
Burger
Chaque fois lors de la conception de la navigation pour un hamburger, nous avons commencé à inventer des béquilles, mais pas dans ce cas. Il s'est avéré que nous avons tout ce dont nous avons besoin pour un hamburger, à l'exception du bouton de fermeture. Nous rassemblons les composants nécessaires dans un groupe et les transformons en un nouveau composant.
Aperçu du lot
Accédez aux fiches d'aperçu du catalogue. Tout d'abord, il est devenu évident que vous devez créer des composants séparés pour les boutons dans l'affichage mobile (les moyens de la figure ne vous permettent pas de centrer les icônes si vous masquez simplement le texte du bouton). Nous allons à la colonne avec des boutons carrés et terminons les états pour les écrans étroits. Ajoutez une grille à trois colonnes.
Pour les cartes elles-mêmes, nous créons d'abord le composant d'élément de campagne et les blocs avec des informations de base. Nous les regroupons afin qu'une simple reconstruction puisse aboutir à un affichage mobile.
À ce stade, afin de ne pas gonfler un article déjà immense, nous prenons une courte pause. Dans la deuxième partie, nous parlerons de la façon dont les composants ci-dessus sont regroupés et formons des modèles de page réactifs.
Nous sommes convaincus que cette approche n'est toujours pas idéale, nous serons donc heureux de tout commentaire sur le sujet (en particulier si vous savez comment utiliser la figure de manière plus productive) - toute votre expérience nous aidera à améliorer nos processus commerciaux. Ronde.