Adobe XD, une extension pour Visual Studio Code, est disponible pour créer et consommer des systèmes de design,
il permet aux développeurs de mapper visuellement les sources de conception

Adobe a présenté ce 20 octobre une extension Adobe XD pour l’éditeur de code open source de Microsoft, Visual Studio Code. La nouvelle extension Adobe XD pour Visual Studio Code permet aux développeurs de mapper visuellement les sources de conception, créées en XD et disponibles dans les bibliothèques Creative Cloud, en un code spécifique à la plateforme à l'aide de jetons de conception. Voici ci-dessous ce dont il s’agit.

Dans l’annonce de la nouvelle extension, Adobe a déclaré que les systèmes de conception constituent le lien entre la conception et le développement. Afin de construire un système réussi, adapté et largement adopté, tant les concepteurs que les développeurs doivent trouver un terrain d'entente. C’est la raison d’être de cette extension. Les équipes de DesignOps pourront créer des DSP (Design System Packages) partageables qui contiennent toutes les informations que les développeurs doivent consommer lors du codage, y compris des extraits de code et de la documentation.

Pour rappel, un système de design (Design System) maintient les éléments visuels et fonctionnels de votre organisation dans un seul endroit, afin de respecter les principes de votre marque par la conception, la réalisation et le développement de tous les produits et services. Il peut comprendre une bibliothèque de croquis, un guide de style, une bibliothèque de modèles, des principes d'organisation, des meilleures pratiques, des modèles, des codes, etc. Il existe de nombreux systèmes de design, dont Polaris conçu par Shopify, Material Design de Google, IBM Design Language, etc.


Ensuite, l’extension permet aux développeurs de mapper visuellement les sources de conception, créées en XD et disponibles dans les bibliothèques Creative Cloud, en un code spécifique à la plateforme à l'aide de jetons de conception. Vous pouvez apprendre à utiliser l’extension en visitant le site letsxd.com/vscode. Vous y apprendrez comment créer ou consommer des DSP, ainsi que trouver des DSP populaires pour charger et construire vos projets en utilisant l'extension. Adobe a annoncé qu’elle peut contribuer à accélérer ou à remplacer plusieurs flux de travail existants, dont ceux où :

  • les développeurs qui créent des applications ou des sites Web doivent trouver rapidement des informations sur les systèmes de conception tels que les jetons et les composants ;
  • les équipes, petites ou grandes, souhaitent commencer à travailler avec des jetons, mais ne savent pas par où commencer ;
  • les équipes DesignOps gèrent les jetons manuellement dans des feuilles de calcul ou des documents ;
  • les développeurs de DesignOps mettent en place des systèmes de compilation manuelle/textuelle pour compiler les jetons en code spécifique à la plateforme ;
  • les jetons de conception sont créés manuellement. L'extension permet aux équipes de créer des jetons basés sur des conceptions en un seul clic en quelques secondes, grâce aux bibliothèques CC, sans avoir besoin d'une expertise de domaine sur la manière de consommer les API ou de construire des systèmes ;
  • il n'existe pas de langage commun partagé pour les équipes et les outils permettant d'échanger des informations sur les systèmes de conception. DSP se veut une plateforme ouverte pour cela.


Installer l'extension

Source : Adobe XD pour VS Code

Et vous ?

Qu'en pensez-vous ?

Voir aussi

Draw.io intégré à VS Code : créez des diagrammes directement dans l'EDI avec cette extension open source

La version 3 de Vue.js, le framework JavaScript progressif, est disponible avec de nouvelles API et des améliorations de performance

Debug Visualizer, une extension VS Code pour visualiser les structures de données lors du débogage qui fonctionnerait avec tous les langages qui peuvent être débogués dans VS Code