Con el lanzamiento de Adobe XD 26 , hay muchas cosas nuevas tanto para los usuarios como para los desarrolladores, que incluyen:

• Diseño basado en contenido (para usuarios finales)
• API de arrastrar y soltar
• Polygon.starRatio propiedad
• y un depurador avanzado para desarrolladores de complementos para aquellos momentos en los que la consola de desarrollo no es suficiente.

Polygon.starRatio

En Adobe XD 26, ahora puede crear estrellas y otras formas interesantes controlando la configuración de "proporción de estrellas". En el inspector de propiedades, está directamente adyacente al número de bordes y la redondez de cada esquina.

Esta función también está disponible para sus complementos como un starRatiocampo en cualquier forma que sea Polygon. Para crear algo que pueda usarse para un "¡Nuevo!" forma de etiqueta, por ejemplo, puede escribir el siguiente código:

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);

Arrastrar y soltar

Esto es enorme . Su complemento ahora puede sentirse aún más en casa con Adobe XD al permitir que sus usuarios arrastren contenido desde el panel de su complemento a su documento.

La API en sí sigue generalmente el estándar de vida HTML5 para arrastrar y soltar . Si ya está familiarizado con este estándar, podrá crear complementos que utilicen la función de arrastrar y soltar en muy poco tiempo. Si no está familiarizado, ¡no se preocupe! Creamos una muestra que demuestra exactamente cómo aprovechar estas API.

Para hacer que un elemento se pueda arrastrar en su panel, deberá establecer el draggableatributo en true. Esto le permite a XD saber que el elemento puede ser arrastrado por el usuario en el futuro.

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

Sin embargo, establecer el draggableatributo no es suficiente; también debe proporcionar un dragstartcontrolador de eventos. Este controlador configura la operación de arrastrar y soltar proporcionando datos importantes sobre el elemento que se arrastra llamando dataTransfer.setDataal evento de arrastre entrante. Por ejemplo:

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

• Imágenes de mapa de bits
• Contenido SVG
• Texto

Cuando el usuario finaliza la operación de arrastrar y soltar, XD reaccionará de la misma manera que si hubiera arrastrado el mismo archivo o archivos desde el sistema de archivos. Dependiendo del destino, XD podría completar los datos de imagen de una cuadrícula repetida o podría agregar las imágenes al lienzo directamente. Es importante tener en cuenta que un complemento no tiene control sobre cómo XD responde a la caída.

Hay algunas limitaciones importantes que debe tener en cuenta con esta función:

• No se admite arrastrar contenido a la interfaz de usuario de su complemento.
• Arrastrar y soltar no permite arrastrar y soltar archivos, como en el navegador.
• No se admite arrastrar contenido desde el lienzo XD u otras superficies XD a la interfaz de usuario de su complemento.
• XD solo entiende el text/uri-listtipo de mimo.
• Actualmente, los eventos dragy dragexitno son compatibles. Sin embargo, estos no son necesarios para la mayoría de los escenarios, pero el soporte vendrá en una versión futura.
• Los datos para el arrastre se establecen en dragstarty no se pueden modificar. Esto significa que debe proporcionar a XD la imagen de resolución completa antes de la operación de arrastrar y soltar. Si está intentando arrastrar una miniatura de una imagen, los datos deberán ser la versión de resolución completa. Agregaremos la capacidad de proporcionar datos adicionales en el momento del lanzamiento en una versión futura.

A veces, depurar un complemento puede ser difícil, si solo pudiera establecer un punto de interrupción en una línea específica y luego analizar lo que realmente está haciendo el complemento, ¿verdad?

En XD 26, hemos habilitado el soporte beta para Chrome Developer Tools, que viene con una sólida experiencia de depuración. Este soporte está lejos de ser perfecto (por eso está en versión beta) y cambiará sustancialmente en el futuro a medida que implementemos una experiencia mejorada de herramientas para desarrolladores en torno a las aplicaciones de Adobe que admiten complementos basados ​​en UXP.

Por ahora, sin embargo, puede hacer lo siguiente:

• Establecer y editar puntos de interrupción.
• Ingrese, revise y supere el código.
• Inspeccione los valores de cualquier variable en su alcance actual.
• Interactúe con el contexto de JavaScript utilizando el panel de la Consola para inspeccionar variables y ejecutar código.
• Vea y edite el DOM HTML de la interfaz de usuario de su complemento.

Existen bastantes advertencias al usar la depuración, especialmente si está trabajando en un documento que tiene habilitada la edición en vivo o si intenta interactuar con XD mientras se depura su complemento. Consulte nuestra documentación para conocer el conjunto completo de problemas conocidos. Asegúrese de comprender los riesgos antes de depurar su complemento.

También tenga en cuenta que todavía no estamos solicitando comentarios sobre las herramientas para desarrolladores, ya que estamos trabajando en una experiencia mucho mejor que se lanzará en el futuro. Pero ya no sentimos que quisiéramos retrasar el lanzamiento de esta funcionalidad en particular, dado el aumento en la complejidad y las capacidades de los complementos.

¡Uf! ¡Eso fue un montón de cosas! Si tiene alguna pregunta o comentario, no dude en hacérnoslo saber en los foros de la plataforma Adobe XD .