Autoname

Qu’est-ce que Autoname ?

Autoname est un plugin d’IA pour la nomination des calques destiné aux designers Figma, développé par Hugo Duprez. Il peut identifier le contenu du design sélectionné et générer des noms plus faciles à comprendre pour les calques et leurs sous-calques.

Cet outil se concentre sur la nomination des calques et ne est pas conçu pour générer une interface complète ou restructurer un système de design. Le plugin est disponible gratuitement, et le code client est publié sous licence MIT.

Fonctions principales d’Autoname

• Nommer d’un clic : effectue une reconnaissance automatique et un renomage des calques sélectionnés dans Figma.
• Traitement récursif : continuer à traiter les sous-calques qu’il contient dans la plage sélectionnée.
• Protection des composants : Détection des composants et des instances pour éviter toute modification arbitraire des noms des objets réutilisés essentiels.
• Classification par IA : utilisation de modèles de classification d’images pour identifier des éléments d’interface courants tels que des boutons, des images et des blocs de texte.
• Modèles personnalisés : permet de changer l’adresse du modèle et d’importer ses propres modèles Teachable Machine.
• Mode de débogage : affiche les images soumises au modèle et affiche les informations de prédiction dans la console de Figma.
• Client open source : les développeurs peuvent consulter la mise en œuvre des plugins, construire des projets ou modifier le code conformément à la licence.

Quels types de calques peuvent être traités

• Les couches d’interface dont le nom reste les valeurs par défaut telles que Frame, Group ou Rectangle.
• Objets sans nom sémantique, copiés à partir de modèles, de maquettes ou de fichiers externes.
• Pages ou maquettes de composants contenant de nombreuses structures imbriquées, nécessitant d’abord une organisation de base.
• Maquettes de conception pour mobile et web visant à améliorer la lisibilité des calques avant la livraison du développement.
• Il est nécessaire d’utiliser un modèle de classification unifié pour identifier les fichiers de conception des éléments d’interface courants des équipes.

Mécanismes de protection des composants et des instances

Autoname détecte les composants et les instances, en s’efforçant de ne pas renommer ces objets ayant une relation de réutilisation. Ce mécanisme permet de réduire le risque que des opérations automatiques perturbent la nomenclature de la bibliothèque de composants et la correspondance des instances.

Les mécanismes de protection ne signifient pas qu’une opération est absolument sans risque. Il convient de vérifier la plage de sélection avant l’exécution, ainsi que les noms des composants, des variantes et des calques spéciaux après exécution.

Comment fonctionne la nomination par l’IA

1. L’utilisateur sélectionne dans la toile de Figma les calques ou les cadres extérieurs à organiser.
2. L’extension organise le contenu visuel cible en entrées d’image que le modèle peut reconnaître.
3. Le modèle de classification prédit la catégorie de l’élément d’interface le plus proche de la couche.
4. Le plugin écrit les résultats de prédiction dans le nom du layer correspondant, puis continue à traiter les sous-layers qui permettent des modifications.
5. L’utilisateur revérifie les résultats, puis ajuste manuellement les noms propres à l’entreprise ou corrige les erreurs d’identification.

Tutoriel d’installation d’Autoname

1. Connectez-vous à Figma et accédez à la page des plugins de la communauté.
2. Rechercher Figma Autoname publié par Hugo Duprez, et vérifier l’auteur ainsi que l’identifiant du plugin.
3. Cliquez pour ouvrir ou installer le plugin, et autorisez-le à fonctionner dans le fichier de conception actuel.
4. Retournez au dessin de conception et lancez Autoname depuis le menu des plugins.
5. Copiez d’abord la page de test pour valider les résultats de nommage sur une couche à petite échelle.

Tutoriel de nommage automatique en un clic

1. Sélectionnez un ou plusieurs calques à organiser, ou bien un cadre contenant une structure multicouche.
2. Ouvrez le plugin Autoname et vérifiez si la sélection actuelle contient des objets qui ne doivent pas être modifiés.
3. Exécuter la nomination automatique, en attendant que le chargement et la reconnaissance du modèle soient terminés.
4. Ouvrez le panneau des calques et vérifiez que les noms des calques parents et enfants correspondent à la sémantique du design.
5. Annulez les résultats erronés ou complétez manuellement le nom de l’opération de la page, puis enregistrez le fichier de conception.

Sélection de la plage et traitement des sous-calques

Les plugins fonctionnent autour du choix actuel et de ses sous-niveaux, de sorte que sélectionner le cadre de la page externe peut affecter un grand nombre d’objets en même temps. Lorsqu’une contrôle précis est nécessaire, il est possible de sélectionner d’abord une seule carte, une barre de navigation ou un module de contenu.

Pour les pages pour lesquelles une norme de nommage stricte a déjà été établie, il est recommandé d’effectuer les opérations par étapes. Le traitement par lots permet de détecter plus facilement les écarts de classification et facilite également l’utilisation de la fonction d’annulation de Figma pour revenir en arrière.

Importer un modèle d’IA personnalisé

Autoname permet de changer l’adresse du modèle et peut être utilisé avec Teachable Machine pour créer ses propres modèles de classification d’images. Les équipes peuvent entraîner des catégories plus en adéquation avec les composants internes, la terminologie des produits et les modèles de conception.

Étapes de configuration du modèle personnalisé

1. Organiser les catégories à identifier, telles que le bouton principal, les étiquettes, les profils, les cartes et les éléments de navigation.
2. Préparer suffisamment d’exemples d’captures d’écran d’interface, suffisamment variés pour chaque catégorie.
3. Entraîner un modèle de classification d’images dans Teachable Machine, et vérifier la précision à l’aide d’échantillons de test.
4. Exporter ou héberger des modèles compatibles, en enregistrant les adresses des modèles accessibles par le plugin.
5. Remplacer l’adresse du modèle dans Autoname et valider la sortie à l’aide d’un fichier de test indépendant.
6. Une fois le modèle stable, élargir son champ d’application et continuer à ajouter des exemples susceptibles de prêter confusion.

Comment utiliser le mode de débogage

Le mode de débogage affiche à l’intérieur du plugin les images du cadre envoyées au modèle, et enregistre les résultats de prédiction dans la console Figma. Il est adapté pour diagnostiquer les problèmes de discordance entre les plages de sélection, les catégories de modèles et les noms des résultats.

• Vérifier si l’image réellement reçue par le modèle est entièrement coupée.
• Observer les résultats de prédiction des différentes catégories et les éléments d’interface facilement confondables.
• Vérifier si l’adresse du modèle personnalisé peut être chargée correctement.
• Identifier les problèmes de modèles de localisation et les problèmes logiques de renommage des plugins.

Code open source et développement local

Le dépôt du client officiel est sous licence MIT, et le projet utilise des technologies telles que Svelte, TypeScript, Tailwind CSS, TensorFlow et Teachable Machine. L’open source concerne principalement le client de plugins ; cela ne signifie pas que la plateforme Figma ou tous les services de modèles font partie de ce projet.

Processus de base de construction locale

1. Obtenez le code du client officiel et lisez la licence ainsi que les instructions de développement dans le dépôt.
2. Installer les dépendances du projet, lancer ou compiler localement les ressources du plugin.
3. Importer le manifest dans le projet via la fonction d’extension de développement sur la version desktop de Figma.
4. Après avoir modifié le code, recompilez et, si nécessaire, redémarrez le plugin pour voir les changements.
5. Activez le mode débogage pour vérifier l’entrée d’image, les journaux de prédiction et les résultats nommés.
6. Avant de publier la version modifiée, vérifiez la licence MIT, les dépendances tierces et les règles de la plateforme Figma.

Stack technique et dépendances

Scénarios d'utilisation typiques

• Nettoyage du dessin : remplacement rapide de nombreux noms de calques par défaut pour améliorer la lisibilité du fichier.
• Développement et livraison : organiser la structure de la page avant la livraison pour aider les ingénieurs à localiser les éléments de conception.
• Organisation des modèles : attribution d’un nom sémantique initial aux modèles copiés ou importés.
• Règles d’équipe : Identifier les catégories de composants internes courants à l’aide de modèles personnalisés.
• Exercice pédagogique : Aider les débutants à comprendre l’organisation des calques et les principes de nommage de base.
• Apprentissage open source : étude de la manière dont les plugins Figma, les interfaces frontales et les modèles de classification d’images s’intègrent.

À qui s’adresse-t-il

• Les concepteurs de produits et les designers visuels qui doivent organiser fréquemment les calques de Figma.
• Équipes de conception qui gèrent de gros fichiers de pages et souhaitent réduire le travail de renommage répétitif.
• Préparer les maquettes pour les transmettre à l’équipe de produits composée d’ingénieurs front-end ou clients.
• Espérer les mainteneurs de systèmes de conception pour des modèles de classification d’interfaces dédiées à l’entraînement.
• Développeurs qui apprennent le développement de plugins pour Figma et les applications frontend avec TensorFlow.

Les avantages d’Autoname

• Un objectif unique et clair, adapté pour gérer la tâche fréquente et répétitive de nommer les calques.
• La prise en charge des calques sélectionnés et des sous-calques permet de réduire le temps nécessaire pour modifier manuellement chaque calque.
• Protéger activement les composants et les instances pour réduire la probabilité de détérioration des structures réutilisables.
• Il n’est pas nécessaire d’acheter un forfait d’extensions ; les particuliers et les équipes peuvent l’essayer gratuitement.
• Le code client est publié et est soumis à une licence MIT souple.
• Prend en charge des modèles personnalisés, adaptables au langage de conception de différents équipes.
• Fournit un mode de débogage pour permettre aux développeurs d’examiner les entrées du modèle et les résultats des prédictions.

Restrictions d'utilisation

• La classification par l’IA n’est pas toujours précise ; des boutons, des cartes et de petits objets ayant un aspect similaire peuvent être confondus.
• Les noms automatiques sont généralement des catégories génériques et ne peuvent pas comprendre la sémantique complète du produit, telle que l’état de la commande ou les modules métier.
• Le choix d’un cadre de grande taille affecte de nombreux sous-calques, et il est nécessaire de les vérifier manuellement zone par zone après exécution.
• Le plugin a besoin d’une connexion Internet pour télécharger les modèles ; en cas de connexion limitée, il ne pourra pas s’initialiser correctement.
• Les modèles personnalisés nécessitent la préparation d’échantillons, l’entraînement, l’hébergement et la maintenance ; ils ne fonctionnent pas de manière stable à long terme dès leur importation.
• Les dépôts open source couvrent principalement le côté client ; on ne doit pas en déduire que tous les modèles, services hébergés ou fonctionnalités Figma peuvent être privatisés.
• Le rythme des mises à jour officielles du projet peut varier ; il convient de vérifier l’état de la page communautaire et du dépôt de code avant l’installation.

Précautions concernant la vie privée et la sécurité

• Avant de lancer, vérifiez l’adresse du modèle utilisé ainsi que la portée des données auxquelles le plugin doit avoir accès.
• Lorsqu’il s’agit de produits non publiés, de données clients ou de conceptions confidentielles, une approbation interne de l’organisation doit d’abord être obtenue.
• Lors de l’utilisation de modèles tiers ou développés en interne, il est nécessaire d’évaluer les politiques de conservation des journaux et des données du prestataire du modèle.
• Ne vous fiez pas uniquement à la nomination automatique pour déterminer la signification fonctionnelle d’une couche ; une vérification par le designer reste indispensable pour les livrables importants.
• Il est recommandé de tester sur une copie et d’utiliser l’historique des versions de Figma pour conserver des points de restauration.

Méthodes pour améliorer la qualité de la nomination

1. Supprimez d’abord les calques inutiles, et organisez clairement les relations de composition évidentes.
2. Exécuter par lots en fonction des blocs de page, afin d’éviter de sélectionner tout le fichier complexe d’un coup.
3. Conserver les noms de normes existants pour les composants, les instances et les couches critiques métier.
4. Remplacer le nom de l’IA générale par la sémantique des pages et des états convenus par l’équipe.
5. Enregistrer les éléments qui entraînent des erreurs fréquentes pour ajouter des exemples ciblés aux modèles personnalisés.
6. Après la nomination automatique, effectuer une revue manuelle avant de livrer au développement ou d’archiver.

Prix et versions

Autoname indique officiellement que l’extension est entièrement gratuite, sans abonnements publics, points ou modèles de tarification par poste. Les coûts pouvant résulter de l’utilisation de Figma, du hébergement de modèles personnalisés ou du développement interne ne font pas partie des frais liés à l’extension Autoname.

Informations de base

Indice de recommandation

L’indice de recommandation global est de 4,2 sur 5. Il convient aux designers qui ont besoin de nettoyer rapidement les noms de calques par défaut de Figma, mais les résultats de l’IA nécessitent encore une intervention manuelle pour ajouter du sens métier et vérifier les erreurs de détection.

Questions fréquentes

Qu’est-ce que fait principalement Autoname ?

Il utilise un modèle de classification d’images pour générer automatiquement des noms pour les calques sélectionnés dans Figma et leurs sous-calques.

Autoname est-il gratuit ?

Gratuit, l’organisation ne propose pas officiellement de abonnements, de points ou de forfaits payants par siège.

Va-t-il renommer les composants et les instances ?

Les plugins détectent et protègent les composants et les instances, mais il est néanmoins recommandé de vérifier manuellement les objets réutilisés essentiels après leur exécution.

Est-il possible de traiter plusieurs calques en même temps ?

Oui, l’extension gérera le choix actuel et pourra continuer à vérifier les sous-calques qu’il contient.

Les résultats de nommage sont-ils toujours exacts ?

Ce n’est pas obligatoire ; les éléments dont l’apparence est similaire ou dont la sémantique métier est complexe peuvent présenter des erreurs de classification et de nommage.

Puis-je utiliser mon propre modèle ?

Oui, l’utilisateur peut entraîner un modèle Teachable Machine et changer l’adresse du modèle dans le plugin.

Pourquoi a-t-on besoin d’une connexion Internet ?

Le plugin doit télécharger les modèles via Internet ; en cas d’indisponibilité du réseau ou d’adresse de modèle invalide, l’identification ne pourra pas être effectuée.

Autoname est-il un outil open source ?

Le code du client officiel est publié et soumis à la licence MIT, mais la plateforme Figma et les services de modèles externes ne sont pas couverts par cette licence.

Une API indépendante est-elle fournie ?

Il n’existe actuellement aucune API publique indépendante destinée aux systèmes externes ; elle est principalement utilisée sous forme de plugin Figma.

Est-ce adapté aux grands systèmes de conception ?

Il peut être utilisé pour un tri préliminaire, mais les grands systèmes de conception doivent intégrer des normes internes, des modèles personnalisés et une revue manuelle rigoureuse.