Tips All

Hello people with the spirit of learning! Banyak objek yang dapat kita buat dengan menggunakan software Blender. Dan jika kita masih pemula, Coin adalah salah satu objek yang paling mudah untuk dibuat dan memiliki beberapa komponen yang bisa kita pelajari sekaligus. Nah, untuk membuatnya, kita hanya perlu menyiapkan objek Cylinder dan objek Text. Dan untuk langkah-langkahnya adalah sebagai berikut: Step 1: Menambahkan Objek Cylinder Buka Software Blendernya, dan hapus objek Cube yang ada pada tampilan awal Blender dengan menekan “X” dan pilih DeleteSetelah itu kita bisa tekan “Shift + A”, kemudian pilih “Mesh” dan kita pilih “Cylinder” Step 2: Membuat Base Objek Coin  Kita bisa pipihkan objek Cylinder tersebut dengan menekan “S” dan “Z” dan kita arahkan cursornya kedalam objek Cylinder untuk mengubah skalanya ke sumbu Z atau verticalKemudian kita bisa masuk ke “Edit Mode” dengan menekan “Tab” pada KeyboardSelanjutnya kita seleksi Face yang ada di bagian atas dan bagian bawah objek Coinnya dengan menggunakan “Face Select” yang ada pada samping menu Edit ModeKalau sudah, kita tekan “i” untuk “Inset Face” dan kita tarik kedalam (Lebarnya bisa dilihat di contoh gambar)Setelah itu kita akan Extrude kedalam dengan menekan “E” “S” dan “Z” dan kita tarik kedalam untuk menambahkan segment kedalam objek coinnya. (Bisa dilihat di contoh gambar) Step 3: Menambahkan Bevel pada Objek Coin Sebelum menambahkan Bevel, kita akan masuk dulu ke Object Mode atau tekan “Tab”Dan kita tekan “Ctrl + A” kemudian pilih “Scale” untuk meng-Apply Objek Coinnya Kemudian kita masuk ke Edit Mode lagi dengan menekan “Tab”Kita bisa seleksi setiap garis melingkar pada objek Coin dengan seleksi garis atau “Edge Select”Kemudian kita tekan “Ctrl + B” dan Scroll ke atas, dan kita tambahkan kurang lebih 3 atau 4 garis Step 4: Menambahkan Modifier Subdivision Surface Kita bisa masuk ke area Properties yang ada di bagian kanan, dan kita pilih icon bergambar kunci inggris atau “Modifier Properties”Kemudian kita klik “Add Modifier” dan pilih “Subdivision Surface”Kalau sudah, kita akan masuk lagi ke Objek Mode dengan menekan “Tab” Setelah itu kita tekan “W” dan pilih “Shade Smooth” Step 5: Menambahkan Object Text Tekan “Shift + A” dan pilih “Text”Kemudian masuk ke Edit Mode atau “Tab” dan ketikkan “$” atau dollar Kalau sudah, kita masuk lagi ke Objek Mode atatu tekan “Tab”Setelah itu letakkan posisi text “$” di tengah objek Coin dengan menekan angka “7” untuk melihat view dari arah atasDan tekan “G” untuk memindahkan posisinya, dan juga “S” untuk mengubah skalanya. Step 6: Finishing Setelah selesai menambahkan Text, kita akan Extrude objek Textnya agar memiliki tinggi yang sama dengan objek Coinnya. Kita akan masuk ke “Object Data Properties” atau icon yang bergambar huruf ”a”Kemudian pilih “Geometry” dan tambahkan 0.1m pada bagian “Extrude” Oiya, jumlahnya bisa berbeda, jika size objek yang kita buat juga berbeda, jadi sesuaikan saja tingginya dengan objek Coinnya. Dannn akhirnya selesai! Itu tadi adalah cara simple untuk membuat objek Coin. Temen-temen tinggal tambahkan material dan lighting, agar objek coinnya jadi lebih realistis (untuk dasarnya bisa dilihat di kelas gratisnya buildwithangga) Oiya, materi ini juga ada pada kelas Mastering Blender 3D: Design Icon Set, disitu saya jelaskan secara detail, dan juga ada beberapa tambahan yang buat objek 3D nya menjadi lebih menarik dan enak untuk di lihat. Dan yang lebih penting, di kelas itu juga saya ajarkan bagaimana cara menyiapkan objek 3D yang siap digunakan dan siap untuk dijual! Sekian Tips kali ini, semoga bermanfaat, dan Selamat Belajar!

Hello people with the spirit of learning! Ketika membangun suatu aplikasi/website maka tahap utama yang perlu dilakukan adalah merancang alurnya/user flow.  User flow adalah kumpulan langkah-langkah yang harus dilakukan oleh user saat menggunakan suatu produk untuk menyelesaikan suatu tugas tertentu. Pada tips kali ini kita akan membuat user flow dengan tugas memesan ojek online. tools yang akan kita gunakan yaitu Whimsical yang bisa kalian akses melalui website https://whimsical.com. Oke langsung aja kita mulai. Step 1 :  Menentukan Study Case Disini kita akan merancang user flow untuk fitur memesan ojek online. berikut adalah langkah-langkah untuk membuat user flow : Menentukan kebutuhan userMembuat langkah-langkah yang dilakukan userMembuat User Flow Step 2 :  Menentukan Kebutuhan User Untuk menentukan kebutuhan user biasanya kita dapat melakukan riset untuk memahami lebih dalam apa yang user butuhkan dan harapkan. Contoh nya sepeti ini:  Sebagai user, saya dapat mengetahui lokasi driver ojek terdekatSebagai user saya dapat menentukan kemana saya ingin pergiSebagai user, saya dapat menentukan dimana saya ingin dijemput Step 3 : Membuat Langkah-langkah yang dilakukan user Langkah 1 : User membuka aplikasiLangkah 2 : User menentukan lokasi kemana dia ingin pergiLangkah 3 : User menentukan lokasi penjemputanLangkah 4 : User order ojek Step 4 : Membuat User Flow Menggunakan Whimsical Pertama buka website https://whimsical.com/, kemudian daftar atau login. Step 5 : Buat Project Flowchart Setelah daftar, kemudian buat project baru, lalu pilih menu +Flowchart Step 6 : Membuat Shape Baru Berikutnya, untuk membuat sebuah shape baru, kalian bisa menekan S pada keyboard, atau pilih menu Add Shape lalu pilih shape yang ingin kalian pakai. Step 7 : Membuat User Flow Untuk menambahkan shape, kalian dapat memilih menu Add Shape lalu pilih element yang ingin digunakan seperti Rectangle, Oval, atau yang lainnya namun harus kita sesuaikan bedasarkan fungsinya. Fungsi Simbol-simbol dalam Flowchart Step 8 Finishing User Flow Setelah itu, kalian bisa lanjut mebuat user flow hingga selesai seperti gambar diatas.  Dan kalian telah menyelesaikan sebuah user flow yang akan diubah menjadi wireframe pada tahap design berikutnya. Nah, Sekarang kalian sudah paham kan? Jika masih kesulitan kalian bisa tulis pertanyaan di DM Instagram saya @fransfeby.  Jika kalian ingin mempelajari user flow lebih lanjut, kalian bisa mengikuti kelas UI/UX Design: Gestalt Principle. Terimakasih sudah membaca artikel ini. Semoga bermanfaat. :))

Hello people with the spirit of learning. Pada pembahasan kali ini, kita akan membahas tentang bagaimana membuat form sederhana pada projek Flutter yang sedang kita buat dengan menggunakan widget TextFormField. Step 1: Menambahkan widget TextFormField TextFormField( decoration: InputDecoration( labelText: 'Name *', ), ), Menambahkan widget TextFormField paling dasar dengan cara seperti di atas. Ohya, untuk dapat melihat widget-widget pada Flutter, kalian bisa cek di Flutter Material Library ya.Jika sudah, tampilan form akan terlihat seperti gambar di atas. Step 2: Memberi border pada form TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Menambahkan widget enableborder: OutlineInputBorder pada widget TextFormField yang sudah dibuat.Jika sudah makan tampilan form akan terlihat seperti gambar di atas. Step 3: Menambahkan focusedborder TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Berbeda dengan enabledborder yang sudah kita buat di atas. Focusedborder berfungsi untuk memberikan border pada form jika border sedang di klik atau jika akan sedang diisi(aktif). Step 4: Menambahkan warna pada form TextFormField( decoration: InputDecoration( fillColor: Color(0xffF1F0F5), filled: true, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), Untuk lebih mempercantik tampilan form, kita juga dapat menambahkan warna dengan cara menambahkan fillcolor seperti contoh di atas yah. Oh ya! untuk menambahkan field form yang lain kamu tinggal menambahkan widget TextFormField lagi sesuai dengan step-step di atas. Complete Code: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 120, left: 24, right: 24), child: Center( child: Column( children: [ Text( 'Welcome Back', style: TextStyle(fontSize: 20), ), SizedBox(height: 20), Column( children: [ TextFormField( decoration: InputDecoration( fillColor: Color(0xffF1F0F5), filled: true, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: BorderSide(), ), labelText: 'Name *', ), ), ], ) ], ), ), ), ), ); } } Selesai! Sekarang kamu udah bisa nih membuat form pada projek Flutter mu. Oh iya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Hello people with the spirit of learning! Tentunya sebagai web developer yang baik, kita harus belajar bagaimana membuat aplikasi yang baik dan menggunakan teknologi terbaru, salah satunya adalah aplikasi berbasis Single Page Apps (SPA). Namun banyaknya tools atau framework yang dapat kita gunakan, terkadang membuat kita sebagai developer menjadi bingung dan pusing, terlebih lagi kebanyakan dari tools yang digunakan memerlukan waktu untuk dapat kita pahami. Tentunya, tools atau framework yang mudah digunakan dan cepat dapat membantu kita dalam membuat aplikasi. Salah satunya adalah menggunakan framework VueJS. VueJS menjadi suatu solusi framework untuk teman-teman yang sedang membangun aplikasi website berbasis SPA. VueJS memudahkan kita untuk membuat aplikasi dengan konsep yang mudah dipahami oleh Developer, terutama teman-teman yang sudah menguasai HTML, CSS dan Javascript. VueJS pun menjadi salah satu framework yang ringan yang dapat kamu gunakan di browser-browser modern manapun, tentunya ini akan memudahkan kamu untuk menjangkau pengguna tanpa harus memikirkan apakah aplikasi kalian berjalan di browser tertentu atau tidak. Sebelum mempelajari tutorial ini, alangkah lebih baiknya jika kalian memahami terlebih dahulu dasar HTML, CSS dan Javascript. Kalian bisa pelajari materi-nya di kelas Starter BuildWith Angga yang dapat kamu kunjungi di tautan ini. Mempersiapkan Tools Sebelum kita dapat membuat aplikasi VueJS kita, langkah awal yang harus kita lakukan adalah mempersiapkan tools. Ada dua cara yang dapat kamu gunakan, menggunakan code editor online atau memasang tools di komputer masing-masing. Untuk tips kali ini, cara yang akan kita gunakan yaitu menggunakan code editor online untuk memudahkan teman-teman membuat aplikasi. Code Editor yang akan kita gunakan yaitu CodeSandbox. Memasang Framework VueJS Untuk dapat memasang framework VueJS di CodeSandbox, kalian dapat membuat Sandbox dengan menekan tombol Create Sandbox yang terletak di pojok kanan atas. Setelah itu, maka akan muncul halaman welcome. Kalian dapat klik tombol Create Sandbox untuk melanjutkan dan memilih framework Vue. Jika sudah, maka halaman Code Editor yang sudah terpasang VueJS dapat kamu gunakan. Yay! Memahami Struktur Project Dalam aplikasi VueJS, ada beberapa aturan dasar yang perlu kamu pahami, salah satunya adalah struktur direktori dari project VueJS. Struktur folder ini merupakan pondasi dasar dari aplikasi kalian, dan dapat dikustomisasi tergantung dari kebutuhan kalian. Komponen utama dari sebuah aplikasi VueJS adalah file main.js yang berisi inisialisasi aplikasi. Secara default, aplikasi VueJS berada di file App.vue Pada file App.vue, terdapat kode aplikasi kita yang dapat kita gunakan dalam membuat aplikasi. Setiap file Vue akan memiliki 3 struktur utama, yaitu template, script, dan style. Aplikasi yang kita buat pun dapat kita bagi lagi ke file yang berbeda dengan menggunakan components. Hal ini akan sangat membantu kalian terlebih jika kalian membuat aplikasi kompleks yang membutuhkan kode yang banyak, tentunya components ini akan membantu kalian. Contoh component yang dapat kamu gunakan pada project ini yaitu component HelloWorld Membuat Kalkulator Sederhana Tentunya teman-teman ingin tahu bagaimana cara membuat aplikasi pada VueJS. Pada kali ini kita akan mencoba membuat kalkulator sederhana, yang akan menghitung angka dari variable yang sudah kita tentukan sebelumnya. Berikut dibawah ini merupakan aplikasi yang akan kita buat. Pertama-tama, kalian dapat membuat components baru dengan membuat file baru pada folder components, lalu kalian beri nama Calculator.vue Lalu, pada file App.vue, ubah kode HelloWorld dan ganti menjadi Calculator, karena kita tidak membutuhkan component HelloWorld. Sebagai contoh lengkapnya, kalian dapat mereferensikan foto dibawah ini. Pada component Calculator, ketikkan kode dibawah ini. Kita akan bahas satu persatu setelah ini. Pada bagian ini, kita menginisialisasi variable pada component Calculator pada VueJS, agar dapat digunakan oleh aplikasi. Pada kasus kali ini, kita membuat 3 variable, yaitu a, b dan result. Pada bagian ini, kita membuat fungsi kalkulasi pada aplikasi kita, dengan nama fungsi calculate(). Untuk dapat mengakses variable, kita perlu menambahkan keyword this. Pada bagian ini, kita membuat tampilan interface untuk digunakan oleh pengguna. Kita dapat menggunakan tag layaknya di HTML, dengan beberapa tambahan fitur. Pada bagian input, kita tambahkan v-model agar data yang dimasukkan ke input secara otomatis akan masuk ke variable yang sudah kita tentukan. Kita tambahkan .number agar VueJS dapat membaca value tersebut sebagai number. Pada bagian tombol, kita tambahkan @click atau v-on:click untuk dapat memanggil fungsi calculate() yang sudah kita buat sebelumnya di bagian script. Pada bagian paragraph, kita akan memunculkan data result yang berisi hasil kalkulasi dari data a dan b dengan menggunakan {{ }} Viola! Maka aplikasi kalkulator sederhana kalian sudah selesai. Sangat mudah bukan? Tentunya aplikasi yang akan kalian buat akan lebih kompleks dari ini, dan tentunya akan banyak fitur yang kalian buat dalam aplikasi tersebut. Untuk teman-teman yang ingin mempelajari VueJS lebih lanjut, kalian dapat mengikuti kelas-kelas Starter dibawah ini: Vue JavaScript FrameworkNuxtJS Javascript Framework Dan untuk teman-teman yang tertarik untuk membuat aplikasi kompleks yang tentunya dapat kalian gunakan untuk membuat project, kalian dapat mengikuti rekomendasi kelas Premium dibawah ini, tentunya dengan studi kasus yang lengkap! Selamat Belajar! :) 

Apa sih redux? Redux adalah salah satu state management yang sangat hype pada waktunya dan masih relevan sampai sekarang. Redux juga menawarkan tools untuk masing-masing browser contoh chrome redux devtools untuk memonitor keadaan state kita saat ini. Package middleware-nya juga sudah banyak di kembangkan gratis dan siap digunakan untuk memudahkan kita mengembangkan aplikasi yang kita sedang kerjakan. Kenapa redux? Kenapa enggak? Haha sebenarnya semua state management itu cuman tools, kita lah sebagai operator yang baik harus bisa memaksimalkan potensinya, tapi jujur aja redux didukung package middleware yang bertebaran di npm yang mana memudahkan kita untuk melakukan development seperti redux-thunk, redux-saga, redux-persist dan sebagainya. Kalau kita memilih context API dibanding redux bisa-bisa saja tapi untuk logic seperti thunk nanti kita butuh melakukan extra karena harus buat dari scratch. 1. Setup Redux Ada banyak contoh penerapan redux atau state management pada aplikasi nantinya, harapan saya kalian tidak terpaku pada contoh ini tapi berikut adalah penerapan best practice menurut saya, pada aplikasi ReactJS anda, mulai dengan menginstall: npm install redux react-redux Yang pasti kita akan menginstall redux dan react-redux sebagai jembatan untuk mengkomunikasikan react dengan redux state. Dua package ini saja sudah cukup untuk menjalankan redux di aplikasi ReactJS kita. Siapkan folder redux di dalam src/ Folder redux pada /src/ 2. File Store Buat file store.js pada folder redux [/src/redux/store.js] dan sematkan kode berikut: Pada contoh kali ini kita akan membahas redux sederhana yang hanya menyimpan state counter 3. Types Ada yang menyebut sebagai constants atau types dimana kita mendeklarasi setiap kegiatan yang akan terjadi pada reducer counter agar tidak ada salah sebut nama variable ketika digunakan. Maka sebaiknya kita buat 1 folder types pada redux [/src/redux/types] dan sebuah file baru dengan nama counter.js dengan kode berikut: Tidak ada yang terlalu istimewa dari kode diatas, kita hanya mengexport constanta dengan nama kegiatan tertentu. 4. Actions Pada folder ini kita harus setuju bahwa semua action atau kegiatan atau juga bisa disebut kejadian akan kita letakkan pada folder ini. Buat folder baru actions di dalam folder redux [/src/redux/actions/] dan buat sebuah file dengan nama counter.js Pada baris pertama kita import semua kegiatan yang kita miliki pada tipe kegiatan yang akan terjadi pada reducer counterPada baris 3-5 adalah sebuah arrow function dengan nama increment yang hanya mengirim sebuah object (dispatch) ke reducer kita dengan isian object seperti tertera pada line 4. Jika action kita cukup kompleks dan memiliki data yang akan dikirim, kita bisa sematkan sebagai kode snippet berikut: Abaikan langkah berikut jika kalian ingin melanjutkan reducer counter Pada baris 7-9 sama dengan baris function sebelumnya hanya beda kegiatan. 5. Reducer Pada folder ini dimana semua states kita tinggal, kita perlu membuat folder reducer [/src/redux/reducers/] dan file pertama yaitu index.js yang akan kita gunakan untuk indexing setiap reducer kita dan menggabungkan semua state yang kita miliki. Line pertama kita import combineReducers sebuah function dari package redux untuk menggabungkan object-object state yang kita miliki.Line 3 kita import counter dari file counter.jsLine 5 kita export secara default object yang sudah digabung menggunakan combineReducers. Jika kalian memiliki banyak reducers, inilah tempat yang pas untuk menggabungnya seperti contoh berikut: Abaikan jika kalian hanya ingin melanjutkan redux counter Nah sekarang kita buat reducer pertama kita dengan nama counter.js pada folder reducers [/src/redux/reducers/counter.js] Pada line pertama sama seperti pada file actions/counter.js dimana kita import semua kegiatan yang akan terjadi pada reducer counterBerikutnya pada line 3 kita buat sebuah variable dengan nama initialState yang mana isinya adalah sebuah object untuk menampung keadaan state dari reducer counter pada saat aplikasi pertama kali di loadPada line 7 kita buat function reducer kita yang mana function ini menerima arguments state yang akan di isi dengan initialState ketika pertama di load, dan argument kedua yaitu action, argument action ini akan berisi sesuai dengan object yang dikirim dari file [/src/redux/actions/counter.js] Contoh jika kita nanti panggil function increment ini pada logic aplikasi kita nanti, argument action nanti akan berisi sebuah object seperti berikut: { type: INCREMENT } Selanjutnya di line 8-15 kita buat logic pemisah setiap kegiatan dengan code switch dan di cek berdasarkan action.typePada line 9-10 kita deklarasikan setiap case/kejadian/kegiatan kita, kita bisa taruh logic penyimpanan state kita pada baris tersebut seperti melakukan mapping data, memfilter data, data penjumlahan dan sebagainya. Sangat saya merekomendasikan kalian untuk benar-benar paham dengan object pada javascript untuk melakukan pengolahan pada reducer ini. Saya sendiri sangat tersesat ketika belajar redux tanpa memahami basic-basic object sendiri.Pada line berikutnya kita bisa sisipkan case yang lain dan di akhiri dengan line 18 dimana kita export reducer kita agar bisa digunakan pada file [/src/redux/reducers/index.js] 6. Provider Kini reducer counter kita siap digunakan, kita bisa implementasi store kita dengan cara berikut: Perhatikan hanya kode-kode yang saya blokade diatas Pada line 7-8 kita butuh import Provider dari react-redux dan store data kita pada folder [redux/store/index.js]Langkah terakhir di file ini kita hanya butuh membungkus aplikasi kita paling luar dengan seperti pada line 12-14 dan jangan lupa sertakan props store pada component Provider diisi dengan store yang kita sudah siapkan diatas. 7. The App Kita akan membuat aplikasi yang sangat canggih dengan redux counter diatas yaitu aplikasi penjumlahan +1 dan pengurangan -1 Pada contoh artikel ini saya hanya pakai template create-react-app jadi tidak ada desain yang terlalu wah untuk layoutnya. Pada file App.js ini: Di line 3 kita import useSelector dan useDispatch dari react-reduxKita juga import tiap kegiatan yang kita butuhkan di line 5 yaitu increment dan decrement dari file [/src/redux/actions/counter.js]Pada line 8 kita buat variable baru dengan nama counter, lalu kita isi variable ini dengan cara panggil function useSelector dan kita sisipkan arrow function. Function callback tersebut menerima 1 argument yaitu state lalu pada bagian returnnya kita panggil state.counter atau state[namaReducer] jika memiliki reducer lainnyaLine 9 kita kan siapkan function dispatch untuk melakukan action nantinyaPerhatikan line 15-17, disana saya siapkan 2 button untuk menambah atau mengurangi state saat ini dan 1 text untuk menunjukkan keadaan state saat ini, pada setiap function kita beri event onClick dimana ketika kita click button tersebut akan menjalankan sebuah function dispatch dan kita sisipkan action yang sudah kita buat sebelumnya pada file [/src/redux/actions/counter.js] Jika kalian mengikuti dari awal dengan baik dan benar, paling tidak tampilannya akan seperti gambar di bawah. Akhir kata Redux sendiri hanya sebagai tools untuk mengelola state kita yang berada di layer berbeda, dan setiap perubahan harus dicatat pada actions. Pelajari lebih lanjut mengenai redux pada kelas Full-stack Javascript dengan stack MERN (Mongo, Express, ReactJS, Node). Silahkan pelajari berbagai kelas React JS gratis di BuildWithAngga untuk meningkatkan skills kamu lebih mantap lagi sebagai front-end developer di tahun 2023.

Hello people with the spirit of learning! Di tips ini kita akan coba membuat header menggunakan HTML dan CSS yang menarik dengan menambahkan video sebagai background dari header tersebut. Nah, header itu apa sih? Umumnya header adalah section paling atas yang berada pada halaman utama website. Header berisi navigation links, company logo, Call To Action (CTA) button dan company tagline & caption. Section header cukup penting untuk sebuah website. Dengan adanya header, user yang berkunjung ke dapat memberi informasi mengenai layanan atau tujuan apa yang dimiliki oleh company tersebut. Anggaplah header website sebagai halaman depan sebuah toko, maka orang yang melihat toko tersebut dapat melihat informasi singkat mengenai toko tersebut. Untuk melihat contoh section header menarik sekaligus ingin belajar membuatnya, bisa langsung cek saja di sini ya! Kalian bisa langsung download dan pakai component yang tersedia di Elements BuildWith Angga loh. Ayo langsung aja kita mulai cara membuat header lebih menarik dengan video background! STEP 1: Menyiapkan file HTML dan CSS Siapkan file index.html dan style.css pada folder yang sama. Disini kita akan menggunakan Bootstrap sebagai framework CSS untuk membantu kita membuat projek dengan lebih mudah. Sebagai awalan, kita copy saja starter template dari sini ya. Setelah itu jangan lupa untuk menambah tag untuk memanggil file style.css kita. Berikut code index.html yang telah dirapikan, Siapkan file index.html dan style.css pada folder yang sama. Disini kita akan menggunakan Bootstrap sebagai framework CSS untuk membantu kita membuat projek dengan lebih mudah. Sebagai awalan, kita copy saja starter template dari sini ya. Setelah itu jangan lupa untuk menambah tag untuk memanggil file style.css kita. Berikut code index.html yang telah dirapikan. <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> <body> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html> STEP 2: Menambahkan video sebagai background Pada file HTML, kita dapat membuat tag <section> di dalam <body> untuk setiap section yang nantinya akan dibuat. Pada header kali ini akan ada tiga section yaitu video, navigation bar dan hero. Pada step dua ini, kita akan membuat <section> untuk video background terlebih dahulu. Didalam <section> tersebut akan kita tambahkan tag <video> yang berfungsi melampirkan file video pada website. Tambahkan link video pada atribut "src" dalam tag <video> agar video dapat tampil di website. Untuk lebih jelasnya seperti berikut, <!-- Create video --> <section id="video"> <div class="overlay"></div> <!-- Ubah link dalam "src" sesuai video yang diinginkan --> <video src="https://media.istockphoto.com/videos/dawn-in-the-morning-aerial-drone-shot-video-id1057138460" loop muted autoplay></video> </section> Kemudian berikan styling pada file style.css. Styling ini akan membuat video memiliki ukuran lebar dan panjang mengikuti perangkat. Untuk CSSnya seperti ini, /* Edit video */ #video { position: absolute; top: 0; z-index: -1; overflow: hidden; width: 100%; height: 100vh; background: black no-repeat center center/cover; } video { min-width: 100%; min-height: 100vh; z-index: 1; } .overlay { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: rgba(8, 27, 11, 0.3); z-index: 2; } STEP 3: Membuat section navigation bar  Untuk membuat navigation bar, kita dapat menggunakan navigation bar component yang sudah disediakan oleh Bootstrap. Sebelum itu, kita buat dahulu tag <section> untuk meletakkan code component navigation bar. Di sini kita akan memilih navigation bar ini untuk kita copy dan paste ke dalam file index.html yang sudah dibuat. Copy dan paste code HTML navigation bar component tersebut kemudian kita ubah beberapa nilai classnya pada file index.html menjadi seperti berikut: <!-- Create navbar --> <section id="navbar"> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> <a class="navbar-brand" href="#">nature</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Community</a> <a class="nav-link" href="#">Explore</a> </div> </div> </div> </nav> </section> Kemudian kita berikan styling pada style.css untuk merapikan tampilan navigation bar, /* Edit navbar */ .navbar { padding: 24px 0px 24px 0px; font-family: "Poppins", sans-serif; } .navbar-brand { font-size: 30px; font-family: "Pacifico", cursive; color: #fff; } .nav-link { color: #fff; font-weight: 300; } .nav-link:hover, .nav-link.active { color: #fff; font-weight: 500; } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.5rem; padding-left: 1.5rem; } } Nah untuk section navigation bar sudah selesai kita buat. Yeay! STEP 4: Membuat section hero Sebagai pelengkap header website, perlu adanya hero yang berisi CTA button serta informasi yang menjelaskan secara singkat mengenai website tersebut. Untuk membuat hero dapat menambahkan tag berikut pada index.html, <!-- Create hero --> <section id="header" class="my-4"> <div class="container mx-auto"> <h1 class="text-center mb-4">Discover our most<br class="d-md-block d-none"> treasured places</h1> <p class="text-center mb-4">Away from the noise and density of the urban atmosphere,<br class="d-md-block d-none"> let's refresh your body and mind by exploring nature</p> <div class="mx-auto d-flex justify-content-center"> <button class="btn btn-primary">Explore Now</button> </div> </div> </section> Kemudian kita beri styling pada style.css. Styling ini akan membuat hero berada ditengah layar kita serta bersifat responsif. /* Edit header */ #header { color: #fff; } #header h1 { font-size: 60px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 14px; font-weight: 300; font-family: "Poppins", sans-serif; } #header button { font-size: 16px; font-weight: 700; padding: 14px 32px 14px 32px; border-radius: 999px; background-color: #fff; border-color: #fff; color: #212121; font-family: "Poppins", sans-serif; } @media (min-width: 720px) { #header { margin: 0; width: 100%; position: absolute; top: 55%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; } #header h1 { font-size: 90px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 18px; font-weight: 300; font-family: "Poppins", sans-serif; } } STEP 5: Menggunakan google font Jika dilihat dari CSS yang kita buat pada step 4 terdapat "font-family" dibeberapa CSS selector namun jika kita jalankan file index.html, font tersebut belum diterapkan. Hal ini karena kita belum melakukan import Google Font ke dalam projek kita. Ada dua font yang kita gunakan pada projek ini yaitu Poppins, Abhaya Libre dan Pacifico. Untuk menggunakan Google Font, dapat kita import font tersebut ke dalam projek kita. Ada dua cara melakukan import font kedalam sebuah projek, 1. Melakukan import ke dalam file style.css Setelah memilih font yang diinginkan, copy dan paste nilai @import pada bagian paling atas style.css, /* Font Google */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); 2. Melakukan import ke dalam file index.html Setelah memilih font yang diinginkan, copy dan paste tag <link> pada bagian <header> index.html diatas tag <link> style.css, <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Import Google Font --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> Nah selesai sudah cara membuat header dengan video background dengan hasil seperti ini: Untuk kode lengkapnya dapat dilihat disini ya, Index.html <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Our CSS --> <link rel="stylesheet" href="style.css"> <title>Header with video background</title> </head> <body> <!-- Create video --> <section id="video"> <div class="overlay"></div> <!-- Ubah link dalam "src" sesuai video yang diinginkan --> <video src="https://media.istockphoto.com/videos/dawn-in-the-morning-aerial-drone-shot-video-id1057138460" loop muted autoplay></video> </section> <!-- Create navbar --> <section> <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> <a class="navbar-brand" href="#">nature</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Community</a> <a class="nav-link" href="#">Explore</a> </div> </div> </div> </nav> </section> <!-- Create hero --> <section id="header" class="my-4"> <div class="container mx-auto"> <h1 class="text-center mb-4">Discover our most<br class="d-md-block d-none"> treasured places</h1> <p class="text-center mb-4">Away from the noise and density of the urban atmosphere,<br class="d-md-block d-none"> let's refresh your body and mind by exploring nature</p> <div class="mx-auto d-flex justify-content-center"> <button class="btn btn-primary">Explore Now</button> </div> </div> </section> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html> Style.css /* Import Font Google */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); /* Edit video */ #video { position: absolute; top: 0; z-index: -1; overflow: hidden; width: 100%; height: 100vh; background: black no-repeat center center/cover; } video { min-width: 100%; min-height: 100vh; z-index: 1; } .overlay { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; background-color: rgba(8, 27, 11, 0.3); z-index: 2; } /* Edit navbar */ .navbar { padding: 24px 0px 24px 0px; font-family: "Poppins", sans-serif; } .navbar-brand { font-size: 30px; font-family: "Pacifico", cursive; color: #fff; } .nav-link { color: #fff; font-weight: 300; } .nav-link:hover, .nav-link.active { color: #fff; font-weight: 500; } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.5rem; padding-left: 1.5rem; } } /* Edit header */ #header { color: #fff; } #header h1 { font-size: 60px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 14px; font-weight: 300; font-family: "Poppins", sans-serif; } #header button { font-size: 16px; font-weight: 700; padding: 14px 32px 14px 32px; border-radius: 999px; background-color: #fff; border-color: #fff; color: #212121; font-family: "Poppins", sans-serif; } @media (min-width: 720px) { #header { margin: 0; width: 100%; position: absolute; top: 55%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; } #header h1 { font-size: 90px; font-family: "Abhaya Libre", serif; line-height: 0.9; } #header p { font-size: 18px; font-weight: 300; font-family: "Poppins", sans-serif; } } Bagaimana? mudah bukan! Yuk kreasikan dengan kreativitasmu untuk membuat header yang lebih menarik lagi! Kalau kalian butuh membuat header dengan cepat dan menarik, langsung aja cek di Elements BuildWith Angga ya! Ada banyak component lain yang bisa kalian gunakan juga loh. Terima kasih!

Hello people with the spirit of learning! Pada kali ini kita akan membuat prototype sederhana. Gimana caranya ? Simak sampai akhir yuk. 1. Menyiapkan asset design Sebelum kita melakukan prototyping, sebaiknya kita sudah memiliki design yang sudah siap untuk prototyping. Kamu bisa mencari asset design pada halaman website shaynakit.com 2. Import to Figma Setelah berhasil unduh asset design yang kita inginkan, Import file asset design ke Figma. Caranya, klik icon import pada cursor yang ada di gambar atau kamu langsung bisa drag file ke figma secara langsung. 3. Ubah device ke Prototype Jika sudah berhasil import file design, selanjutnya open project tersebut kemudian pada right sidebar, ubah device menjadi prototype Jika berhasil, maka screen akan terdapat tanda node untuk menghubungkan screen yang lain. 4. Buat koneksi pertamamu Pilih screen pertama kamu, lalu click tanda plus, dan tarik ke tujuan screen berikutnya. Selain itu kamu juga bisa melakukan hotspot menggunakan element. Seperti gambar di bawah ini. Pilih input field email kemudian tarik ke tujuan screen berikutnya. 5. Buat interaksi dan animasi sederhana a. Buat frame terbaru untuk membungkus elements plane menjadi 2 screen. b. Pada screen screen pertama, putar element pesawat 180 derajat, Dan ubah layer opacity menjadi 0% c. Select semua screen dan buat menjadi multiplayer component d. Kemudian klik combine as variant pada right sidebar e. Hasilnya akan menjadi seperti ini f. Kemudian koneksikan screen 1 ke screen 2, ubah aturan menjadi seperti ini g. Kemudian pada left sidebar terdapat asset, pilih component plane tadi kemudian tarik ke splashscreen. Oh ya, sebelumnya logo splashscreen tersebut sudah dihapus ya, dan hasilnya akan jadi seperti gambar dibawah ini. h. Kemudian pada screen login, lakukan duplikasi menggunakan ctrl+D atau alt+D i. Kemudian tarik tiap component, disini saya membagi 2 menjadi atas dan bawah. Untuk inputan saya sembunyikan di bawah, sedangkan untuk illutrasi dan title saya sembunyikan diatas, namun masih di dalam screen/frame tersebut. j. Selanjutnya, buat koneksi screen splashscreen ke screen login, dan atur animasi menjadi seperti gambar dibawah ini. k. Dilanjutkan dengan mengoneksikan screen login ke screen login ke 2 dengan detail animasi seperti dibawah ini l. Tadaa, prototype animasi sederhana kamu sudah jadi. Untuk menguji prototype kamu udah berhasil apa belum kita lanjut ke step 6. 6. Menjalankan prototyping a. Ketika kamu sudah membuat prototyping, kamu perlu untuk menjalankan prototype tersebut sudah berhasil apa belum, dengan cara pastikan starting frame kamu sudah benar. Dengan melihat pada rightsidebar-prototype. b. Klik pojok kanan atas, dengan icon play c. Kemudian akan muncul tab baru yang berarti prototype sedang dijalankan. Hello people with the spirit of learning! Gimana untuk tips kali ini? Sangat mudah bukan ? Jika terdapat kendala bisa DM langsung ke @buildwithangga atau @cika.design. Terima kasih telah membaca artikel ini dan jangan lupa untuk tag kami.

Hello people with the spirit of learning! Pada Flutter ada beberapa jenis button yang dapat kita gunakan seperti ElevatedButton, TextButton, OutlinedButton dan lain sebagainya. Nah kali ini, kita akan coba untuk membuat TextButton. Tapi, kalian bisa coba ikutin dulu tutorial sebelumnya Flutter Tutorial: Step by Step Import Icon ke Projek Flutter. Step 1: Menambahkan Widget TextButton TextButton( onPressed: () {}, child: Text( "Let's take a picture", ), ), Pertama-tama kita menambahkan widget TextButton dan kita tambahkan widget Teks seperti contoh di atas. Step pertama ini adalah langkah paling dasar dalam membuat TextButton. Step 2: Menambahkan warna pada button. TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", ), ), Setelah itu untuk lebih mempercantik tampilan button, kita perlu untuk menambahkan warna pada button dengan cara seperti di atas. Kamu juga bisa sesuaikan warna yang kamu mau yah! Cukup dengan mengganti kode pada Color(0xff+kode hex warna yang kamu inginkan). Step 3: Mengganti warna teks. TextButton( style: TextButton.styleFrom(backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), Untuk mengganti warna teks, kita hanya cukup menambahkan style pada widget teks yang sudah kita buat tadi. Kamu juga bisa sesuaikan dengan keinginan kamu dengan cara seperti di atas yah! Well, sebenarnya ada cara yang lebih baik untuk memberikan warna dengan design system dari aplikasi kita, jadi misalnya daripada menggunakan kode 0xffffffff maka kita bisa menggunakan text seperti White, apabila kamu ingin belajar terkait design system bisa coba pelajari kelas online gratis Flutter for Designer di BuildWith Angga. Step 4: Mengatur ukuran button. Container( width: 200, height: 45, child: TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265)), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), Untuk mengatur ukuran button, dapat kita tambahkan container seperti contoh di atas. Container juga dapat digunakan untuk mengatur bentuk dari button yang kita buat. Step 5: Menambahkan border radius pada button. Container( width: 200, height: 45, child: TextButton( style: TextButton.styleFrom( backgroundColor: Color(0xffF18265), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20), ), ), onPressed: () {}, child: Text( "Let's take a picture", style: TextStyle( color: Color(0xffffffff), ), ), ), ), Untuk menambahkan border pada pinggir-pinggir button, kita dapat memberikan shape RoundedRectangleBorder dan menambahkan borderRadius sesuai dengan keinginan kita. Disini saya menggunakan ukuran radius 20. All done! Sekarang kamu udah bisa nih bikin button sederhana di projek Flutter-mu. Sekarang aku tantang kamu untuk modifikasi button ini sesuai dengan keinginan-mu. Boleh mengganti warna, atau mengganti teks dengan font dari google font agar tampilan button lebih menarik dengan mengikuti tutorial Menggunakan Google Fonts Pada Projek Flutter. Jangan lupa tag @buildwithangga kalo kamu uda berhasil mencoba. Good luck!

Hello people with the spirit of learning! Selain melakukan testing pada emulator, dalam pengembangan aplikasi mobile juga diperlukan testing pada Real Device atau perangkat nyata. Supaya, kita bisa merasakan apa yang nantinya akan dirasakan oleh pengguna setelah aplikasi tersebut rilis. Pada artikel kali ini, kita akan belajar bagaimana cara menghubungkan aplikasi yang kita buat menggunakan Flutter pada Real Device. Step 1: Melakukan Pengaturan Pada Smartphone Kamu Hal pertama yang harus dilakukan adalah, melakukan pengaturan (Settings) pada smartphone yang ingin kamu gunakan. Caranya: 1. Pilih menu Settings atau Setelan pada smartphone kamu. 2. Pilih Additional Settings atau Setelan Tambahan. 3. Pilih Developer options. 0 4. Aktifkan USB debugging pada menu Debugging. Step 2: Membuka Project Flutter Setelah mengatur pengaturan pada smartphone kamu, langkah berikutnya adalah membuka project Flutter yang telah kamu buat. Misalnya disini project flutter yang digunakan diambil dari repository github https://github.com/rifqieh/fintech_pay. Step 3: Menjalankan Pada Real Device Langkah berikutnya adalah menjalankan aplikasi pada smartphone kamu. 1. Pertama-tama klik Run, kemudian pilih Start Debugging. 2. Kemudian pilih device yang ingin digunakan. Misalnya disini saya memilih Mi 9T Pro. 3. Tunggu sampai prosesnya selesai. Jika sudah selesai, tada!! hasilnya akan seperti gambar berikut: Bagaimana? mudah bukan! Jika kamu tertarik untuk mempelajari Flutter lebih lanjut, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya.

Hello people with the spirit of learning! Pernah ga kalian sudah membuat screen yang banyak pada project UI Design lalu tiba-tiba kalian ingin mengganti warna dari sebuah button? Apa yang akan kalian lakukan? menggantinya satu persatu? Well, itu akan memakan waktu yang sangat lama. Bayangkan jika kalian memiliki 100 button, apakah kalian akan rela membuang waktu hanya untuk mengganti button saja? Tapi tenang, pada artikel ini kita akan mempelajari bagaimana caranya membuat component pada figma, agar proses revisi dan pembuatan design kalian jadi lebih cepat dan efisien. Oke, siapkan koneksi internet kalian dan juga akun figmanya ya. Let’s Start! Step 1 : Buat Project Baru Pertama, buat sebuah project baru dengan memilih + New pada menu yang ada di bagian atas tampilan dashboard figma. Step 2 : Ubah Nama Project Kalian bisa ubah nama dari project yang baru saja dibuat dengan mengklik bagian Untitled, lalu ubah namanya sesuai kemauan kalian. Step 3 : Menambahkan Frame Baru Untuk menambahkan wireframe baru, kalian dapat menekan F pada keyboard atau memilih icon pagar seperti menu yang ada pada gambar diatas. Setelah itu kalian bisa klik bagian artboard dimana saja untuk membuat wireframe baru, lalu atur ukuran dari framenya menjadi W: 400 x H: 100. Step 4 : Membuat Button Utama Dalam membuat button, kalian bisa menggunakan Rectangle Tool dengan cara memilih menu seperti gambar diatas atau menekan R pada keyboard. Setelah membuat objectnya, atur ukuran buttonnya menjadi W: 300 x H:60. Step 5 : Mengatur Bentuk Radius Button Agar bentuk buttonnya tidak terlalu kaku, kalian bisa mengubah ujung tepinya atau biasa disebut dengan radius, dengan mengubah bagian yang ada seperti gambar diatas. Ubah radiusnya menjadi 40. Step 6 : Ubah Warna Button Untuk mengubah warnanya, kalian bisa seleksi terlebih dahulu object button yang telah dibuat. Setelah itu, pilih persegi kecil seperti gambar diatas untuk masuk ke pengaturan warna. Ubah kode warnanya menjadi 6A67FB pada bagian kolom Hex. Jika kalian memiliki kode warna yang lain, silahkan digunakan sesuai kebutuhan yaa. Step 7 : Menambahkan Teks Pada Button Gunakan menu Text (T) untuk membuat sebuah tulisan baru yang akan kalian gunakan pada bagian button. Untuk pengaturan teksnya, kalian bisa ikuti seperti ini yaa. Typeface: Roboto, Typefont: Medium, Size: 22px. Lalu, jangan lupa atur rata tengah teksnya dengan memilih menu Text align center. Step 8 : Membuat Component Setelah semuanya tersusun rapih, seleksi kedua objectnya (button + teks) dengan cara klik pada layer dan jangan lupa tahan tombol Ctrl atau Command. Langkah selanjutnya, klik kanan pada layer yang telah terseleksi. Lalu pilih Create component dan kalian telah membuat satu komponen yang siap dipakai ulang dalam membuat project lebih cepat. Step 9 : Menggunakan Component Untuk mengecek component yang telah kalian buat sebelumnya, kalian bisa cek pada bagian Assets, lalu pilih Local components, setelah itu buka nama frame dari component yang kalian buat. Untuk menggunakan componentnya, kalian hanya perlu menggeser object componentnya, lalu letakkan pada tempat yang kalian inginkan. Step 10 : Mengubah Tampilan Dengan Cepat Untuk mengubah tampilan dari semua componentnya dengan satu langkah, kalian perlu double click pada component yang ada pada bagian Assets. Setelah itu kalian bisa ganti tampilannya, seperti contoh diatas saya mengganti warna dari component utamanya, lalu component lainnya secara otomatis akan berganti warna juga. Wow cepat banget kan, gak perlu ganti satu persatu. Sekarang proses membuat UI Design jadi lebih cepat dan efisien banget pokoknya. Jangan lupa tag hasil belajar kalian ke @buildwithangga dan @dimasomnia di instagram yaa teman-teman! Jika kalian penasaran dan tertarik untuk mempelajari tips-tips UI Design, silahkan bergabung pada kelas 3D Blender & UI UX Landing Page. Dalam kelas itu, kita akan bersama-sama mempelajari bagaimana caranya mendesign tampilan UI Design secara cepat, dan juga kita akan mempelajari bagaimana caranya membuat 3D Modelling agar tampilan UI Design lebih terlihat unik dan menarik. Silahkan bergabung, sampai jumpa di kelas yaa! Terima kasih.