Fermer

octobre 21, 2021

Figma pour les développeurs3 minutes de lecture



Si vous pensiez que Figma était réservé aux designers, détrompez-vous ! Figma est un outil puissant, avec des tonnes de fonctionnalités intéressantes dont les développeurs peuvent également tirer parti. workflow lorsque vous commencez à transformer des wireframes et des maquettes en code. Même si vous n'êtes pas personnellement familier avec le processus, il n'est probablement pas surprenant d'entendre que c'est souvent un véritable problème. Cette douleur peut être atténuée, cependant, lorsque les deux parties comprennent ce que l'autre recherchera dans le processus de transfert.

Les concepteurs doivent avoir une compréhension assez approfondie du Web frontal : éléments HTML, boîte CSS le modèle, le fonctionnement du redimensionnement réactif, la structure basée sur les composants, etc. Et pourtant, lorsque nous renversons le script, les développeurs sont rarement censés comprendre les bases de la conception. créer de meilleurs produits lorsque les deux parties ont une compréhension approfondie des outils et priorités de l'autre. Sans parler de toutes les façons dont l'accès aux fichiers source de conception peut vous faciliter la tâche.

Dans cet esprit, j'aimerais présenter à mes amis développeurs Figmal'un des plus outils de conception d'interface utilisateur populaires et largement utilisés. C'est gratuit pour un usage individuel, je vous encourage donc à créer un compte et à commencer à jouer ! C'est la meilleure façon d'apprendre.

Comme tout logiciel spécialisé, un fichier Figma peut être un peu difficile à parcourir si vous ne le connaissez pas. Commençons donc par le haut et examinons les bases, ainsi que les fonctionnalités Figma qui seront les plus utiles pour les développeurs.

Organisation des fichiers Figma

Les fichiers Figma sont organisés par Pages ( think screens de votre application), qui contiennent chacune des Frames (sous-pages, souvent utilisées pour organiser des maquettes de Pages dans divers états d'interaction utilisateur). Chaque cadre est composé d'Éléments—formes, texte, vecteurs, etc. Les éléments (ou groupes d'éléments) peuvent être enregistrés en tant que Composants réutilisables. Les éléments sont personnalisés avec des Stylescomme des couleurs ou des polices. Les styles (ou groupes de styles) peuvent être enregistrés en tant que Design Tokens et organisés en Bibliothèques partageables pour une réutilisation facile.

Présentation de Figma

S'orienter

Lorsque vous ouvrez pour la première fois un fichier Figma, voici ce que vous verrez :

  • Le panneau central affiche le contenu actuel de la page. Cliquer sur n'importe quel élément le sélectionnera, dans les barres latérales gauche et droite.
  • La barre latérale gauche est l'endroit où vous trouverez la structure du document, organisée en une vue imbriquée et en couches. la barre latérale droite comporte trois sections principales : ConceptionPrototype et Inspecter.
    • Design permet au concepteur d'ajuster les styles sur chaque élément. Le contenu de cet onglet changera en fonction de l'élément sélectionné (couleurs, bordures, etc. pour les formes, choix de police, tailles, etc. pour le texte).
    • Le prototype permet au concepteur d'accrocher tous les cadres ensemble. dans un prototype cliquable.
    • Inspect résume le contenu sélectionné dans les propriétés CSS et le code.

Pourquoi les développeurs devraient-ils Souci ? L'outil Prototype est un excellent moyen de tester les utilisateurs et de valider des idées avant que les développeurs n'écrivent une seule ligne de code. Cela permet non seulement aux développeurs de gagner du temps en permettant aux concepteurs d'apporter des ajustements à l'interface utilisateur avant la phase de développement (et qu'est-ce qui ne pas aimer ça ?), mais les tests utilisateurs à ce stade offrent également aux développeurs la possibilité de s'asseoir avec un concepteur et un utilisateur avant de commencer à créer.

Quand les développeurs peuvent voir les motivations et la douleur des utilisateurs. points se produisant en temps réel et être impliqué dans les conversations des utilisateurs au début du processus, cela en fait un produit beaucoup plus intuitif et cohérent. Cela aide à faire passer le cycle de développement de réactif ("Nous devons corriger ce problème pour lequel nous avons eu beaucoup de commentaires négatifs") à proactif ("Nous avons vu pendant les tests que les utilisateurs avaient du mal avec cette tâche, accordons donc une attention particulière à sa rationalisation »). Sans oublier que le simple fait de pouvoir explorer le prototype quand vous le souhaitez signifie que vous n'aurez jamais à vous demander : « Attendez, qu'est-ce qui est censé se passer lorsqu'ils cliquent sur ce bouton ? »

Si vous voulez regarder de plus près les détails de une maquette, vous pouvez activer les Grids avec Ctrl+G, qui vous aideront à avoir une idée de l'espacement et de la structure de ce que vous construisez. Vous pouvez également activer Règles avec Maj+R, et afficher les valeurs d'espacement entre les éléments en sélectionnant l'élément et en maintenant la touche Option enfoncée pendant que vous survolez les éléments qui l'entourent.

Exportation d'actifs

Très bien, vous avez donc exploré le fichier et vous sentez que vous avez une solide compréhension de ce qui doit être construit et pourquoi. Il est temps de commencer à écrire du code. Bonne nouvelle : Figma facilite également cette tâche !

Pour définir vos styles de haut niveau, vous aurez besoin du contenu des bibliothèques : ces jetons de conception sont les valeurs CSS récurrentes que vous voudrez transformer en variables et/ou attribuer aux propriétés dans votre feuille de style globale. Si vous sélectionnez la page de niveau le plus élevé dans la barre latérale de gauche, les jetons de conception apparaîtront dans la barre latérale de droite. Vous pouvez cliquer sur l'icône des boutons de chacun pour l'inspecter et voir tous les détails dont vous aurez besoin pour le recréer dans vos fichiers CSS.

Malheureusement, il n'existe aucun moyen natif dans Figma pour vous d'exporter ces bibliothèques … heureusement, Unite UX en fait un jeu d'enfant ! Si vous téléchargez le plugin Figmavous pouvez exporter toutes les données du fichier Figma dans Unite UX, puis exporter à nouveau depuis Unite UX. Ce package d'exportation Unite UX comprendra une tonne de fichiers SASS utiles (dont _tokens.scss) que vous pouvez ajouter directement à votre projet. Boum, terminé.

Pourquoi les développeurs devraient-ils s'en soucier ? Plus besoin de copier-coller de styles ! Plus besoin d'essayer de trouver des noms de variables uniques, seulement pour découvrir que l'équipe de conception appelle la même chose quelque chose de complètement différent ! Plus besoin d'essayer de faire correspondre les valeurs de remplissage simplement en regardant dans les deux sens entre certains PDF exportés et votre navigateur jusqu'à ce qu'ils commencent à se ressembler ! Ouf, je suis épuisé d'écrire tout ça.

Une fois que vous aurez dépassé les styles de haut niveau et que vous serez entré dans le vif du sujet, c'est là que l'outil Inspecter dans la barre latérale droite de Figma sera votre nouveau meilleur ami. Tout comme l'outil d'inspection de tous les principaux navigateurs, Inspect vous permet d'explorer un seul élément et d'obtenir tous les détails, formatés de manière utile dans les propriétés CSS. Vous pouvez obtenir ces informations soit sous forme de liste de propriétés, soit sous forme de code généré automatiquement, les deux ayant des options de copie rapide.

Pourquoi les développeurs devraient-ils s'en soucier ? L'outil Inspect est l'endroit où Figma brille vraiment pour les développeurs, en résumant les styles dans des propriétés CSS et même des extraits de code ! Comme toujours, il n'est pas sage de copier et coller aveuglément le code généré par la machine, mais c'est très utile comme point de départ pour peaufiner et ajuster. ]) en essayant de faire correspondre les valeurs à l'œil.

Enfin, s'il y a des images ou des icônes personnalisées dans la maquette, vous voudrez également les exporter. Idéalement, vos concepteurs auront marqué les ressources dont vous avez besoin comme Exportable—si tel est le cas, vous pouvez sélectionner la page ou la fram e à partir duquel vous souhaitez exporter des éléments, ouvrez le Panneau d'exportation avec Cmd+Maj+E (Ctrl+Maj+E), et exportez tout ce qu'ils ont marqué à partir d'un seul endroit . Sinon, vous devrez exporter les actifs un par un. Sélectionnez ce que vous souhaitez exporter et faites défiler vers le bas dans la barre latérale droite jusqu'à ce que la section Export s'affiche. Là, vous pouvez personnaliser votre taille et le type de fichier d'exportation (PNG, SVG, JPG ou PDF), et cliquer sur le bouton Exporter juste en dessous.

Combien de fois avez-vous dû mettre un projet en attente pour que les concepteurs DM (qui sont probablement occupés à autre chose) et leur demander de vous envoyer les ressources dont vous avez besoin ? Et puis quand vous obtenez enfin ces ressources, vous découvrez qu'elles n'ont pas une résolution assez élevée, ou il vous manque encore quelque chose, ou elles ont été exportées au format JPG au lieu de … eh bien, littéralement autre chose ? Oubliez les allers-retours et ayez l'assurance d'obtenir ce dont vous avez besoin, quand vous en avez besoin, directement à partir des fichiers source. point si les deux groupes sont prêts à se rencontrer à mi-chemin. rd combler cet écart, mais en fin de compte, même le meilleur outil n'est utile que si vous avez une compréhension contextuelle de ce que vous faites avec. Vous n'avez pas besoin d'avoir une compréhension approfondie des concepts de conception pour vous familiariser avec Figma. Lorsque les développeurs sont habilités à explorer et à travailler avec les fichiers source de conception réels, tout le monde y gagne !




Source link

0 Partages