Accès
- Accédez au lien partagé : Vous pouvez accéder au fichier Figma du projet ici.
- Se connecter : Si vous n’êtes pas déjà connecté, Figma vous invitera à le faire. Les fonctionnalités clés ne sont disponibles que pour les utilisateurs connectés, telles que le mode développeur et la possibilité de sélectionner un cadre dédié.
Vous ne pourrez pas collaborer efficacement sans compte.
Structure de Figma
Sur la barre latérale gauche, vous pouvez accéder aux différentes pages du Figma de Twenty. Voici comment elles sont organisées :- Page des composants : C’est la première page. Le designer l’utilise pour créer et organiser les éléments de design réutilisables utilisés dans tout le fichier design. Par exemple, boutons, icônes, symboles ou tout autre composant réutilisable. Elle sert à maintenir la cohérence dans le design.
- Page principale : La deuxième page est la page principale, qui montre l’interface utilisateur complète du projet. Vous pouvez appuyer sur Play pour utiliser le prototype complet de l’application.
- Pages des fonctionnalités : Les autres pages sont généralement dédiées aux fonctionnalités en cours de développement. Elles contiennent le design de fonctionnalités ou modules spécifiques de l’application ou du site web. Elles sont généralement encore en cours de développement.
Conseils utiles
Avec un accès en lecture seule, vous ne pouvez pas modifier le design, mais vous pouvez accéder à toutes les fonctionnalités utiles pour convertir les designs en code.Utiliser le mode dev
Le Mode Dev de Figma améliore la productivité des développeurs en fournissant une navigation simple dans le design, une gestion efficace des ressources, des outils de communication performants, des intégrations de boîte à outils, des extraits de code rapides et des informations clés sur les calques, comblant ainsi le fossé entre design et développement. Vous pouvez en savoir plus sur le mode Dev ici. Basculez vers le mode « Développeur » dans la partie droite de la barre d’outils pour voir les spécifications du design, copier du CSS et accéder aux ressources.Utilisez le Prototype
Cliquez sur n’importe quel élément du canvas et appuyez sur le bouton « Play » en haut à droite de l’interface pour accéder à la vue du prototype. Le mode Prototype vous permet d’interagir avec le design comme s’il s’agissait du produit final. Il montre le flux entre les écrans et comment les éléments de l’interface tels que les boutons, les liens ou les menus se comportent lorsqu’ils sont interactifs.- Comprendre les transitions et animations : En mode Prototype, vous pouvez voir toutes les transitions ou animations ajoutées par un designer entre écrans ou éléments UI, fournissant des instructions visuelles claires aux développeurs sur le comportement et le style attendus.
- Clarification de l’implémentation : Un prototype peut aussi aider à réduire les ambiguïtés. Les développeurs peuvent interagir avec lui pour mieux comprendre la fonctionnalité ou l’apparence de certains éléments.
Mesurer les distances
Sélectionnez un élément, maintenez la toucheOption (Mac) ou Alt (Windows), puis survolez un autre élément pour voir la distance entre eux.
Extension Figma pour VSCode (Recommandée)
Figma pour VS Code vous permet de naviguer et d’inspecter les fichiers design, de collaborer avec les designers, de suivre les changements et d’accélérer la mise en œuvre - le tout sans quitter votre éditeur de texte. Cela fait partie de nos extensions recommandées.Collaboration
- Utilisation des commentaires : N’hésitez pas à utiliser la fonction commentaire en cliquant sur l’icône de bulle dans la partie gauche de la barre d’outils.
- Conversation par curseur : Une fonctionnalité intéressante de Figma est la conversation par curseur. Il suffit d’appuyer sur
;sur Mac et/sur Windows pour envoyer un message si vous voyez quelqu’un d’autre utiliser Figma en même temps que vous.