Figma selalu mendorong kolaborasi antara pengembang dan desainer. Ini berusaha pada perbendaharaan plugin buatan komunitas yang tak ada habisnya. Butuh elemen 3D? Ada plugin untuk itu. Butuh SVG abstrak? Ada plugin untuk itu, Juga.
Meskipun demikian, bagian desain Figma selalu relatif statis — selalu bekerja dengan persegi panjang yang tidak dapat dipindahkan yang terhubung satu sama lain melalui interaksi pengguna yang telah ditentukan sebelumnya. Tetapi bagaimana jika saya memberi tahu Anda bahwa desain Anda dapat tiba-tiba menjadi hidup — bahwa mereka dapat dianimasikan, interaktif, dan bahkan stateful? Lalu, apa yang memisahkan konsep dari implementasi?
gambar diumumkan pada bulan Juni bahwa itu membawa widget bertenaga JavaScript ke meja. Sekarang, desainer dapat menelusuri dan mengimplementasikan komponen berbasis logika langsung di Figma!
Katakan halo kepada API Widget! Anda ingin tahu apa itu dan bagaimana menggunakannya? Itulah tepatnya yang akan kita lakukan bersama di postingan ini.
Widget Figma membuka banyak kemungkinan
Bayangkan Anda bekerja sepanjang waktu dengan pasangan Anda untuk merancang aplikasi restoran besar. Anda berdua sudah berkolaborasi di papan Figma yang sama; Anda berdua berbagi dokumen yang sama persis dengan perubahan yang terjadi dengan cepat.
Tentunya, Anda sudah tahu bahwa kolaborasi melibatkan lebih dari sekadar proses desain:
- manajemen proyek,
- mengadakan polling untuk mengumpulkan suara,
- mengimpor dan memvisualisasikan data tiruan,
- dan bahkan mungkin memainkan game multipemain untuk menenangkan diri setelah berjam-jam bekerja.
Kami hanya memerlukan satu orang untuk mengelola semuanya dan mengirimkan tautan ke anggota grup lainnya. Tapi oh, itu sangat tidak efisien, bukan?
Nah, di situlah widget berperan. Kita dapat melakukan semua itu — ya, semuanya — tanpa harus meninggalkan Figma.
Berikut adalah beberapa cara Anda mungkin ingin menggunakan widget di Figma:
Daftarnya berjalan kami dan kami. Seperti yang Anda tahu, sudah ada banyak widget yang dapat Anda gunakan dengan bebas di dokumen Anda. Bahkan, Anda dapat menambahkan Widget langsung ke papan Anda dari menu Widget (Shift+I).
Tapi kami di sini bukan untuk mempelajari cara menggunakan widget, karena itu mudah. Mari kita lakukan yang terbaik: kita akan membuat widget Figma kita sendiri! Yang ini akan terinspirasi oleh Situs web kutipan desain Chris Coyier. Kami akan mengambil API, memasukkannya ke dalam widget, lalu menampilkan kutipan desain acak langsung di Figma.
Inilah yang kami butuhkan
Saya tidak suka menjadi pembawa berita buruk, tetapi untuk mengembangkan widget, Anda harus menggunakan Windows atau Mac. Pengguna Linux, maaf, tapi Anda kurang beruntung. (Kamu masih bisa menggunakan VM jika Anda ingin mengikuti.)
Kita akan unduh Figma Desktop aplikasi. Cara termudah untuk memulai adalah dengan membuat template widget, langsung dari aplikasi.
Mari kita buat papan baru dengan membuka menu widget (Shift+ I), beralih ke Pengembangan tab, dan membuat item baru.
Setelah itu, Figma akan meminta Anda untuk memberi nama widget baru dan memutuskan apakah itu lebih disesuaikan dengan papan desain atau papan FigJam juga. Opsi sebelumnya sudah cukup untuk tujuan artikel ini.
Dan kustomisasi tidak berakhir di sini; Figma juga akan memberi Anda opsi untuk memulai dengan widget penghitung yang sudah dibuat sebelumnya atau alternatif berkemampuan iFrame yang juga memberi Anda akses ke Canvas and Fetch API (serta semua API browser lainnya). Kami akan menggunakan opsi "Kosong" sederhana, tetapi pada akhirnya kami akan memodifikasinya sendiri untuk menggunakan Fetch API.
Anda kemudian akan diminta untuk menyimpan proyek widget baru Anda ke direktori khusus di sistem Anda. Setelah selesai, luncurkan terminal Anda dan arahkan ke folder itu. Jangan menjalankan perintah apa pun — kita akan melakukannya nanti dan sengaja mendapatkan kesalahan dengan tujuan untuk mempelajari lebih lanjut tentang Widgets API.
Mendesain widget
Kami menarik desain langsung dari Situs web kutipan desain Chris Coyier. Jadi, mari kita pergi ke sana dan menyelami dengan mengaktifkan DevTools.
Dua pintasan utama yang saya gunakan di sini adalah Ctrl+Shift+C (Atau Cmd+Shift+C) untuk mengaktifkan alat "Pilih elemen", dan Shift+Click untuk mengubah format warna menjadi kode HEX. Kami melakukan ini untuk mempelajari tentang warna, font, bobot font, dan ukuran font yang digunakan di situs web Chris. Semua informasi ini sangat penting untuk membangun widget yang mirip dengan Figma, yang akan menjadi langkah kita selanjutnya! Kamu bisa ambil komponen yang dirancang dan menggunakannya di kanvas Anda sendiri.
Saya tidak akan membahas banyak detail di sini karena topik utama artikel ini adalah membangun widget dengan menulis kode. Tapi saya tidak bisa cukup menekankan betapa pentingnya menjaga kesehatan Anda gaya widget… CSS-Tricks sudah memiliki banyak tutorial Figma berorientasi desain; Anda tidak akan menyesal menambahkannya ke daftar bacaan Anda.
Membuat tata letak untuk widget kami
Dengan tidak adanya desain, saatnya untuk mengeluarkan jari pemrograman kita dan mulai membangun roda gigi widget kita.
Sangat menarik bagaimana Figma menerjemahkan blok bangunan desainnya menjadi komponen mirip-React. Elemen bingkai dengan fitur tata letak otomatis, misalnya, direpresentasikan sebagai <AutoLayout /> komponen dalam kode. Selain itu, kita akan menggunakan dua komponen lagi: <Text /> dan <SVG />.
Lihatlah papan Figma saya… Saya justru meminta Anda untuk fokus pada pohon objek. Itulah yang kami butuhkan untuk dapat menerjemahkan desain widget kami ke kode JSX.
Seperti yang Anda lihat, widget kutipan desain kami menuntut tiga komponen untuk diimpor. Itu jumlah komponen yang layak mengingat bahwa API lengkap hanya berisi delapan node berbasis lapisan. Tetapi seperti yang akan segera Anda lihat, modul-modul ini lebih dari cukup untuk membuat semua jenis tata letak.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Dan dengan ini, kita memiliki semua yang kita butuhkan untuk melanjutkan dan membangun kerangka widget kita seperti yang kita lakukan di React:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Kode ini sangat membingungkan, untuk sedikitnya. Saat ini, kami tidak dapat membedakan lapisan desain. Untungnya, kami dapat dengan mudah menyelesaikan masalah ini melalui penggunaan name milik.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;Dan, tentu saja, kami masih tidak dapat melihat tanda kutip SVG kami, jadi mari kita perbaiki itu. Itu <SVG/> komponen menerima srcproperti yang mengambil kode sumber untuk elemen SVG. Tidak banyak yang bisa dikatakan tentang yang satu ini, jadi mari kita tetap sederhana dan langsung kembali ke kode:
const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
function QuotesWidget() {
return (
<SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
<SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
);
}Saya pikir kita semua bisa setuju bahwa semuanya jauh lebih jelas sekarang! Ketika kita menamai sesuatu, tujuannya tiba-tiba menjadi jauh lebih jelas bagi pembaca kode kita.
Pratinjau widget kami secara real-time
Figma menawarkan pengalaman pengembang yang hebat saat membuat widget, termasuk (namun tidak terbatas pada ) memuat ulang panas. Dengan fitur ini, kami dapat membuat kode dan melihat pratinjau perubahan pada widget kami secara real-time.
Mulailah dengan membuka menu widget (Shift+I), beralih ke tab pengembangan dan mengklik atau menyeret widget baru Anda ke papan. Tidak dapat menemukan widget Anda? Jangan khawatir, cukup klik menu tiga titik dan impor widget Anda manifest.json mengajukan. Ya, hanya itu yang diperlukan untuk menghidupkannya kembali!
Tunggu, apakah Anda mendapatkan pesan kesalahan di bagian bawah layar Anda?
Jika demikian, mari kita selidiki. Klik "Buka konsol” dan membaca apa yang dikatakannya. jika Buka konsol tombol hilang, ada cara alternatif untuk membuka konsol debugging. Klik pada logo Figma, lompat ke kategori widget dan buka menu pengembangan.
Kesalahan itu kemungkinan karena fakta bahwa kami belum mengkompilasi TypeScript kami ke JavaScript. Kita bisa melakukannya di baris perintah dengan menjalankan npm install dan npm run watch. (atau yarn dan yarn watch ). Tidak ada kesalahan kali ini!
Satu lagi kendala yang mungkin Anda hadapi adalah widget gagal untuk merender ulang setiap kali kode diubah. Kami dapat dengan mudah memaksa widget kami untuk memperbarui menggunakan perintah menu konteks berikut: widget → Render widget.
Menata widget
Seperti yang ada saat ini, terlihat widget kami masih cukup jauh dari tujuan akhir kami.
Jadi bagaimana kita menata komponen Figma dari kode? Mungkin dengan CSS seperti yang akan kita lakukan dalam proyek React? Negatif. Dengan widget Figma, semua penataan terjadi melalui serangkaian alat peraga yang terdokumentasi dengan baik. Beruntung bagi kami, barang-barang ini diberi nama hampir identik untuk rekan-rekan mereka di Figma.
Kami akan memulai dengan mengonfigurasi dua kami <AutoLayout /> komponen. Seperti yang Anda lihat di infografis di atas, nama prop cukup deskriptif tentang tujuannya. Ini memudahkan kita untuk langsung masuk ke kode dan mulai membuat beberapa perubahan. Saya tidak akan menampilkan seluruh kode lagi, jadi harap andalkan nama komponen untuk memandu Anda di mana snippet berada.
<AutoLayout
name={"Quote"}
direction={"horizontal"}
verticalAlignItems={"start"}
horizontalAlignItems={"center"}
spacing={54}
padding={{
horizontal: 61,
vertical: 47,
}}
>
<AutoLayout
name={"QuoteContent"}
direction={"vertical"}
verticalAlignItems={"end"}
horizontalAlignItems={"start"}
spacing={10}
padding={{
horizontal: 0,
vertical: 0,
}}
></AutoLayout>
</AutoLayout>;Kami baru saja membuat banyak kemajuan! Mari simpan dan kembali ke Figma untuk melihat tampilan widget kita. Ingat bagaimana Figma memuat ulang widget secara otomatis saat ada perubahan baru?
Tapi itu belum cukup. Kita juga harus menambahkan warna latar belakang ke komponen root:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Sekali lagi, lihat papan Figma Anda dan perhatikan bagaimana perubahan dapat segera direfleksikan kembali ke widget.
Mari ikuti panduan ini dan gaya <Text> komponen.
Setelah melihat file Dokumentasi API Widget, sekali lagi jelas bahwa nama properti hampir identik dengan rekan-rekan mereka di aplikasi Figma, seperti yang dapat dilihat pada infografis di atas. Kami juga akan menggunakan nilai dari bagian terakhir tempat kami memeriksa situs web Chris.
<Text name={'QuoteText'}
fontFamily={'Lora'}
fontSize={36}
width={700}
fill={'#545454'}
fontWeight={'normal'}
>{quote}</Text>
<Text name={'QuoteAuthor'}
fontFamily={'Raleway'}
fontSize={26}
width={700}
fill={'#16B6DF'}
fontWeight={'bold'}
textCase={'upper'}
>— {author}</Text>Menambahkan status ke widget
Widget kami saat ini menampilkan kutipan yang sama, tetapi kami ingin menarik dari seluruh kumpulan kutipan secara acak. Kita harus menambahkan negara ke widget kita, yang diketahui oleh semua pengembang React adalah variabel yang perubahannya memicu rendering ulang komponen kita.
Dengan Figma, negara dibuat dengan useSyncedState kait; itu cukup banyak reaksi useState, tetapi memerlukan pemrogram untuk menentukan kunci unik. Persyaratan ini berasal dari fakta bahwa Figma harus menyinkronkan status widget kami di seluruh semua klien yang mungkin melihat papan desain yang sama, tetapi melalui komputer yang berbeda.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Itu semua perubahan yang kita butuhkan untuk saat ini. Di bagian selanjutnya, kita akan mengetahui cara mengambil data dari Internet. Peringatan Spoiler: tidak sesederhana kelihatannya.
Mengambil data dari jaringan
Ingatlah ketika Figma memberi kami pilihan untuk memulai dengan widget yang mendukung iFrame. Meskipun kami tidak menggunakan opsi itu, kami masih harus menerapkan beberapa fiturnya. Mari saya jelaskan mengapa kita tidak bisa begitu saja menelepon fetch() dalam kode widget kami.
Saat Anda menggunakan widget, Anda menjalankan kode JavaScript di komputer Anda sendiri yang ditulis oleh orang lain. Sementara semua widget ditinjau secara menyeluruh oleh staf Figma, itu masih merupakan lubang keamanan yang sangat besar karena kita semua tahu berapa banyak kerusakan dapat dibuat bahkan oleh satu baris JavaScript.
Akibatnya, Figma tidak bisa begitu saja eval() kode widget apa pun yang ditulis oleh programmer anonim. Singkat cerita, tim memutuskan bahwa solusi terbaik adalah menjalankan kode pihak ketiga di lingkungan kotak pasir yang dijaga ketat. Dan seperti yang Anda duga, API browser tidak tersedia di lingkungan seperti itu.
Tapi jangan khawatir, solusi Figma untuk masalah kedua ini adalah <iframe>s. Setiap kode HTML yang kita tulis dalam sebuah file, sebaiknya disebut ui.html, akan memiliki akses ke semua API browser. Anda mungkin bertanya-tanya bagaimana kami dapat memicu kode ini dari widget, tetapi kami akan memeriksanya nanti. Sekarang, mari kita kembali ke kode:
// manifest.json
{
"ui": "ui.html"
}<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// TODO: fetch data from the server
window.parent.postMessage({
pluginMessage: {
// TODO: return fetched data
}
}, '*')
}
}
</script>Itu template umum untuk widget-to-iframe komunikasi. Mari kita gunakan untuk mengambil data dari server:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// Get random number from 0 to 100
const randomPage = Math.round(Math.random() * 100)
// Get a random quote from the Design Quotes API
const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
const data = await res.json()
// Extract author name and quote content from response
const authorName = data[0].title.rendered
const quoteContent = data[0].yoast_head_json.og_description
window.parent.postMessage({
pluginMessage: {
authorName,
quoteContent
}
}, '*')
}
}
</script>Kami meninggalkan penanganan kesalahan untuk menjaga ini tetap sederhana dan to-the-point. Mari kita kembali ke kode widget dan melihat bagaimana kita mengakses fungsi yang didefinisikan di <iframe>:
function fetchData() {
return new Promise<void>(resolve => {
figma.showUI(__html__, {visible: false})
figma.ui.postMessage({type: 'networkRequest'})
figma.ui.onmessage = async ({authorName, quoteContent}) => {
setAuthor(authorName)
setQuote(quoteContent)
resolve()
}
})
}Seperti yang Anda lihat, pertama-tama kami memberi tahu Figma untuk membuka akses ke perangkat tersembunyi kami <iframe> dan untuk memicu acara dengan nama "networkRequest". Kami menangani acara ini di ui.html file dengan memeriksa event.data.pluginMessage.type === 'networkRequest', dan kemudian memposting data kembali ke widget.
Tapi belum ada yang terjadi ... Kami masih belum memanggil fetchData() fungsi. Jika kita memanggilnya langsung di fungsi komponen, kesalahan berikut terjadi di konsol:
Cannot use showUI during widget rendering.Figma menyuruh kita untuk tidak menelepon showUI langsung di badan fungsi… Jadi, di mana kita harus meletakkannya? Jawabannya adalah satu kait baru dan satu fungsi baru: useEffect dan waitForTask. Anda mungkin sudah terbiasa dengan useEffect jika Anda seorang pengembang Bereaksi, tetapi kami akan menggunakannya di sini untuk mengambil data dari server saat komponen widget dipasang.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Tapi ini akan menghasilkan "kesalahan" lain di mana widget kami akan terus dirender ulang dengan kutipan baru, selamanya. Hal ini terjadi karena useEffect, menurut definisi, memicu lagi setiap kali status widget berubah, tidak saat kita memanggil fetchData. Dan sementara ada tekniknya hanya menelepon useEffect sekali di Bereaksi, itu tidak berfungsi pada implementasi Figma. Dari dokumen Figma:
Karena Cara Widget Berjalan,
useEffectharus menangani dipanggil beberapa kali dengan status yang sama.
Untungnya, ada solusi sederhana yang dapat kita manfaatkan dan hubungi useEffect hanya sekali ketika komponen pertama kali dipasang, dan itu dengan memeriksa apakah nilai status masih kosong atau tidak:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Anda mungkin mengalami hal yang menakutkan”akses memori di luar batas” kesalahan. Dia cukup umum untuk dilihat dalam pengembangan plugin dan widget. Cukup restart Figma dan itu tidak akan ada lagi.
Anda mungkin telah memperhatikan bahwa terkadang, teks kutipan berisi karakter aneh.
Ini adalah Karakter Unicode dan kita harus memformatnya dengan benar dalam kode:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
// ...
const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};
// <https://stackoverflow.com/a/9609450>
var decodeEntities = (function () {
// this prevents any overhead from creating the object each time
var element = document.createElement("div");
function decodeHTMLEntities(str) {
if (str && typeof str === "string") {
// strip script/html tags
str = str.replace(/<script[^>]*>([Ss]*?)</script>/gim, "");
str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
return decodeHTMLEntities;
})();
</script>Dan voilà, widget kami mengambil kutipan desain baru setiap kali ditambahkan ke papan desain.
Menambahkan menu properti ke widget kami
Sementara widget kita mengambil kutipan baru saat instantiasi, akan jauh lebih praktis jika kita bisa melakukan proses ini lagi tapi tanpa menghapusnya. Bagian ini akan singkat karena solusinya cukup luar biasa. Dengan menu properti, kita dapat menambahkan interaktivitas ke widget kita dengan satu panggilan ke usePropertyMenu menghubungkan.
const { usePropertyMenu } = widget;
function QuotesWidget() {
usePropertyMenu(
[
{
itemType: "action",
propertyName: "generate",
tooltip: "Generate",
icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<!-- Shortened for brevity -->
</svg>`,
},
],
() => fetchData()
);
}Dengan satu kait sederhana, kami dapat membuat tombol yang muncul di dekat widget kami saat dipilih. Itu adalah bagian terakhir yang perlu kami tambahkan untuk menyelesaikan proyek ini.
Memublikasikan widget kami ke publik
Tidak banyak gunanya membuat widget jika, yah, tidak ada seorang pun kegunaan dia. Dan sementara Figma memberi organisasi opsi untuk meluncurkan swasta widget untuk penggunaan internal, jauh lebih umum untuk merilis program kecil ini ke dunia.
Figma memiliki proses peninjauan widget yang rumit yang dapat memakan waktu hingga 5 hingga 10 hari kerja. Dan sementara widget kutipan desain yang kami buat bersama adalah sudah ada di perpustakaan widget, saya masih akan menunjukkan bagaimana itu sampai di sana. Harap jangan mencoba untuk memublikasikan ulang widget ini lagi karena itu hanya akan mengakibatkan penghapusan. Tetapi jika Anda memberikan beberapa perubahan signifikan, lanjutkan dan bagikan widget Anda sendiri dengan komunitas!
Mulailah dengan mengklik menu widget (Shift+I) dan beralih ke Pengembangan tab untuk melihat widget kami. Klik pada menu tiga titik dan tekan Menerbitkan.
Figma akan meminta Anda untuk memasukkan beberapa detail tentang widget Anda, seperti judul, deskripsi, dan beberapa tag. Kami juga membutuhkan gambar ikon 128x128 dan gambar spanduk 1920x960.
Setelah mengimpor semua aset ini, kami masih membutuhkan tangkapan layar widget kami. Tutup modal penerbitan (jangan khawatir, Anda tidak akan kehilangan data Anda) dan klik kanan pada widget untuk membuka menu konteks yang menarik. Temukan Salin/Tempel sebagaikategori dan pilih Salin sebagai PNG.
Setelah itu selesai, mari kembali ke modal penerbitan dan tempel tangkapan layar widget:
Gulir ke bawah dan akhirnya publikasikan modal Anda. Merayakan!
Figma akan menghubungi Anda dalam beberapa hari tentang status tinjauan modal Anda. Dalam kasus penolakan, Anda akan diberikan kesempatan untuk membuat perubahan dan mengirimkan lagi.
Kesimpulan
Kami baru saja membuat widget Figma dari awal! Ada banyak hal yang tidak tercakup di sini, seperti klik acara, formulir masukan, dan lebih banyak. Anda dapat menggali kode sumber lengkap untuk widget di repo GitHub ini.
Bagi mereka yang bercita-cita untuk membawa keterampilan Figma mereka ke tingkat yang lebih tinggi, saya sarankan menjelajahi komunitas Widget dan menggunakan apa yang menarik perhatian Anda sebagai inspirasi. Terus buat lebih banyak widget, terus pertajam keterampilan Bereaksi Anda, dan bahkan sebelum Anda menyadarinya, Anda akan mengajari saya cara melakukan semua ini.
Sumber daya lebih lanjut
Saya harus merujuk ke banyak dokumentasi saat saya membuat widget ini. Saya pikir saya akan membagikan apa yang menurut saya paling membantu.
