How to make component with Figma

Hello everyone ! Ketemu lagi dengan saya. Pada artikel sebelumnya kita sudah membahas tentang cara membuat Page Sign in dan Sign up dengan sederhana. Nah, kali ini kita akan membahas bagaimana sih caranya membuat komponen?

So, temen-temen tau gak nih apa itu component dan apa sih fungsi nya? Bagaimana sih cara membuat component?

Jadi, component itu adalah sebuah element yang dapat kita gunakan berkali-kali dalam mendesain yang akan mempermudah kita dalam mendesain nantinya.

Kenapa kita membuat component? kan kita bisa membuat desain baru. Nah, disini fungsinya dengan kita membuat design komponen kita akan membuat ikon atau tampilan desain yang konsisten pada project kita

komik

Bagaimana cara membuat nya, yuk simak langkah-langkah berikut:

Check this out!

  1. Tentu saja kita harus membuka aplikasi Figma terlebih dahulu
  2. Disini kita akan membuat komponen button. Button merupakan komponen

Untuk membuat komponen button. Jadikan terlebih dahulu rectangle button dan text. Pada bagian atas ada ikon create component atau tekan CTRL+ALT+K .

3. Klik Asset pada teks yang terdapat sebelah teks layer. Semua komponen icon ataupun button akan tersimpan pada ‘Asset’

4. Selanjutnya untuk membuat button read yang lainnya, bisa dengan drag button komponen yang ada pada asset. Sehingga mempermudah dan mempersingkat kita dalam mengerjakan sebuah project.

Bukan hanya itu, jika kita ingin mengubah warna dari button. Jika yang digunakan adalah komponen maka kita tidak perlu mengubah warna buttonnya satu persatu. Karena cukup satu saja yang lain akan menyesuaikan warna dari komponen button yang diubah

.

Setelah mempelajari bagaimana menjadikan button komponen sekarang kite belajar bagaimana caranya menjadikan warna komponen

  1. Pilih warna yang ingin dijadikan komponen

2. Pada bagian Fill terdapat ikon titik empat, klik ikon tersebut maka akan tampil jendela seperti dibawah ini

3. Selanjutnya klik ikon tambah pada sudut kanan atas. Buat nama dari color dan klik button Create style

4. Komponen warna berhasil di tambahkan

Okay everyone! Mungkin sekian artikel kali ini

Mudah bukan membuat komponen. Tetap semangat belajar dan improvisasi teman 🙂

Selamat belajar

Subscribe

Related articles

Lifecycle Pada Aplikasi -Flutter

Apa itu Lifecycle ? Lifecycle aplikasi dalam Flutter adalah urutan...

Cara Memakai Single Child Scroll View

Halo teman-teman, pada artikel kali ini saya akan membahas...

Control Flow pada Dart

Control Flow Control flow adalah cara mengontrol alur dari sebuah...

Mengintegrasikan Project Flutter dengan Firebase

Setelah itu kita masuk ke halaman Add Firebase to...

Navigation & Route Navigation Flutter

Navigation dan Routing merupakan konsep inti dalam pengembangan Aplikasi...

LEAVE A REPLY

Please enter your comment!
Please enter your name here