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 + ? .
Source link