Membina widget figma interaktif

Perlukan elemen 3D? Ada plugin! Perlukan SVG Abstrak? Terdapat juga plugin!

Walau bagaimanapun, bahagian reka bentuk FIGMA sentiasa agak statik -selalu digunakan segi empat tepat yang tidak dapat dipenuhi, dihubungkan bersama melalui interaksi pengguna yang telah ditetapkan. Tetapi apa yang anda fikir jika saya berkata reka bentuk anda tiba -tiba boleh hidup -boleh menjadi animasi, interaktif, atau bahkan negara? Jadi, apakah perbezaan antara konsep dan pelaksanaan?

Figma mengumumkan pada bulan Jun bahawa ia akan melancarkan widget berasaskan JavaScript. Sekarang pereka boleh melayari dan melaksanakan komponen yang didorong oleh logik secara langsung di Figma!

Mari kita pelajari tentang Widgets API bersama -sama! Ingin tahu apa itu dan bagaimana menggunakannya? Inilah yang akan kita pelajari bersama dalam artikel ini.

Widget Figma membolehkan kemungkinan tak terhingga

Bayangkan bahawa anda dan rakan kongsi anda bekerja siang dan malam untuk merancang aplikasi restoran yang besar. Anda semua bekerjasama di papan artma Figma yang sama;

Sudah tentu, anda sudah tahu bahawa kerjasama melibatkan lebih daripada sekadar proses reka bentuk:

• Pengurusan Projek,

Hanya satu orang yang perlu menguruskan segala -galanya dan menghantar pautan ke seluruh kumpulan. Tetapi, ini tidak cekap, bukan?

Ini adalah di mana widget dimainkan. Kita boleh bayangkan melakukan semua ini -ya, semua ini -tanpa meninggalkan Figma. Berikut adalah beberapa cara anda mungkin mahu menggunakan widget di Figma:

• Buat tugas untuk Jira dan Asana
/li>
• Buat pemasa

So dan sebagainya. Seperti yang anda lihat, sudah ada sebilangan besar widget yang bebas digunakan dalam dokumentasi anda. Malah, anda boleh menambah widget ke papan artom anda secara langsung dari menu Widgets (Shift I).

Tetapi kami tidak berada di sini untuk belajar cara menggunakan widget, kerana mudah. Mari kita lakukan yang terbaik: kita akan membuat widget Figma kita sendiri! Widget ini akan diilhamkan oleh laman web petikan reka bentuk Chris Coyier. Kami akan mendapatkan API, memberi makan kepada widget, dan kemudian memaparkan petikan reka bentuk rawak secara langsung di Figma.

Apa yang kita perlukan

Saya tidak suka menjadi penyebar berita buruk, tetapi untuk membangunkan widget, anda perlu berada di Windows atau Mac. Pengguna Linux, maaf, anda tidak bernasib baik. (Jika anda ingin terus belajar, anda masih boleh menggunakan mesin maya.)

Kami akan memuat turun aplikasi Desktop Figma. Cara paling mudah untuk memulakan adalah untuk menghasilkan templat widget secara langsung dari aplikasi.

Mari buat papan baru dengan membuka menu widget (Shift I), beralih ke tab Pembangunan, dan membuat projek baru.

Selepas itu, Figma akan meminta anda untuk menamakan widget baru dan memutuskan sama ada ia lebih sesuai untuk merancang papan arto atau papan artjam Figjam. Untuk tujuan artikel ini, pilihan sebelumnya adalah mencukupi.

Penyesuaian tidak berakhir di sana; Kami akan memilih pilihan "kosong" yang mudah, tetapi akhirnya kami akan mengubahnya sendiri untuk menggunakan API Fetch.

Sistem ini kemudian akan meminta anda untuk menyimpan projek widget baru ke direktori khas dalam sistem. Setelah selesai, mulakan terminal anda dan mengarahkannya ke folder. Jangan jalankan apa -apa arahan sekarang - kami akan melakukannya kemudian dan kami sengaja akan membuat kesilapan dengan matlamat untuk mempelajari lebih lanjut mengenai API Widgets.

Widget reka bentuk

Kami mendapat reka bentuk secara langsung dari laman web Quote Reka Bentuk Chris Coyier. Jadi, mari pergi ke sana dan menggali lebih mendalam dengan melancarkan Devtools.

Dua pintasan utama yang saya gunakan di sini adalah CTRL Shift C (atau CMD Shift C) untuk menukar alat Pick Elements, dan shift klik untuk menukar format warna ke kod hex. Kami melakukan ini untuk memahami warna, fon, ketebalan fon, dan saiz fon yang digunakan di laman web Chris. Semua maklumat ini penting untuk membina widget yang sangat serupa di Figma, dan ini akan menjadi langkah seterusnya! Anda boleh merebut komponen yang direka dan menggunakannya pada kanvas anda sendiri.

Saya tidak akan pergi ke butiran di sini, kerana topik artikel ini adalah untuk membina widget dengan menulis kod. Tetapi saya perlu menekankan bahawa ia sangat penting untuk gaya widget anda dengan teliti ... CSS-Tricks sudah mempunyai banyak tutorial Figma berorientasikan reka bentuk;

Buat susun atur untuk widget kami

Selepas reka bentuk selesai, sudah tiba masanya untuk mengambil jari pengaturcaraan kami dan mula membina gear widget kami.

Bagaimana Figma menukarkan blok bangunan reka bentuknya menjadi komponen seperti reaksi sangat menarik. Sebagai contoh, elemen rangka kerja dengan susun atur automatik diwakili dalam kod sebagai komponen <utolayout> </utolayout>. Di samping itu, kami akan menggunakan dua komponen lain: <text> </text> dan <svg> </svg> .

Lihat papan artma Figma saya ... Saya meminta anda untuk memberi perhatian kepada pokok objek. Ini adalah kunci kepada keperluan kami untuk dapat menukar reka bentuk widget kami ke dalam kod JSX.

Seperti yang anda lihat, widget Reka Bentuk Reka Bentuk kami memerlukan mengimport tiga komponen. Memandangkan API penuh mengandungi hanya lapan nod berasaskan lapisan, ini adalah banyak komponen. Tetapi seperti yang anda lihat tidak lama lagi, modul ini cukup untuk membuat semua jenis susun atur.

// code.tsx const {widget} = figma; > <svg> </svg> {quote} - {pengarang} <svg> </svg> ); Sekarang, kita tidak dapat membezakan antara lapisan reka bentuk. Nasib baik, kita dapat menyelesaikan masalah ini dengan menggunakan atribut dengan mudah. ;

Sudah tentu, kita masih tidak dapat melihat SVG kutipan kami, jadi mari mula menyelesaikan masalah ini. Komponen <svg> </svg> menerima atribut src yang menggunakan kod sumber elemen SVG. Tidak banyak yang boleh dikatakan mengenai perkara ini, jadi mari kita simpannya dengan mudah dan melompat kembali ke kod secara langsung:

 <code> const leftquotationsvgsrc = `<svg fill=" none " height=" 103 " viewbox=" 0 117 103 " width=" 117 " ened> `; xmlns = "<http:>"> // dipendekkan untuk kesederhanaan </http:></svg> `; "}" src = "{rightquotationsvgsrc}"> ); Apabila kita menamakan sesuatu, tujuan mereka tiba -tiba menjadi lebih jelas kepada pembaca kod kita.  <h3 id="Pratonton-widget-kami"> Pratonton widget kami </h3> <p> FIGMA menyediakan pengalaman pembangunan yang baik apabila membina widget, termasuk (tetapi tidak terhad kepada) memuat semula panas. Dengan ciri ini, kita boleh mengodkan dan pratonton perubahan kepada widget dalam masa nyata. </p> <p> Pertama buka menu widget (Shift I), beralih ke tab Development, dan kemudian klik atau seret widget baru anda ke Artboard. Tidak dapat mencari widget anda? Jangan bimbang, klik menu tiga titik dan import <code> manifest.json </code> fail widget anda. Ya, itu semua langkah untuk mendapatkannya kembali kepada kewujudan! </p> <p> Tunggu, adakah mesej ralat di bahagian bawah skrin anda? </p> <p> Jika ya, mari kita siasat. Klik "<strong> Buka Konsol </strong>" dan baca kandungannya. Jika butang <strong> Open Console </strong> hilang, ada cara alternatif untuk membuka konsol debug. Klik logo Figma, lompat ke kategori widget dan paparkan menu pembangunan. </p> <p> Ralat mungkin kerana kita belum menyusun TypeScript ke JavaScript lagi. Kami boleh melakukan ini pada baris arahan dengan menjalankan <code> npm Install </code> dan <code> npm run watch </code> (atau <code> yarn </code> dan <code> benang watch </code>). Tidak ada kesilapan kali ini! </p> <p> Rintangan lain yang mungkin anda hadapi adalah bahawa widget tidak boleh diberikan semula setiap kali kod berubah. Kami boleh memaksa kemas kini widget dengan mudah menggunakan perintah menu konteks berikut: <strong> widget </strong> → <strong> render widget </strong>. </p> <h3 id="Widget-Tetapan-Gaya"> Widget Tetapan Gaya </h3> <p> Buat masa ini, penampilan widget kami masih jauh dari matlamat utama kami. </p> <p> Jadi bagaimana kita gaya komponen FIGMA dari kod? Mungkin menggunakan CSS seperti yang anda lakukan dalam projek React? kesilapan. Untuk widget Figma, semua gaya dilaksanakan melalui set lengkap sifat. Nasib baik, projek -projek ini mempunyai nama yang sama dengan projek yang sepadan di Figma. </p> <p> Kami akan mengkonfigurasi dua <code> <utolayout> </utolayout></code></p></code>

. Seperti yang ditunjukkan dalam angka di atas, nama atribut menggambarkan tujuan mereka dengan jelas. Ini membolehkan kita melompat terus ke kod dan mula membuat beberapa perubahan. Saya tidak akan menunjukkan keseluruhan kod lagi, jadi bergantung pada nama komponen untuk membimbing anda di mana coretan kod.

 <code> <autolayout arah="{" mendatar mendatar:="" center name="{" quote al:="{" start quotecontent padding="{{" spacing="{10}" menegak:="" verticalalignitems="{" end> </autolayout> ; </code> 

Kami telah membuat kemajuan yang hebat! Mari simpan dan lompat kembali ke Figma untuk melihat bagaimana widget kita kelihatan. Ingat bagaimana Figma secara automatik memuatkan widget selepas perubahan baru?

Tetapi ia tidak mencukupi. Kami juga perlu menambah warna latar belakang kepada komponen akar:

<code> <autolayout fill="{" name="{" quote> </autolayout>

Mari kita teruskan dengan panduan ini dan gaya

komponen.

Selepas melihat dokumentasi Widgets API, anda dengan jelas melihat lagi bahawa nama harta hampir sama dengan item yang sepadan dalam aplikasi Figma, seperti yang ditunjukkan dalam gambar di atas. Kami juga akan menggunakan nilai laman web Chris di bahagian sebelumnya.

<text fill="{'#545454'}" fontfamily="{'lora'}" fontsize="{36}" fontweight="{'normal'}" name> </text>

Tambah status ke widget

widget kami pada masa ini memaparkan petikan yang sama, tetapi kami mahu mengeluarkannya secara rawak dari keseluruhan kolam kutipan. Kami perlu menambah keadaan kepada widget kami, yang semua pemaju React tahu adalah pembolehubah yang perubahan akan mencetuskan semula komponen kami.

Di Figma, keadaan dicipta menggunakan usesyncedstate cangkuk; Keperluan ini berpunca daripada fakta bahawa Figma mesti menyegerakkan keadaan widget kami yang merangkumi semua pelanggan yang mungkin melihat artboard reka bentuk yang sama, tetapi melalui komputer yang berbeza.

const {usesyncedstate} = widget quoteswidget () {const [quote, setquote] = usesyncedstate ("quote-text", "); Dalam bahagian seterusnya, kami akan memikirkan bagaimana untuk mendapatkan data dari Internet. Amaran Spoiler: Ini tidak semudah yang kelihatannya. <h3 id="Dapatkan-data-dari-rangkaian"> Dapatkan data dari rangkaian </h3> <p> ingat Figma membolehkan kami memilih untuk memulakan dengan widget yang membolehkan iframe. Walaupun kami tidak memilih pilihan itu, kami masih perlu melaksanakan beberapa ciri. Biar saya jelaskan mengapa kita tidak boleh hanya memanggil <code> mengambil () dalam kod widget.

Apabila anda menggunakan widget, anda menjalankan kod JavaScript yang ditulis oleh orang lain di komputer anda. Walaupun semua widget telah diteliti secara menyeluruh oleh kakitangan Figma, ini masih merupakan kelemahan keselamatan yang besar kerana kita semua tahu berapa banyak kerosakan walaupun garis JavaScript boleh menyebabkan.

So Figma tidak boleh hanya eval () tanpa nama mana -mana kod widget yang ditulis oleh seorang pengaturcara. Cerita panjang pendek, pasukan memutuskan bahawa penyelesaian terbaik adalah untuk menjalankan kod pihak ketiga dalam persekitaran kotak pasir yang ketat. Seperti yang mungkin anda fikirkan, API penyemak imbas tidak terdapat dalam persekitaran ini.

Tetapi jangan bimbang, penyelesaian Figma untuk masalah kedua ini adalah <iframe> </iframe>. Mana -mana kod HTML yang kami tulis dalam fail (sebaiknya dipanggil ui.html ) mempunyai akses kepada semua API penyemak imbas. Anda mungkin tertanya -tanya bagaimana kita boleh mencetuskan kod ini dari widget, tetapi kita akan melihat ini kemudian. Sekarang, mari kita kembali ke kod:

 <code> // manifest.json {"ui": "ui.html"} </code> 

window.onmessage = async (event) dari window server.parent.postmessage ({pluginMessage: {// todo: mengembalikan data yang diambil}}, '*')}}

Ini adalah template biasa untuk widget untuk komunikasi iframe. Mari kita gunakan untuk mendapatkan data dari pelayan:

 <code> window.onmessage = async (event) = & gt; mengambil (`https://quotesondesign.com/wp-json/wp/v2/posts/?orderBy=rand& .rendered const quipeContent = data [0] .yoast_head_json.og_description window.parent.postmessage ({pluginMessage: {authorName, QuotEcontent}}, '*')}} </code> 

Untuk memastikan ia mudah dan jelas, kami menghilangkan pengendalian ralat. Mari kita kembali ke kod widget dan lihat bagaimana kita mengakses fungsi yang ditakrifkan dalam <iframe> </iframe>:

 <code> function fetchData () {return new Promise <void> }) figma.ui.onmessage = async ({AuthorName, quipeContent}) = & gt; } </void> </code> 

Seperti yang anda lihat, kami mula -mula memberitahu Figma untuk mengakses secara terbuka kami <iframe> </iframe> dan mencetuskan peristiwa yang dipanggil "NetworkRequest". Kami mengendalikan acara ini dalam fail ui.html dengan menyemak event.data.pluginmessage.type === 'NetworkRequest' dan kemudian menerbitkan data kembali ke widget.

Tetapi tiada apa yang berlaku lagi ... Kami masih belum memanggil fungsi fetchData () . Jika kita memanggilnya secara langsung dalam fungsi komponen, ralat berikut akan muncul dalam konsol:

 <code> showui tidak boleh digunakan semasa rendering widget. </code> 

Figma memberitahu kita untuk tidak memanggil showui secara langsung dalam badan fungsi ... jadi di mana kita harus meletakkannya? Jawapannya adalah cangkuk baru dan fungsi baru: useeffect dan waitfortask . Jika anda seorang pemaju React, anda mungkin sudah biasa dengan useeffect , tetapi kami akan menggunakannya di sini untuk mendapatkan data dari pelayan apabila komponen widget dipasang.

 <code> const {useeffect, waitfortask} = widget function; Ini berlaku kerana <code> useeffect </code> mengikut definisi, ia akan membakar sekali lagi apabila keadaan widget berubah, atau apabila kita memanggil <code> fetchData </code>. Walaupun terdapat teknik yang hanya boleh memanggil <code> useeffect </code> sekali dalam React, ia tidak berfungsi dengan pelaksanaan FIGMA. Dari dokumentasi Figma:  <clockquote> <p> Oleh kerana bagaimana widget dijalankan, useeffect harus mengendalikan dipanggil beberapa kali menggunakan keadaan yang sama. </p>  <p> bernasib baik, kita boleh mengambil kesempatan daripada penyelesaian yang mudah yang hanya memanggil <code> useeffect </code> apabila komponen pertama dipasang dengan memeriksa sama ada nilai negeri masih kosong: </p> ); Ini sangat biasa dalam pembangunan plug-in dan widget. Hanya mulakan semula Figma dan ia tidak akan muncul lagi.  <p> Anda mungkin perasan bahawa kadang -kadang mengutip teks mengandungi watak -watak pelik. </p> <p> odeentities = (fungsi () {// ini menghalang mana -mana overhead daripada membuat objek setiap kali var elemen = document.createElement ("div"); fungsi decodeHtmlentities (str) {if (str & amp; & amp; typeof str === "string") {// jalur skrip/html str = str.replace (/]*& gt; ? \\\\\ \ w (?: [^"'& gt;] | elemen.textcontent = ""; </p> <h3 id="Tambah-menu-Properties-ke-widget-kami"> Tambah menu Properties ke widget kami </h3> <p> Walaupun widget kami mendapat petikan baru apabila instantiated, ia akan lebih praktikal jika kita dapat melaksanakan proses ini sekali lagi tanpa mengeluarkannya. Bahagian ini akan diperkenalkan secara ringkas kerana penyelesaiannya sangat baik. Menggunakan menu Properties, kami boleh menambah interaktiviti ke widget kami dengan memanggil <code> usepropertymenu </code> cangkuk sekaligus. </p> <ce> <code> const {usepropertymenu} = widget; w.w3.org/2000/svg> "> `,},], () = & gt; fetchData ());} </code> </ce></clockquote></code>

Menggunakan cangkuk mudah, kita boleh membuat butang yang muncul berhampiran widget kami apabila widget kami dipilih. Ini adalah bahagian terakhir yang perlu kita tambahkan untuk menyelesaikan projek ini.

Terbitkan widget kami kepada orang awam

Jika tiada siapa menggunakannya, maka membina widget tidak banyak digunakan. Walaupun Figma membolehkan organisasi melancarkan swasta widget untuk kegunaan dalaman, lebih biasa untuk menerbitkan applet ini di seluruh dunia.

Figma mempunyai proses semakan widget yang teliti yang boleh mengambil antara 5 dan 10 hari bekerja. Walaupun widget petikan reka bentuk yang kami bina bersama sudah ada di perpustakaan widget, saya masih akan menunjukkan bagaimana ia sampai di sana. Tolong jangan cuba menerbitkan widget ini sekali lagi, kerana ini hanya akan menghasilkan penghapusan . Walau bagaimanapun, jika anda membuat beberapa perubahan besar, terus berkongsi widget anda sendiri dengan komuniti!

Klik pertama pada menu widget (Shift I), dan kemudian beralih ke tab Pembangunan untuk melihat widget kami. Klik menu tiga titik dan tekan Terbitkan .

Figma akan meminta anda memasukkan beberapa butiran mengenai widget anda, seperti tajuk, keterangan, dan beberapa tag. Kami juga memerlukan imej ikon 128 × 128 dan imej banner 1920 × 960.

Selepas mengimport semua sumber ini, kami masih memerlukan tangkapan skrin widget. Matikan mod penerbitan (jangan risau, anda tidak akan kehilangan data) dan klik kanan pada widget untuk menunjukkan menu konteks yang menarik. Cari salinan/tampal sebagai dan pilih salin sebagai png .

Selepas ini selesai, mari kita kembali untuk menerbitkan mod dan tampal screenshot widget dalam:

tatal ke bawah dan akhirnya menerbitkan mod anda. Raikan! ?

Figma akan menghubungi anda dalam beberapa hari untuk memaklumkan kepada anda tentang status kajian model. Jika ditolak, anda akan berpeluang membuat perubahan dan menyerahkannya lagi.

Kesimpulan

Kami hanya membina widget Figma dari awal! Terdapat banyak yang tidak dilindungi di sini, seperti acara klik, borang input, dan banyak lagi. Anda boleh menggali kod sumber penuh widget dalam repositori GitHub ini.

Bagi mereka yang ingin mengambil kemahiran Figma mereka ke peringkat seterusnya, saya cadangkan meneroka komuniti widget dan menggunakan apa yang menarik minat anda sebagai inspirasi. Terus membina lebih banyak widget, teruskan mengasah kemahiran reaksi anda, dan anda akan mengajar saya bagaimana untuk melakukannya sebelum anda menyedarinya.

Lebih banyak sumber

Saya terpaksa merujuk kepada banyak dokumentasi ketika membuat widget ini. Saya fikir saya akan berkongsi apa yang saya dapati paling membantu.

Bina lebih banyak widget:

• Amalan terbaik untuk membina widget
4> Widget dan plugin
• Widget dan plugin
• Pengenalan kepada Plugin Figma
• Bagaimana plugin berjalan di belakang tabir

Atas ialah kandungan terperinci Membina widget figma interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!