Dengan dirilisnya Adobe XD 26 , ada banyak hal baru untuk pengguna dan pengembang, termasuk:

• Tata letak sadar konten (untuk pengguna akhir)
• Seret dan Lepas API
• Polygon.starRatio Properti
• dan debugger tingkat lanjut untuk pengembang plugin untuk saat-saat ketika konsol pengembang tidak cukup.

Polygon.starRatio

Di Adobe XD 26, Anda sekarang dapat membuat bintang dan bentuk menarik lainnya dengan mengontrol pengaturan "rasio bintang". Di inspektur properti, itu berbatasan langsung dengan jumlah tepi dan kebulatan setiap sudut.

Fitur ini juga tersedia untuk plugin Anda sebagai starRatiobidang pada bentuk apa pun yang berupa file Polygon. Untuk membuat sesuatu yang dapat digunakan untuk "Baru!" bentuk stiker, misalnya anda bisa menuliskan kode berikut:

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

Seret dan Jatuhkan

Ini sangat besar . Plugin Anda sekarang dapat terasa lebih nyaman dengan Adobe XD dengan memungkinkan pengguna Anda menarik konten dari panel plugin Anda ke dalam dokumen mereka!

API itu sendiri umumnya mengikuti Standar Hidup HTML5 untuk Seret dan Jatuhkan . Jika Anda sudah terbiasa dengan standar ini, Anda akan dapat membuat plugin yang memanfaatkan drag-and-drop dalam waktu singkat. Jika Anda tidak terbiasa, jangan khawatir! Kami membuat contoh yang mendemonstrasikan secara tepat bagaimana memanfaatkan API ini.

Untuk membuat item dapat diseret di panel Anda, Anda harus menyetel draggableatribut ke true. Ini memberi tahu XD bahwa elemen tersebut mungkin akan ditarik oleh pengguna di masa mendatang.

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

Namun, menyetel draggableatribut tidak cukup - Anda juga perlu menyediakan dragstartpengendali peristiwa. Penangan ini menyiapkan operasi seret dan lepas dengan memberikan data penting tentang item yang ditarik dengan memanggil dataTransfer.setDataperistiwa seret yang masuk. Sebagai contoh:

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

• Gambar bitmap
• Konten SVG
• Teks

Ketika pengguna menyelesaikan operasi seret dan lepas, XD akan bereaksi dengan cara yang sama seperti jika Anda menyeret berkas atau berkas yang sama dari sistem berkas. Tergantung pada target, XD mungkin mengisi data gambar kisi berulang, atau mungkin menambahkan gambar ke kanvas secara langsung. Penting untuk dicatat bahwa plugin tidak memiliki kendali atas bagaimana XD merespons penurunan tersebut.

Ada beberapa batasan penting yang perlu Anda waspadai dengan fitur ini:

• Menarik konten ke UI plugin Anda tidak didukung.
• Seret dan lepas tidak memungkinkan seret dan lepas file, seperti di browser.
• Menarik konten dari kanvas XD atau permukaan XD lainnya ke UI plugin Anda tidak didukung.
• XD hanya memahami text/uri-listtipe pantomim.
• Acara dragdan dragexitsaat ini tidak didukung. Namun, ini tidak diperlukan untuk sebagian besar skenario, tetapi dukungan akan datang dalam rilis mendatang.
• Data untuk tarik disetel ke dragstartdan tidak dapat diubah. Ini berarti Anda harus memberikan gambar resolusi penuh kepada XD sebelum operasi seret dan lepas. Jika Anda mencoba menyeret thumbnail gambar, datanya harus dalam versi resolusi penuh. Kami akan menambahkan kemampuan menyediakan data tambahan pada saat penurunan di rilis mendatang.

Terkadang men-debug plugin bisa jadi sulit - jika saja Anda dapat menetapkan breakpoint pada baris tertentu dan kemudian menelusuri apa yang sebenarnya dilakukan plugin, bukan?

Di XD 26, kami telah mengaktifkan dukungan beta untuk Alat Pengembang Chrome, yang hadir dengan pengalaman debugging yang kuat. Dukungan ini jauh dari sempurna (itulah sebabnya dalam versi beta), dan akan berubah secara substansial di masa depan saat kami meluncurkan pengalaman perkakas pengembang yang ditingkatkan seputar aplikasi Adobe yang mendukung plugin berbasis UXP.

Untuk saat ini, Anda dapat melakukan hal berikut:

• Setel dan edit breakpoint.
• Masuk ke, melalui, dan melewati kode.
• Periksa nilai variabel apa pun dalam cakupan Anda saat ini.
• Berinteraksi dengan konteks JavaScript menggunakan panel Console untuk memeriksa variabel dan menjalankan kode.
• Lihat dan edit DOM HTML UI plugin Anda.

Ada beberapa peringatan saat menggunakan debugging, terutama jika Anda mengerjakan dokumen yang memiliki pengeditan langsung yang diaktifkan atau jika Anda mencoba berinteraksi dengan XD saat plugin Anda sedang di-debug. Lihat dokumentasi kami untuk mengetahui rangkaian lengkap masalah yang diketahui. Pastikan Anda benar-benar memahami risikonya sebelum men-debug plugin Anda.

Perhatikan juga - kami belum meminta umpan balik tentang alat pengembang karena kami sedang mengerjakan pengalaman yang jauh lebih baik untuk dirilis di masa mendatang. Tetapi kami tidak merasa ingin menunda merilis fungsionalitas khusus ini lagi, mengingat peningkatan kompleksitas dan kemampuan plugin.

Wah! Itu banyak sekali! Jika Anda memiliki pertanyaan atau komentar, silakan beri tahu kami di Forum Platform Adobe XD .