L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Tout ce que les développeurs doivent savoir sur Figma
Si vous ne l'utilisez pas encore, le nom Figma est sûrement un nom que vous avez entendu de plus en plus. au cours des dernières années.
Figma est un outil de conception relativement nouveau basé sur un navigateur. Cela signifie que vous n'avez pas besoin de l'installer localement ou d'acheter des licences coûteuses pour permettre aux membres de l'équipe d'accéder aux fichiers de conception. Cela a rendu la conception plus accessible que jamais et c'est pourquoi de nombreux développeurs doivent maintenant apprendre à travailler avec des outils de conception. les bases que les développeurs doivent connaître pour que vous puissiez naviguer en toute confiance dans Figma et extraire toutes les informations dont vous pourriez avoir besoin lorsque vous travaillez avec les conceptions qui vous sont envoyées par un concepteur.
Je couvrirai également certaines fonctionnalités spécifiques de Figma qui facilitent la tâche
Une note rapide sur les raccourcis
La plupart des raccourcis sont écrits pour Windows et Mac, où la touche Ctrl sous Windows correspond au Cmd sur le Mac, et Alt est utilisé à la fois pour Alt (Windows) et Option / Alt (Mac).
Par exemple, Ctrl / Cmd + Alt + C vaut Ctrl + Alt + C sous Windows et Cmd + Alt / Option + C sur Mac.
Developer Handoff
Pour comprendre le battage médiatique autour de Figma et pourquoi vous vous trouvez soudainement ayant besoin d'apprendre comment fonctionnent les outils de conception en tant que développeur, il est utile de revenir sur le processus de transfert des développeurs avant Figma car il a considérablement changé.
Les équipes de conception envoyaient un e-mail à l'équipe de développement avec des dizaines de pièces jointes contenant des images statiques de la conception, des éléments exportés et même des documents Word avec la copie de page. Les développeurs n'avaient généralement pas accès aux fichiers de conception complets car les licences pour les logiciels de conception étaient coûteuses et n'étaient pas strictement nécessaires. La communication et les commentaires ont été dispersés dans les courriels, les outils de gestion de projet et les notes de réunion. Tout le monde avait du mal à suivre les modifications apportées à la conception; chaque fois que la conception était mise à jour, elle devait être envoyée à toutes les personnes impliquées – encore une fois. Les concepteurs utilisent souvent des outils distincts tels que Zeplin ou Invision pour transmettre les conceptions aux développeurs. Les développeurs avaient désormais un meilleur accès aux conceptions et disposaient de plus d'outils pour extraire des informations sur la typographie, les couleurs et les mesures. Bien qu'il soit plus facile de trouver la dernière version d'un design pour tout le monde, les concepteurs devaient travailler dans des outils séparés et les garder synchronisés. Une grande amélioration mais toujours pas parfaite.
Figma est un outil de conception qui gagne rapidement en popularité et bouleverse à nouveau le processus de transfert de conception. Figma est basé sur un navigateur afin que chacun puisse l'utiliser quel que soit son système d'exploitation et sans rien installer. Il est également entièrement basé sur le cloud afin que tout le monde regarde toujours la dernière version de la conception et dispose d'outils de collaboration intégrés qui facilitent la collaboration et la communication plus que jamais.
Si vous voulez suivre cet article (ou simplement jouer avec Figma), je vais utiliser ce fichier pour tout expliquer dans ce tutoriel:
Les bases
Lorsque vous êtes ajouté en tant que collaborateur sur un dessin Figma, vous pouvez choisir de l'ouvrir dans le navigateur ou vous pouvez téléchargez l'application de bureau (disponible sur Windows et macOS). L'application de bureau n'est pas une application native mais une application électronique multiplateforme comme Slack et Visual Studio Code. La fonctionnalité des versions de navigateur et de bureau est en grande partie la même. L'application de bureau prend en charge l'utilisation des polices locales, tandis que la version du navigateur nécessite l'installation de Figma Font Helper avant de pouvoir utiliser les polices locales.
L'interface de Figma est divisée en trois parties principales. Au milieu, vous trouverez une grande toile où se trouvent tous les motifs. Sur le côté gauche, il y a une barre latérale qui contient les couches, les ressources et les pages d'un fichier. La barre d'outils de droite contient toutes les informations sur les éléments du fichier.
Un fichier peut avoir plusieurs pages et chaque page a un canevas. Les concepteurs utilisent souvent des pages pour séparer et organiser différentes parties du fichier avec des pages distinctes pour le système de conception, des icônes ou d'autres éléments de fichier.
Lors de la première ouverture d'un nouveau fichier, assurez-vous de vous familiariser avec les différents pages dans le fichier. Si le concepteur avec lequel vous travaillez a créé une page distincte pour toutes les couleurs, la typographie et les icônes, cela peut vous faire gagner du temps lors de l'élaboration du dessin.
Naviguer dans Figma
Avant d'en arriver aux bonnes choses, il est important que vous puissiez naviguer rapidement dans Figma afin de travailler plus efficacement.
Lorsque vous ouvrez un vous commencerez avec le plus grand niveau de zoom qui correspond à tous les cadres de la zone visible.
- Vous pouvez effectuer un zoom avant ou arrière en maintenant Cmd ⌘ et en faisant défiler vers le haut / bas ou en appuyant sur ] + et - touches.
- Si vous voulez faire défiler horizontalement le canevas, maintenez la barre d'espace et faites glisser avec votre souris.
- Vous pouvez zoomer rapidement sur une seule image ou élément en le sélectionnant et en appuyant sur Shift + 2 .
- Revenez rapidement à l'emplacement de tous les éléments dans la toile en appuyant sur Shift + 1 .
Ne vous inquiétez pas trop de vous souvenir de ces raccourcis pour le moment, sachez simplement qu'ils sont disponibles et vous pouvez toujours les voir et d'autres raccourcis disponibles en appuyant sur Cmd + Shift + ? .
Styles de projet
Lorsque vous ouvrez un tout nouveau projet, il est utile de configurer tous les éléments de base les styles d'abord. Figma affiche tous les styles de projet dans la barre latérale droite. Ici vous pouvez facilement trouver toutes les typographies, couleurs, grilles et autres styles utilisés dans la conception.
Notez que les styles du projet ne s'afficheront que si aucun élément n'est sélectionné . Si vous souhaitez annuler votre sélection et afficher les styles du projet, cliquez simplement quelque part dans le canevas ou utilisez la touche Echap .
Vous pouvez utiliser ces informations pour configurer votre mise en page, vos variables et vos polices dans CSS. Cliquez simplement sur l'icône d'édition à côté de l'élément de style pour afficher toutes les informations sur ce style.
Sélectionner des éléments
Une fois que vous avez défini les bases de votre projet, il est temps de plongez dans le design. La chose la plus importante dans la déconstruction d'un dessin est de sélectionner des éléments et d'obtenir des informations sur les dimensions et les styles à partir de celui-ci.
La sélection d'un calque n'est pas aussi simple que de cliquer sur un élément car la plupart des conceptions ont plusieurs niveaux d'imbrication pour les éléments. Cliquer sur un élément sélectionne uniquement l'élément de niveau supérieur.
Pour sélectionner un calque spécifique, vous devez maintenir la commande ⌘ tout en cliquant ou vous pouvez cliquer avec le bouton droit sur un élément pour ouvrir un menu de tous les calques imbriqués et sélectionnez le bon.
Si vous double-cliquez sur un élément, il sélectionnera un niveau d'imbrication plus bas chaque fois que vous double-cliquez . C'est un excellent moyen d'explorer un élément jusqu'à ce que vous obteniez la sélection souhaitée.
Il existe de nombreuses autres façons de sélectionner et de parcourir les calques, cet article ne couvre que les bases utilisées 80% du temps . La documentation de Figma enseigne plus de façons de sélectionner et de parcourir les calques .
Une fois que vous avez sélectionné un élément, vous pouvez cliquer sur l'onglet Code dans la barre latérale droite pour afficher tout le CSS informations sur cet élément.
Il est important de noter que le CSS est généré automatiquement et n'est pas parfait, en particulier pour le positionnement éléments. Ne copiez pas tous les CSS 1-to-1 dans votre projet, mais utilisez-les plutôt comme un guide et un moyen rapide d'obtenir des informations sur les éléments.
Dimensions et mesures
Chaque fois que vous souhaitez mesurer les espaces entre les éléments, correctement positionner les éléments, ou même définir la marge ou le remplissage de droite, tout ce que vous avez à faire est de sélectionner l'élément à partir duquel vous souhaitez mesurer, puis maintenez la touche Alt et passez votre souris sur l'élément que vous souhaitez
Figma marquera la distance entre les éléments avec une ligne rouge et montrera la distance en pixels. Si vous souhaitez mesurer la distance à un élément enfant spécifique dans un autre groupe ou cadre, vous pouvez maintenir la touche Cmd ⌘ comme vous le feriez lors de la sélection d'un élément pour le sélectionner en profondeur.
Exportation d'actifs [19659003] Dans le passé, les concepteurs étaient souvent responsables de l'exportation de tous les actifs car la plupart des développeurs n'avaient pas de logiciel de conception installé sur leur système. Dans Figma, vous avez désormais un accès complet aux conceptions et pouvez tout exporter vous-même. Préparation à l'exportation
La première chose à faire si vous souhaitez exporter un élément est de le marquer comme exportable. Pour ce faire, sélectionnez l'élément que vous souhaitez exporter et cliquez sur l'icône plus dans la barre latérale droite à côté de l'en-tête Exporter .
En fonction du type de fichier que vous exportez, vous pouvez modifier différents paramètres d'exportation. Les images n'ont qu'un multiplicateur d'échelle et vous pouvez choisir le type de fichier (PNG, JPG, SVG ou PDF). Figma utilisera le nom de la couche comme nom de fichier mais vous pouvez ajouter un suffixe de nom de fichier. Vous pouvez ensuite exporter l'élément sélectionné à l'aide du bouton d'exportation.
Conseil rapide: Vous pouvez également exporter rapidement un élément en cliquant dessus avec le bouton droit de la souris, en passant la souris sur Copier / coller et en copiant l'image ou le code SVG. Ceci est utile si vous n'avez pas besoin de paramètres d'exportation personnalisés et que vous avez simplement besoin d'une copie rapide d'un seul élément.
Exporter tous les actifs
Vous pouvez exporter chaque actif individuellement en le sélectionnant et en cliquant sur le bouton d'exportation, mais vous peut également exporter tous les éléments qui sont exportables en même temps.
Si vous souhaitez exporter tous les éléments de la conception en une seule fois, vous pouvez accéder au menu principal et cliquer sur Exporter. dans le menu Fichier. Vous pouvez également utiliser le raccourci clavier Shift + Cmd + E sur MacOS ou Shift + Ctrl + E sous Windows.
Ceci affichera une liste de tous les éléments du fichier marqués pour exportation. Vous pouvez ensuite inspecter les dimensions, le type de fichier et exclure tous les fichiers avant de faire l'exportation finale. Si vous survolez la vignette des éléments, le nom de fichier que l'élément aura lors de son exportation s'affichera.
Si vous avez besoin de faire des ajustements, cliquez sur la vignette d'un élément pour sélectionner cet élément dans le canevas où vous peut facilement ajuster les paramètres d'exportation.
Si vous avez beaucoup d'éléments exportables dans un seul fichier, vous pouvez utiliser une barre oblique " / "Dans le nom de votre calque pour le marquer comme groupe d'éléments. Figma créera alors automatiquement un dossier pour ce groupe et exportera les actifs de ce groupe vers le sous-dossier.
Flux utilisateur et animations
Figma prend également en charge une variété d'animations pour la transition entre les états ou les pages , pour ouvrir des modaux ou des menus, pour faire glisser et faire glisser des actions sur mobile et bien plus encore. Vous pouvez prévisualiser ces animations en cliquant sur l'icône de lecture en haut à droite pour ouvrir la vue Présentation.
Pour afficher les informations sur une animation, sélectionnez l'onglet Prototype dans la barre latérale droite et vous verrez le flux utilisateur affiché dans les flèches bleues dans le canevas.
Cliquez sur la flèche pour afficher toutes les informations sur cette animation spécifique. Chaque animation se compose d'un déclencheur, d'une action et d'une transition.
Cette simple animation ouvre un menu de hamburgers. Vous pouvez voir que l'icône de hamburger a un déclencheur On Tap une fois qu'il est déclenché, il Naviguer vers l'écran où le menu mobile est dans un état ouvert. Le type de transition est une transition Smart Animate ce qui signifie que Figma interpole automatiquement entre ces deux états. Il le fait en utilisant une fonction d'animation Ease Out d'une durée de 300ms .
Ces informations sont nécessaires pour reproduire exactement les animations en CSS mais contrairement à toutes les autres informations sur les éléments, les animations peuvent ne se trouve pas dans l'onglet Code!
Communication
Si quelque chose n'est pas clair et que vous souhaitez demander des éclaircissements à quelqu'un d'autre sur le projet. Tout ce que vous avez à faire est de cliquer sur l'icône de la bulle de discussion dans la barre d'outils supérieure ou d'appuyer sur la touche C pour passer à l'outil de commentaire.
Vous pouvez maintenant cliquer n'importe où dans le dessin et commencer à taper un commentaire ou une question sur cet élément. Une fois que vous avez terminé de rédiger votre commentaire, vous pouvez utiliser la touche V pour revenir au curseur normal.
Notez que tout le monde ne recevra pas automatiquement une notification indiquant que vous avez laissé un commentaire. Si vous voulez être sûr que quelqu'un voit votre commentaire, vous devez le mentionner en utilisant le symbole @ comme sur Slack ou Twitter.
Chaque commentaire est visible par tous ceux qui ont accès au design car il n'y a pas de commentaires / chats privés. Une fois le problème résolu, il peut être marqué comme tel et le commentaire sera grisé.
Conclusion
Nous avons couvert beaucoup de terrain jusqu'à présent dans Figma et vous devriez pouvoir naviguer et extraire tous les les informations dont vous avez besoin à partir de n'importe quel fichier de conception Figma envoyé. Obtenir des informations sur la typographie et les couleurs, mesurer les marges, le remplissage et la position des éléments, exporter des éléments et collaborer avec d'autres membres de l'équipe.
Si vous voulez en savoir plus sur l'outil, la documentation de Figma est un endroit idéal pour démarrer ou effectuer une recherche lorsque vous souhaitez en savoir plus sur une fonctionnalité spécifique.
(ra, yk, il) Source link