Fermer

octobre 21, 2021

Figma pour les développeurs


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.

Exemple de fonctionnalité de prototype dans Figma" title="Example de fonctionnalité de prototype dans Figma"/>  <blockquote> <p><strong>Pourquoi les développeurs devraient-ils Souci ?</strong> 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 <em> offrent également</em> aux développeurs la possibilité de s'asseoir avec un concepteur et un utilisateur avant de commencer à créer. </p> <p> Quand les développeurs peuvent voir les motivations et la douleur des utilisateurs. points se produisant en temps réel <em>et</em> ê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 <strong>réactif</strong> ("Nous devons corriger ce problème pour lequel nous avons eu beaucoup de commentaires négatifs") à <strong>proactif</strong> ("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 ? »</p> </blockquote> <p> Si vous voulez regarder de plus près les détails de une maquette, vous pouvez activer les <strong>Grids</strong> avec <strong>Ctrl+G,</strong> qui vous aideront à avoir une idée de l'espacement et de la structure de ce que vous construisez. Vous pouvez également activer <strong>Règles</strong> avec <strong>Maj+R,</strong> et afficher <strong>les valeurs d'espacement entre les éléments</strong> en sélectionnant l'élément et <strong>en maintenant la touche Option enfoncée pendant que vous survolez</strong> les éléments qui l'entourent.</p> <h2>Exportation d'actifs</h2> <p>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 !</p> <p> 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.</p> <p><img decoding=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é.

Dossier contenant le fichier tokens.scss" title="Dossier contenant le fichier tokens.scss"/> <br /><img decoding=

Le meilleur outil 2023 pour ta croissance Instagram !



Source link