Deprecated: version_compare(): Passing null to parameter #2 ($version2) of type string is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/elementor-addon-widgets/vendor/codeinwp/themeisle-sdk/load.php on line 23

Deprecated: version_compare(): Passing null to parameter #2 ($version2) of type string is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/elementor-addon-widgets/vendor/codeinwp/themeisle-sdk/load.php on line 28

Deprecated: Creation of dynamic property UCFE_Elementor::$prefix is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/ultimate-carousel-for-elementor/classes/ma-elementor.php on line 36

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 207

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 208

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 209

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 254

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 2215

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 2216

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 2219

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 2221

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 258

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 259

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 269

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 270

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 273

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 275

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 276

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 277

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 278

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 279

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 280

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 281

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 282

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 283

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/vi/vi_actions.php on line 2

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/vi/vi_actions.php on line 3

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/vi/vi_actions.php on line 4

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/vi/vi_actions.php on line 5

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/vi/vi_actions.php on line 7

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/vi/vi_actions.php on line 8

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/vi/vi_actions.php on line 15

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/gutenberg/gutenberg_hooks.php on line 7

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/gutenberg/gutenberg_hooks.php on line 9

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/gutenberg/gutenberg_hooks.php on line 11

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/includes/gutenberg/gutenberg_hooks.php on line 13

Deprecated: Automatic conversion of false to array is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/wp-image-zoooom/includes/class-iz-compatibilities.php on line 197

Deprecated: Creation of dynamic property Elementor\Plugin::$icons_manager is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/elementor/includes/plugin.php on line 587

Deprecated: Creation of dynamic property ThemeisleSDK\Product::$author_url is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/elementor-addon-widgets/vendor/codeinwp/themeisle-sdk/src/Product.php on line 185

Deprecated: Creation of dynamic property ThemeisleSDK\Product::$author_url is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/elementor-addon-widgets/vendor/codeinwp/themeisle-sdk/src/Product.php on line 185

Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 8724

Deprecated: Automatic conversion of false to array is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/wp-image-zoooom/image-zoooom.php on line 441
July 3, 2023 – Himpunan Mahasiswa Sistem Informasi ITS
Deprecated: Automatic conversion of false to array is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/wp-image-zoooom/image-zoooom.php on line 441

Deprecated: Automatic conversion of false to array is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/wp-image-zoooom/includes/class-iz-compatibilities.php on line 34

Dev Mode Figma, Bantu Optimalisasi Kerja Developer


Deprecated: Calling get_class() without arguments is deprecated in /home2/hmsi/public_html/hmsi/wp-content/plugins/youtube-embed-plus/youtube.php on line 2315
(sumber: https://www.figma.com)

Figma merupakan salah satu tools desain grafis yang cukup sering digunakan di kalangan mahasiswa. Sebagai mahasiswa Departemen Sistem Informasi (DSI), tentunya kita sangat familiar dengan Figma. Mata kuliah Rekayasa Kebutuhan Perangkat Lunak dan Desain Pengalaman Pengguna merupakan beberapa mata kuliah di DSI yang memanfaatkan Figma untuk menunjang pembelajaran di kelas, yakni dengan membuat desain UI/UX (User Interface/User Experience) dari aplikasi yang kita rancang. Selain mudah digunakan, Figma juga memberikan akses secara gratis untuk penggunanya. Beberapa waktu yang lalu, Figma secara resmi meluncurkan beberapa fitur terbaru mereka, dan salah satu inovasi mereka dirasa sangat menarik perhatian bagi komunitas IT yakni adanya fitur Dev Mode. Fitur ini bertujuan untuk membantu pengembang dalam menerjemahkan desain yang berbentuk grafis ke kumpulan barisan kode fungsional dengan cepat. Hal ini tentunya sangat mempermudah developer dalam melakukan pekerjaannya.

Dari survei yang telah dilakukan oleh Figma, jumlah pengguna yang memiliki latar belakang  developer lebih banyak daripada pengguna yang bertujuan untuk desain semata. Hal ini lah yang mendasari peluncuran Fitur Dev Mode. Sebagai Developer Front-end maupun Full Stack, seringkali kita mengalami kesulitan untuk mentranslasikan desain yang telah dibuat oleh UI/UX menjadi kode yang fungsional. Fitur Dev Mode akan membantu developer untuk mendapatkan code sesuai desain yang diinginkan.

(sumber: https://www.animaapp.com)

Penggunaan

Cara penggunaan fitur ini cukup mudah. Kita hanya perlu melakukan beberapa setting, seperti bahasa pemrograman yang digunakan, jenis hardware yang digunakan, dan melakukan koneksi dengan VSC, GitHub, Anima, Jira, maupun teks editor lain. Setelah melakukan pengaturan awal, kita hanya perlu memilih desain yang kita inginkan. Secara otomatis rincian code dari desain tersebut akan muncul. Tidak hanya itu, semua aset yang kita gunakan di Figma akan muncul dan dapat kita download. Di samping itu, Figma juga menyediakan extension untuk Visual Studio Code, yang tentunya sangat berguna bagi developer. 

Meskipun telah melakukan setting di awal, kita masih bisa mengubah spesifikasi yang diinginkan, seperti bahasa pemrograman dan koneksi ke teks editor. Tidak perlu khawatir, Fitur Dev Mode ini tidak akan mengubah desain yang telah dibuat sebelumnya. Selain itu, kita juga bisa menonaktifkan fitur ini, sehingga bisa beralih untuk pembuatan desain lagi.

Fitur Dev Mode dan Figma untuk Visual Studio Code tersedia dalam versi beta dan gratis untuk semua pengguna selama sisa tahun 2023. Tetapi mulai tahun 2024, kita memerlukan paket berbayar untuk mengakses Fitur Dev Mode. Terdapat dua opsi paket berbayar, yaitu untuk organisasi sebesar $25/bulan dan untuk perusahaan sebesar $35/bulan. Oleh karena itu, selagi fitur ini bisa diakses secara gratis, yuk kita coba pelajari dan explore salah satu fitur powerful terbaru dari Figma ini!

Penulis: Melatie Raghyl Putri

Editor: Abraham Mauritz Talakua, Ellion Blessan, I Kadek Wahyu Dwi Pranatasana

Referensi:

https://www.figma.com/dev-mode/

https://www.figma.com/blog/introducing-dev-mode/