Avec la sortie d'Adobe XD 26 , il y a beaucoup de nouveautés pour les utilisateurs et les développeurs, notamment:

• Mise en page sensible au contenu (pour les utilisateurs finaux)
• Glisser-déposer des API
• Polygon.starRatio propriété
• et un débogueur avancé pour les développeurs de plugins pour les moments où la console développeur n'est tout simplement pas suffisante.

Polygon.starRatio

Dans Adobe XD 26, vous pouvez désormais créer des étoiles et d'autres formes intéressantes en contrôlant le paramètre «ratio d'étoiles». Dans l'inspecteur des propriétés, il est directement adjacent au nombre d'arêtes et à l'arrondi de chaque coin.

Cette fonctionnalité est également disponible pour vos plugins en tant que starRatiochamp sur n'importe quelle forme qui est un Polygon. Pour créer quelque chose qui pourrait être utilisé pour un "Nouveau!" forme d'autocollant, par exemple, vous pouvez écrire le code suivant:

const { Polygon, Color, selection } = require("scenegraph");
const aStar = new Polygon();
aStar.width = 200;
aStar.height = 200;
aStar.cornerCount = 50;
aStar.setAllCornerRadii(0);
aStar.fill = new Color("#EA793D");
aStar.strokeWidth = 2;
aStar.stroke = new Color("#644428");
selection.insertionParent.addChild(aStar);

Glisser déposer

C'est énorme . Votre plugin peut maintenant se sentir encore plus à l'aise avec Adobe XD en permettant à vos utilisateurs de faire glisser le contenu du panneau de votre plugin dans leur document!

L'API elle-même suit généralement le standard de vie HTML5 pour le glisser-déposer . Si vous connaissez déjà cette norme, vous pourrez créer des plugins qui utilisent le glisser-déposer en un rien de temps. Si vous n'êtes pas familier, pas de soucis! Nous avons créé un exemple qui montre exactement comment tirer parti de ces API.

Pour rendre un élément déplaçable dans votre panneau, vous devez définir l' draggableattribut sur true. Cela permet à XD de savoir que l'élément peut être déplacé par l'utilisateur à l'avenir.

<img src="path-to-image.png" draggable="true" />

Cependant, définir l' draggableattribut n'est pas tout à fait suffisant - vous devez également fournir un dragstartgestionnaire d'événements. Ce gestionnaire configure l'opération de glisser-déposer en fournissant des données importantes sur l'élément glissé en appelant dataTransfer.setDatal'événement de glisser entrant. Par exemple:

draggableElement.addEventListener("dragstart", evt => {
    evt.dataTransfer.setData("text/uri-list", uriList.join("\n"));
});

• Images bitmap
• Contenu SVG
• Texte

Lorsque l'utilisateur a terminé l'opération de glisser-déposer, XD réagira de la même manière que si vous aviez fait glisser le ou les mêmes fichiers depuis le système de fichiers. Selon la cible, XD peut remplir les données d'image d'une grille de répétition ou ajouter directement les images au canevas. Il est important de noter qu'un plugin n'a aucun contrôle sur la façon dont XD répond à la chute.

Il y a quelques limitations importantes dont vous devez être conscient avec cette fonctionnalité:

• Le fait de faire glisser du contenu sur l'interface utilisateur de votre plugin n'est pas pris en charge.
• Le glisser-déposer ne permet pas le glisser-déposer de fichiers, comme dans le navigateur.
• Le fait de faire glisser du contenu du canevas XD ou d'autres surfaces XD vers l'interface utilisateur de votre plugin n'est pas pris en charge.
• XD ne comprend que le text/uri-listtype mime.
• Les événements draget dragexitne sont actuellement pas pris en charge. Cependant, ils ne sont pas requis pour la plupart des scénarios, mais le support sera disponible dans une prochaine version.
• Les données pour le glissement sont définies sur dragstartet ne peuvent pas être modifiées. Cela signifie que vous devez fournir à XD l'image en pleine résolution avant l'opération de glisser-déposer. Si vous essayez de faire glisser une vignette d'une image, les données devront être la version pleine résolution. Nous ajouterons la possibilité de fournir des données supplémentaires au moment de la suppression dans une prochaine version.

Parfois, le débogage d'un plugin peut être difficile - si seulement vous pouviez définir un point d'arrêt sur une ligne spécifique et ensuite parcourir ce que fait réellement le plugin, n'est-ce pas?

Dans XD 26, nous avons activé la prise en charge bêta des outils de développement Chrome, qui sont accompagnés d'une solide expérience de débogage. Ce support est loin d'être parfait (c'est pourquoi il est en version bêta) et changera considérablement à l'avenir à mesure que nous déploierons une expérience améliorée des outils de développement autour des applications Adobe prenant en charge les plugins UXP.

Pour l'instant, cependant, vous pouvez faire ce qui suit:

• Définissez et modifiez les points d'arrêt.
• Entrez dans le code, à travers et au-dessus.
• Inspectez les valeurs de toutes les variables de votre étendue actuelle.
• Interagissez avec le contexte JavaScript à l'aide du panneau de la console pour inspecter les variables et exécuter le code.
• Affichez et modifiez le DOM HTML de l'interface utilisateur de votre plugin.

Il y a quelques mises en garde lors de l'utilisation du débogage, en particulier si vous travaillez sur un document pour lequel l'édition en direct est activée ou si vous essayez d'interagir avec XD pendant le débogage de votre plugin. Consultez notre documentation pour connaître l'ensemble des problèmes connus. Assurez-vous de bien comprendre les risques avant de déboguer votre plugin.

Notez également que nous ne sollicitons pas encore de commentaires sur les outils de développement car nous travaillons sur une expérience bien améliorée qui sera publiée dans le futur. Mais nous n'avions plus l'impression de vouloir retarder la publication de cette fonctionnalité particulière, étant donné l'augmentation de la complexité et des capacités du plugin.

Ouf! C'était beaucoup de choses! Si vous avez des questions ou des commentaires, n'hésitez pas à nous le faire savoir sur les forums de la plateforme Adobe XD .