Comment installer et utiliser Avocode sur PC ?

Que propose Avocode ?

Avocode permet de faciliter la collaboration entre designers et développeurs en offrant une plateforme centralisée pour l'inspection et le partage de fichiers de conception. Il permet d'extraire des éléments graphiques, des styles et des mesures précises à partir de designs créés dans des logiciels tels que Sketch, Photoshop, Adobe XD et Figma. Cela simplifie le processus de développement en fournissant aux développeurs les informations nécessaires pour recréer fidèlement les maquettes graphiques.

Comment le télécharger ?

Rendez-vous sur la page dédiée à Avocode sur la logithèque

Comment l'installer et l'utiliser ?

Avocode est un outil conçu pour rationaliser le flux de travail entre les concepteurs et les développeurs, en offrant une plateforme pour l'inspection et le partage de fichiers de conception. Bien qu'il ne soit plus disponible pour de nouvelles utilisations, comprendre son fonctionnement peut être instructif.

Installation :

1. Lancer l'installateur : Double-cliquez sur le fichier d'installation que vous avez téléchargé.
2. Suivre les instructions : Une fenêtre d'installation apparaîtra. Suivez les instructions à l'écran pour terminer le processus. Cela peut impliquer d'accepter les termes de la licence, de choisir un répertoire d'installation et de cliquer sur "Installer".
3. Lancement de l'application : Une fois l'installation terminée, vous pouvez lancer Avocode depuis votre menu Démarrer ou via un raccourci sur votre bureau, s'il en a été créé un.

Utilisation de l'interface utilisateur :

L'interface d'Avocode est généralement divisée en plusieurs sections principales pour faciliter la navigation et l'accès aux fonctionnalités.

• Panneau de gauche (Outils) : Ce panneau contient les outils principaux pour interagir avec vos designs.

  • Outil de sélection (touche V) : Permet de sélectionner des calques individuels ou multiples.
  • Outil de mesure (touche R) : Utile pour mesurer les distances et les espacements entre les éléments. Sélectionnez un élément, puis survolez un autre pour voir la distance qui les sépare.
  • Outil Pipette (touche C) : Permet de sélectionner des couleurs à partir de n'importe quel pixel du design. Les codes couleur sont copiés dans le presse-papiers.
  • Outil Main (touche H) : Permet de déplacer le canevas pour naviguer dans le design. Vous pouvez aussi maintenir la barre d'espace enfoncée pour activer temporairement cet outil.
  • Outil Slice : Permet de créer des découpes spécifiques dans le design pour exporter des éléments.

• Zone centrale (Zone de travail) : C'est ici que vos designs s'affichent. Vous pouvez y zoomer, vous déplacer et inspecter les éléments.

• Panneau de droite (Inspecteur) : Ce panneau contextuel affiche des informations détaillées sur l'élément sélectionné.

  • Informations sur l'image/texte : Si vous sélectionnez une image, vous verrez son aperçu et ses dimensions. Pour un calque de texte, vous pourrez copier le texte directement.
  • Code : Avocode génère automatiquement du code (CSS, Sass, Less, Stylus, Styled-components pour React, etc.) basé sur les styles de l'élément sélectionné. Vous pouvez copier des valeurs individuelles, des lignes entières ou le snippet de code complet. Les paramètres de langue et de personnalisation du code sont accessibles via une roue crantée.
  • Styles : Permet de visualiser les styles appliqués aux calques.
  • Variables : Vous pouvez créer des variables pour des valeurs réutilisées (couleurs, polices, dimensions), ce qui facilite la maintenance du code.

• Barre supérieure : Contient généralement des options pour gérer les projets, naviguer entre les artboards, afficher les guides (touche Cmd+R) et accéder aux paramètres.

Utilisation des fonctionnalités principales :

• Inspection des designs : Ouvrez un projet et sélectionnez des éléments pour voir leurs propriétés, leurs dimensions, leurs couleurs, leurs polices et le code CSS généré.
• Exportation d'actifs : Vous pouvez exporter des images (PNG, JPG, SVG) en sélectionnant l'élément souhaité et en utilisant la fonction d'exportation. Pour les textes, vous pouvez copier le contenu directement.
• Commentaires et annotations : Avocode permet aux équipes de laisser des commentaires directement sur les designs, facilitant ainsi le processus de révision et de feedback. Vous pouvez sélectionner une zone spécifique du design et ajouter une annotation.
• Gestion des versions : Le logiciel offre une gestion des versions des fichiers de conception, permettant de suivre les modifications et de revenir à des versions antérieures si nécessaire.
• Collaboration en temps réel : Permet à plusieurs membres de l'équipe de visualiser et d'interagir avec les mêmes fichiers de conception simultanément.

Configuration :

• Paramètres de projet : Vous pouvez organiser vos designs en projets et définir des chemins d'exportation par défaut pour les actifs dans les paramètres de l'application de bureau.
• Paramètres de code : Dans le panneau de code, vous pouvez choisir le langage de programmation préféré pour la génération de code et personnaliser sa sortie.
• Intégrations : Avocode proposait des plugins pour des logiciels de conception comme Sketch, Photoshop et Adobe XD, ainsi que des intégrations avec des outils comme Slack, Jira et Trello pour une meilleure synchronisation du flux de travail.

Télécharger Avocode gratuitement