 Terima kasih. Terima kasih, Tuna. Helo. Hai, hai. Helo. Tengoklah, bagi staf saya. Okey? Tunggu, dari... Tunggu. Okey, jadi seperti yang anda boleh... Tunggu, nama saya Sheldon. Saya bekerja di SP Digital. Jadi, saya melakukannya secara lucu. Dan hari ini, saya beritahu, ia beritahu tentang tukar desain. Jadi, sesiapa tahu apa tukar desain? sesiapa dengar tentangnya? Sudah tentu. Tak ada apa-apa? Tak ada. Okey, jadi saya fikir, bermaksud yang pertama saya adalah, apa tukar desain? Tunggu, saya ada sesuatu. Hai, sayang. Hai, sayang. Tunggu. Tunggu. Tunggu. Okey, di sini. Jadi, apa tukar desain? Tunggu. Jadi, mari saya mula bersamanya dengan sesuatu yang lebih berguna dengan... Kita buat lebih berguna dengan sesuatu yang lain dengan sesuatu yang lain. Jadi, apabila saya kata sesuatu yang ada di sini saya beritahu tentang sesiapa yang ada disangkauan persihatan. Jadi, sesuatu yang ada disangkauan, sesuatu yang belum berbagi, apa-apa pun yang ada percayaan anda tapi untuk keadaan saya, saya akan menggunakan sesuatu yang lainnya. Jadi, sesuatu yang ada disangkauan, bila anda tahu apa-apa, pada masa kepada ia siap sesuatu, tidak ada kuspunan, anda membunyikan valis persihatan yang memasak, yang anda boleh menggunakan nanti. Jadi, kita akan bercakap tentang perkara projek yang biasa dengan ini. Jadi, desainer terbincang membuat mock-up di sketch atau Figma. Ini menggunakan mock-up untuk defini pembangunan. Dan defini pembangunan. Jika anda beruntung, sketch sudah ada. Desainer telah membuat sebuah pakaian yang berbeda. Dengan semua pakaian, semua pakaian yang digunakan untuk anda. Jadi, jika anda beruntung, anda boleh mendapat pakaian dari sana. Jika tidak, anda perlu memperbaiki semua pakaian yang berbeza. Memandangkan apa pakaian yang digunakan untuk digunakan. Dan membuat mereka menjadi pakaian yang berbeda seperti ini. Jika anda dapat pakaian yang berbeda dengan semua pakaian yang anda gunakan. Dan desainer. Jadi, pakaian terbincang dan membuat pakaian dari web atau aplikasi. Desainer menggantikan pakaian yang telah digunakan dengan melihat pakaian yang telah digunakan dalam pakaian yang selesai atau sesuatu seperti itu. Dan jika sesuatu berubah, yang biasanya, apa yang desainer melakukan adalah memintangkan pakaian yang digunakan, mengemaskan pakaian kembaraan pakaian kembaraan yang terakhir lagi dan pakaian yang stabil dan memotong pakaian yang digunakan dalam pakaian yang telah digunakan. Dan setelah itu, desainer mengawasi pakaian yang telah digunakan dengan melihat pakaian yang telah digunakan. Jadi, ada beberapa pakaian dengan proses ini. Jadi, anda boleh mampu jika anda dalam masalah web dengan teknologi multiple, jadi, anda menggunakan CSS dan CSS pada masa yang sama. Jadi saya rasa ini tidak betul-betul tidak terjadi dengan tersebut. Jadi anda boleh mempunyai jika dengan sebuah kebanyakan yang besar, teman anda menggunakan SCSS, dan teman lain menggunakan lebih atau tidak, hanya SCSS, kelasan kelasan, dan mereka berkongsi sebuah klihat yang semua orang perlu gunakan. Jadi sekarang anda tidak akan mencuba anda akan menggunakan berdua pada masa yang sama dan variable hanya di dalam dua file yang berbeza. Dan jpd jpd, jadi anda boleh mempunyai jika anda mempunyai reaksi atau sesuatu, anda menggunakan SVGs di reaksi anda. Dan anda ingin menggunakan kelasan di dalam kelasan kelasan. Sekarang kelasan ini digunakan di sebuah klihat jpd, anda tidak dapat menggunakan kelasan. Jadi apa yang berlaku? Dan kelasan mengubah kelasan di sebuah klihat jpd di sebuah klihat jpd. Jadi sekarang anda mempunyai klihat jpd di sebuah klihat jpd, dan mungkin anda berfikir seperti, ini adalah kelasan kelasan kelasan kelasan kelasan, mungkin itu tidak benar-benar. Apabila anda mempunyai kelasan kelasan kelasan kelasan, dan kelasan ada web, ada iOS apps, ada Android apps. Dan tentu saja, anda ingin kelasan untuk menjadi konsistensi dari semua platform. Saya tidak mempunyai kelasan kelasan kelasan kelasan, jadi saya tidak tahu apa yang berlaku dengan file ini. Tapi saya tahu kelasan yang cukup, saya rasa mereka mempunyai kelasan yang sama, kelasan yang sama, apabila kelasan digunakan di sebuah klihat jpd. Jadi sekarang anda akan mempunyai kelasan kelasan lagi. Jadi ini adalah keadaan kelasan kelasan yang tidak dapat digunakan. Jadi saya cuba mencari kelasan kelasan yang paling kelasan untuk kelasan kelasan. Dan saya menemukan ini di Firefox dan ada sistem kelasan foto. Jadi, ia berkata kelasan kelasan adalah kelasan kelasan kelasan, seperti kelasan, kelasan, etc. Dan kelasan ini adalah aplikasi kelasan kelasan. Dan apabila kelasan terdapat, ia boleh digunakan di sebuah platform. Jadi saya hanya memaksa kelasan kelasan kelasan kelasan kelasan. Jadi ia berkata kelasan dengan perlukan. Tapi jadi anda mempunyai kelasan kelasan. Bukan kata-kata dengan sebuah langit. Bukan kelasan kelasan di sebuah file atau file kelasan kelasan. Tapi dalam format kelasan kelasan lebih kelasan. Jadi, seperti jason atau yaml. Dan ini seperti, ia merupakan sebuah sebuah sebuah kelasan. Ini sebuah file boleh digunakan dan mengubah kelasan kelasan yang berbeda, seperti kelasan kelasan, kelasan kelasan kelasan, kelasan kelasan, dan itu membuatnya lebih mudah untuk menjelaskan kelasan kelasan kelasan untuk UI, UI kelasan, di sekitar platform-platform. Jadi kelasan kelasan adalah sebuah kelasan, bukan? Dan saya rasa lebih penting, ia membuat kelasan terdapat antara kelasan dan kelasan. Jadi ia berada di ruang kelasan dan kelasan. Jadi ia merupakan kelasan kelasan yang berkata-kata. Ia mempromosikan kelasan kelasan. Jadi kelasan dan kelasan, mereka melihat dokumen yang sama. Mereka tahu apa yang mereka bercakap tentang. Mereka berkata-kata yang sama. Dan menjadi format yang berbeza, tidak seperti CSS atau segala-galanya, seperti YAMO. Ia adalah sebuah format yang lebih biasa dan lebih adil untuk kelasan kelasan. Jadi ia mempunyai kelasan kelasan untuk mempercayai dengan kode. Dan akhirnya, ia memiliki idea ini untuk dokumen hidup. Kerana ia adalah sebuah kelasan. Dan jika anda berubah, idea itu adalah bahawa anda dapat mempercayai kelasan kelasan ini sehingga kelasan lain. Anda dapat mempercayai kelasan ini. Jadi ia merupakan mempercayai kode dan mempercayai kelasan kelasan kelasan. Dan ia adalah seperti kelasan kelasan yang sangat teruk dan teruk. Jadi seperti yang anda nampak, jika anda bekerja di sistem desain, atau jika anda bekerja di segala-galanya kelasan di mana ui telah diberkati, dan semua orang menggunakan ini untuk kelasan konsisten ui. Kemudian, SENToken membuat kelasan yang sangat berguna. Memang menggunakan kelasan itu. Jadi, saya mahu berubah sedikit. Saya mahu bercakap tentang bagaimana saya mempercayai kelasan ini. Jadi, kita tidak akan mempercayai kelasan sehingga apa yang saya lakukan pada SPS Digital. Jadi, kita mempunyai kelasan di rumah dan ia menggunakan SESS. Dan projek lain sudah menerima kelasan ini dari kelasan ini. Tetapi saya mahu mempercayai kelasan kelasan kelasan untuk kelasan lain. Jadi, saya perlu membuat kelasan yang lebih teruk. Saya tidak berharap semua orang hanya mempercayai kelasan yang lebih teruk. Jadi, saya sudah tahu saya perlu mempunyai kelasan SPS dan SPS. Pada masa yang sama, kelasan SPS dan SPS telah mempercayai kelasan yang lebih teruk untuk mengubah kelasan ini. Seperti yang saya beritahu tadi, kelasan SPS telah mempercayai kelasan SPS sebab hanya lebih mudah memasak kelasan SPS lebih daripada mencari kelasan SPS. Dan juga, kelasan SPS yang lebih berguna untuk menggunakan kelasan yang lebih teruk daripada kelasan SPS Sebenarnya, pada saat ini, saya tidak peduli tentang kelasan yang lebih teruk. Saya hanya peduli tentang kelasan SPS sebab saya melakukan kelasan SPS. Dan cara saya cuba mencari kelasan itu adalah saya melihat kelasan SPS dan saya melihat saya mencari kelasan SPS yang Zendes menggunakan. Jadi, Zendes mempunyai kelasan SPS yang dibuat oleh kelasan SPS dan mereka menggunakan kelasan SPS untuk membuat sesuatu yang sama. Jadi, kelasan SPS, saya rasa kita mempunyai kelasan SPS sebelum kita, terutamanya, dalam kelasan SPS dengan kelasan SPS atau GALP atau Roll Up. Jadi, apa yang kita buat adalah kita membuat kelasan SPS dan meletakkan kelasan SPS dan ia berhasil. Ia meletakkan kelasan SPS dan ia dibuat bersama. Jadi, anda tahu sebuah kelasan SPS di api? Ya, saya rasa ini hanya menarik jika anda membuat kelasan SPS kelasan SPS. Saya rasa yang terkenal kita tidak membuat begitu. Kelasan SPS sebenarnya anda boleh menghentikan kelasan SPS dan menghargai kelasan SPS. Jadi, ia menjadi kelasan SPS kelasan SPS kelasan SPS Kami mempunyai struktur ini dan mengubah kemahiran. Jadi apa yang Zendes melakukan? Mereka mempunyai banyak file JS dengan pilihan yang berlainan. Yang penting adalah file JS, index.js. Mereka mahu menggunakan proses ini. Mereka menggunakan proses CSS dan proses. Mereka menghasilkan CSS, CSS, CSS, semuanya dari sana. Jadi saya cuba mempunyai kode mereka. Saya bukan mempunyai kode tapi mempunyai kode. Mereka mempunyai kode atau sesuatu. Jadi ini adalah pilihan yang penting. Pilihan yang penting adalah CSS. Itu seperti pilihan yang mereka menunjukkan pada awal. Jadi anda boleh mengingatkan. Pilihan yang penting adalah pilihan yang akan digunakan. Jadi pilihan CSS. Sebenarnya, sebab pilihan CSS mengubah CSS. Jadi apa yang mereka lakukan adalah membutuhkan javascript. Kemudian dalam proses separat, mereka mengubah ke variables CSS. Seperti proses CSS. Dan pilihan CSS itu akan berlaku pada awal. Dan ia sebenarnya seperti janji. Jadi anda dapatkan pilihan kembali. Jadi ini adalah pilihan pilihan itu. Jadi ini adalah pilihan yang mereka mencuba. Jadi jas, jason, CSS. Pilihan yang penting adalah di sini. Jadi ini adalah pilihan pilihan. Jadi sebenarnya anda boleh memanjakan pilihan CSS dengan javascript. Jadi pilihan yang sebenarnya... ...sampai pilihan itu adalah pilihan ini. Dan banyak pilihan itu mengambil pilihan yang berbeza. Dan dalam pilihan yang berbeza, anda boleh memasukkan kemahiran. Jadi kemahiran adalah seperti satu pilihan yang berbila. Yang penting adalah pilihan yang penting. You get declaration.prob, which is this, and declaration.value, which is this. That's when they do the transformation. So, with the chemical case, they follow JS, and for the JSON, and for SCSS, you can see there's an extra dollar sign here for the SCSS variable. So, what they get from there is... This is below that next section. So, they create a disorder, they concatenate all the strings, and they write it to the files. So, you get from this, you get this. And I can just show you what happens next. It's basically what happens after all that processing. So, they have all the variables in all the different formats. So, I tried doing that for my own project, and it worked a bit, it worked well enough, but it's kind of tedious and error-prone, and it feels hacky, right? Because there should be a better way to automate all these things, right? So, this was supposed to be my talk for today. Then, last week, I was talking around, then I discovered this thing. Style Dictionary by Amazon. So, actually, I'm just going to show you the webpage for this. So, this is a problem that they have kind of addressed. So, this is a tool that you start with, oops, where is it? You can install it as a node module. And you have properties in JSON format. You have a config file somewhere, config.json, and then you can transform all this into whatever target that you want. So, Android, SCSS, or iOS. So, I'm just going to do a quick live copy and paste demo. Ya, of course. This is still new to me. Well, actually, I should delete this. So, this is a blank project. And I'm starting with a variable. So, what I do is I create a properties folder, and I call it color. And I create a base.json. And I'm just going to copy and paste the things I have already. So, just some gray light, medium dark, and stuff like that. To start converting this, I need a config.json. And ya, to start with, I just want to convert it into SCSS. And when I run it, run the build command and it outputs. Tada! So, this color base gray comes from this property hierarchy that you created here. So, color base gray. So, let's say I want Android now, right? I have an Android config that I just copy and pasted. Ya, as you can see, so the way it works is SCSS here. Android here. Ya, we didn't need configuration. You can set the build path. The path you want it output. So, I actually only have colors now, no forms yet. So, I'm just going to do this. Then from build again. What do I do? Oh, comma. And I don't know Android, but apparently, this is how it looks like in Android. And iOS has even a bigger chunk. So, I'm just going to try it. iOS has a lot of stuff. Actually, I've got some font sizes here so I didn't really build it. But, let me just get it. So, let's say I want font sizes here. Size, font size, json. Ya, just... So, in SCSS, this is going to be RAM. And if I just do everything, iOS has all that random things that I don't know whether it's correct or not. But, that's the way it is. Fonts here. Ya, I miss out the Android configuration for sizes. Ya, so, this problem has been solved. Don't try to do the Zendes method. Oops. Ya, ya. Ya, so it's called Style Dictionary by Amazon. So, it's legit. Ya, I don't... I think you'll only probably do this if you're doing design systems or style guides. So, ya, actually, this is most obvious. I don't have a summary slide, but... Ya, zandokans. Good for scaling, across two platforms. And use Style Dictionary. Ya, that's it. Any questions? Operator model, right? Ya. I got it from somebody. Oh, it's in this room. I'm just wondering if you paid $200. Ya, I understand that pay. But I know, ya. Thank you, thank you.