Introduction
Lorsque l’on maintient plusieurs bibliothèques de composants ou que l’on met à jour des kits UI, il arrive fréquemment de devoir remplacer des instances de composants provenant d’un fichier source par leurs équivalents locaux.
Cette opération peut s’avérer fastidieuse, surtout si les composants comportent des sous‑composants imbriqués et des styles associés. InstaRelinker est un plugin développé par l’équipe Progress Unite UX pour faciliter cette tâche en automatisant le relink de toutes les instances distantes vers leurs homologues locaux.
Problématique des composants distants
Dans Figma, copier un composant d’un fichier à un autre crée un nouveau composant maître dans le fichier de destination, mais les instances imbriquées restent liées au composant d’origine.
Lors de mises à jour de bibliothèques (par exemple avec les kits Telerik ou Kendo UI), cela peut entraîner des fichiers mélangeant des composants locaux et distants, rendant la maintenance et la personnalisation difficiles. InstaRelinker répond à ce problème en proposant un outil qui relie automatiquement ces instances à leurs équivalents locaux.
Fonctionnalités du plugin
Analyse et correspondance automatiques
Après avoir copié et collé les composants maîtres depuis un fichier source vers votre fichier cible, InstaRelinker scanne la sélection et le fichier pour identifier les instances distantes et styles distants. S’il trouve un composant local portant le même nom, il relie automatiquement l’instance à celui‑ci.
Relink manuel assisté
Lorsque aucune correspondance n’est trouvée, le plugin vous propose une interface de recherche pour sélectionner manuellement le composant local correspondant. Le même principe s’applique aux styles distants (couleurs, effets, textes) : vous pouvez les relier à un style local ou cloner le style distant en local.
Gestion des conflits et détachement :
Si une correspondance automatique est erronée, vous pouvez détacher l’instance ou le style et le relier à un autre élément local. Une fois tous les conflits résolus, un bouton permet d’appliquer vos sélections.
Mode d’emploi
Préparer les composants
Dans le fichier source, sélectionnez les composants maîtres ou les sets de composants à répliquer et copiez-les.
Coller dans le fichier cible
Ouvrez le fichier de destination et collez les composants copiés. Les composants maîtres distants deviennent des composants locaux, mais les instances imbriquées restent liées aux composants originaux.
Exécuter InstaRelinker
Assurez-vous que les nouveaux composants collés sont sélectionnés et lancez le plugin. Celui‑ci scanne les instances distantes et recherche des correspondances locales par nom.
Résoudre les non‑correspondances
Pour les composants sans équivalent local trouvé, utilisez la fonction de recherche pour sélectionner manuellement le bon composant local. Pour les styles distants sans équivalent, choisissez entre les relier à un style local existant ou cloner le style distant en local.
Appliquer les modifications
Une fois toutes les correspondances établies, cliquez sur « Apply Selection » pour relier définitivement les instances et styles à leurs versions locales. L’analyse peut prendre quelques secondes, surtout pour des fichiers volumineux ou contenant de nombreux composants imbriqués.
Avantages et bonnes pratiques
Avantages
Ce processus offre un gain de temps considérable, car vous n'avez plus à remplacer les instances une par une.
Il facilite également la mise à jour des bibliothèques, vous permettant de passer à une nouvelle version tout en conservant vos personnalisations. De plus, il vous donne un contrôle précis en vous permettant de valider ou d'ajuster manuellement les correspondances.
Bonnes pratiques
Pour un fonctionnement optimal, il est conseillé de bien organiser les noms de vos composants et de vos styles afin de faciliter leur détection automatique. Avant d'appliquer les changements, n'oubliez pas de sauvegarder une copie de votre fichier pour pouvoir revenir en arrière en cas d'erreur.
Conclusion
InstaRelinker est un outil puissant pour tous ceux qui gèrent des bibliothèques de composants et doivent maintenir la cohérence entre fichiers Figma.
En automatisant le relink des instances distantes et des styles, il simplifie les processus de mise à jour et d’intégration, tout en conservant vos personnalisations. Pour les projets qui évoluent rapidement et reposent sur des design systems complexes, ce plugin devient vite indispensable.
.avif)
