Tutorial Mini – Bekerja dengan Komponen Tombol Figma

Diterbitkan: 2022-03-11

Di Figma, elemen UI disebut Komponen. Dibangun dengan benar, mereka sangat serbaguna dan mudah diperbarui, tetapi apa yang mampu dilakukan komponen, dan bagaimana cara mengoperasikannya? Kami akan mendemonstrasikan kekuatannya dengan bekerja dengan salah satu elemen UI paling umum—tombol.

Mengapa tombol?

Tombol penuh dengan variabel seperti tinggi, lebar, panjang label, bantalan internal, status, dan tema. Dengan membangun sistem tombol dasar, kita akan mempelajari nilai luar biasa dari penggunaan Figma dengan pola pikir berbasis komponen dan pustaka komponen Figma.

*Catatan Editor: Tutorial tertulis ini berasal dari video tutorial yang dibuat oleh David Luhr dari Build UX.

Tugas 1: Membangun Komponen Tombol Figma Dasar

  1. Kita akan mulai dengan membuat bingkai baru dan menamainya Buttons di panel layer.
  2. Ketik teks label tombol Anda. Kami akan menggunakan "Sign Up" untuk tutorial ini.
  3. Jenis huruf kami adalah:
    • Roboto Medium
    • Ukuran Huruf 18
    • Tinggi Garis 24
    • Pusat Perataan Teks
    • Rata tengah
    • Mengubah ukuran = Ukuran Tetap
  4. Setelah Anda menulis label tombol Anda, klik dua kali di sudut kanan bawah kotak teks sehingga secara otomatis ukurannya akan menjadi batasan terkecil dari teks.
  5. Ganti nama layer teks Button Label .
    6. Komponen tombol Figma. Klik untuk melihat gambar berukuran penuh.
    Tugas 1: Langkah 1-5
  6. Buat persegi panjang, letakkan di bawah Button Label di panel layer, dan beri nama Button Container . Biarkan warna wadah tombol tetap menjadi abu-abu default.
  7. Tetapkan ketinggian tetap untuk wadah tombol. Kami akan menggunakan 60 piksel.
  8. Sekarang, kita akan menambahkan bantalan internal ke wadah tombol.
    • Lebar label tombol adalah 63 piksel.
    • Kita membutuhkan padding kanan dan kiri 24 piksel. Gabungan, ini sama dengan 48 piksel.
    • Jadi, kita akan memasukkan lebar label (63 piksel) + total padding (48 piksel).
  9. Pilih label dan wadahnya dan letakkan di tengah dengan alat perataan.
tutorial figma Klik untuk melihat gambar berukuran penuh.
Tugas 1: Langkah 6-9

Kami telah merancang tombol yang belum sempurna. Namun, bantalan internal tombol kami belum dapat mengakomodasi perubahan panjang label. Pada langkah selanjutnya, kita akan membahas tata letak internal, yang akan memungkinkan lebar wadah tombol kita menjadi fleksibel dalam kaitannya dengan panjang label.

Dicari desainer UI lepas penuh waktu yang berbasis di AS

Tugas 2: Jadikan Tombol Interaktif

Untuk membuat tombol interaktif, kami akan menambahkan cincin fokus.

  1. Duplikat Button Container dan beri nama Button Focus Ring .
  2. Pastikan cincin fokus berada di bawah wadah tombol di panel lapisan.
  3. Hapus isian cincin fokus, dan tambahkan goresan hitam di dalam dengan ketebalan 4 piksel.
  4. Kami juga menginginkan celah 4 piksel antara wadah tombol dan cincin fokus di keempat sisinya, jadi kami akan menambahkan +16 pada lebar dan tingginya.
  5. Pilih dan ratakan tengah label, wadah tombol, dan cincin fokus.

    6. Ini adalah bagaimana tombol kita, dalam bentuknya yang paling sederhana, akan terlihat dalam keadaan fokus.

    Pustaka komponen Figma Klik untuk melihat gambar berukuran penuh.
    Tugas 2: Langkah 1-5
  6. Pilih ketiga elemen (label, wadah tombol, cincin fokus), klik kanan, dan pilih "Buat Komponen."
    7. komponen figma Klik untuk melihat gambar berukuran penuh.
    Tugas 2: Langkah 6
  7. Ganti nama komponen Button/Primitive/Default .
    • Tombol = Tipe Komponen
    • Primitif = Variasi
    • Default = Status

Ini adalah tombol primitif kami. Itu tidak akan muncul dalam desain akhir kami, tetapi itu akan bertindak sebagai fondasi yang akan dibangun oleh semua variasi tombol kami. Keuntungan? Jika kami perlu mendesain ulang tombol kami di masa mendatang, kami hanya perlu mengedit di satu tempat.

aplikasi figma Klik untuk melihat gambar berukuran penuh.
Tugas 2: Langkah 7

Tugas 3: Membuat Kotak Tata Letak Tombol

  1. Pilih Button/Primitive/Default , buka panel desain, dan klik ikon "+" di sebelah "Layout Grid."
    2. Figma pola dasar Klik untuk melihat gambar berukuran penuh.
    Tugas 3: Langkah 1
  2. Kemudian, klik ikon kisi, pilih "Kolom", dan masukkan nilai berikut:
    • Jumlah Kolom = 1
    • Lebar = Otomatis
    • Talang = 0
    • Jenis = Peregangan
  3. "Margin" menyediakan bantalan di dalam wadah tombol.
    • Ingat, kita membutuhkan padding kiri dan kanan 24 piksel.
    • Kita juga perlu mempertimbangkan batas tebal 4-piksel dan celah 4-piksel dari cincin fokus kita.
    • Ini berarti bahwa kita membutuhkan margin sebesar 32 piksel.
    4. Status komponen FigmaKlik untuk melihat gambar berukuran penuh.
    Tugas 3: Langkah 2-3
  4. Dengan margin ditambahkan, Anda akan melihat area indikator merah yang menunjukkan bantalan interior wadah tombol dan sesuai dengan lebar label secara tepat.
    5. desain figma Klik untuk melihat gambar berukuran penuh.
    Tugas 3: Langkah 4

    Sekarang kita harus menambahkan batasan tata letak ke setiap elemen tombol kita.

  5. Pilih ketiga lapisan di dalam komponen, buka "Constraints," dan sematkan ke "Left & Right" dan "Center."
  6. Pada titik ini, Anda dapat memilih komponen dan menyeretnya ke lebar yang Anda inginkan. Anda akan melihat bahwa tata letak bekerja persis seperti yang dirancang.
  7. Jika Anda membuat lebar tombol lebih pendek dari label, Anda akan melihat bahwa labelnya pecah ke baris lain.
Alat desain figma Klik untuk melihat gambar berukuran penuh.
Tugas 3: Langkah 5-7

Tugas 4: Menyesuaikan Lebar Tombol untuk Panjang Teks

Mari kita lihat bagaimana tombol kita bekerja dengan label tombol yang lebih panjang.

  1. Buka panel aset, seret tombol baru, dan ketik "Jadwalkan Janji" atau yang lebih lama. Apa yang terjadi? Label meluap ke baris berikutnya—tidak persis seperti yang kita inginkan.
    2. Desain antarmuka Figma Klik untuk melihat gambar berukuran penuh.
    Tugas 4: Langkah 1
  2. Kembali ke panel lapisan Anda, pilih komponen baru yang baru saja Anda seret, dan gunakan tombol panah untuk menyesuaikan lebar ke dimensi tepat yang sesuai dengan label.
  3. Saat Anda melakukan ini, Anda akan melihat bahwa semua variabel tata letak tetap seperti yang diinginkan—pengisian interior, penempatan label, goresan 4-piksel, dan celah 4-piksel dari cincin fokus. (Hapus tombol duplikat ini sebelum pindah ke Tugas 5.)

Dengan menggunakan kisi tata letak, Anda dapat membuat satu tombol yang dapat digunakan di seluruh desain Anda, dan yang harus Anda lakukan hanyalah menyesuaikan lebar untuk berapa pun panjang label yang Anda butuhkan.

Prototipe Figma Klik untuk melihat gambar berukuran penuh.
Tugas 4: Langkah 2-3

Tugas 5: Membuat Status Arahkan dan Fokus

Dengan tombol default kami di tempat, mari buat primitif dari status hover dan fokus kami.

  1. Matikan cincin fokus di tombol default Anda.
  2. Tahan tombol Alt dan seret keluar contoh baru dari tombol default.
  3. Jadikan wadah tombol menjadi warna abu-abu yang lebih terang (#E7E7E7).
  4. Klik kanan, "Buat Komponen," dan ganti nama Button/Primitive/Hover .
    5. Alat desain web Klik untuk melihat gambar berukuran penuh.
    Tugas 5: Langkah 1-4
  5. Seret instance lain dari status default, nyalakan cincin fokus, dan cocokkan warna wadah tombol dengan warna wadah status melayang (#E7E7E7).
  6. Klik kanan, "Buat Komponen," dan ganti nama Button/Primitive/Focus .

Kami sekarang memiliki pegangan pada tata letak tombol dan bagaimana fungsinya di berbagai status. Dari sini, kita dapat mulai menambahkan tema atau gaya tertentu tergantung pada apa yang kita butuhkan.

Desain UI Figma Klik untuk melihat gambar berukuran penuh.
Tugas 5: Langkah 5-6

Tugas 6: Menerapkan Tema Tombol

Sekarang, kita akan membuat variasi gaya.

  1. Tahan tombol Alt dan seret ke contoh lain dari Button/Primitive/Default .
  2. Ubah warna wadah agar sesuai dengan warna tema yang diinginkan (#204ECF).
  3. Jadikan label tombol putih (#FFFFFF), alihkan pada cincin fokus, ubah goresan ke warna tema yang diinginkan (#204ECF), dan matikan.
  4. Klik kanan, "Buat Komponen," dan ganti nama Button/BrightBlue/Default .
    5. Figma UX Klik untuk melihat gambar berukuran penuh.
    Tugas 6: Langkah 1-4
  5. Tarik keluar dua contoh tombol default baru ini: Satu untuk keadaan melayang dan satu lagi untuk keadaan fokus.
  6. Ubah warna wadah tombol agar sesuai dengan warna tema yang diinginkan (#678FFF), klik kanan, "Buat Komponen," dan ganti nama Button/BrightBlue/Hover .
  7. Terapkan warna yang sama ke wadah tombol fokus, aktifkan cincin fokus, klik kanan, "Buat Komponen," dan ganti nama Button/BrightBlue/Focus .

Anda dapat menggunakan proses yang sama untuk sejumlah tema yang Anda butuhkan dalam desain Anda.

Desain web figma Klik untuk melihat gambar berukuran penuh.
Tugas 6: Langkah 5-7

Tugas 7: Melihat Keindahan Komponen Figma

Setelah Anda membuat semua tema, luangkan waktu sejenak untuk mengamati betapa hebatnya bekerja dengan komponen.

  1. Pilih Button/Primitive/Default Anda, tambahkan radius sudut, dan Anda akan melihat bahwa semua contoh tombol Anda diperbarui secara otomatis.
    2. Alat maket Klik untuk melihat gambar berukuran penuh.
    Tugas 7: Langkah 1
  2. Kemudian, buka panel komponen Anda. Semua contoh tombol Anda tersedia untuk diseret ke bagian mana pun dari desain Anda.
    3. Alat desain online Klik untuk melihat gambar berukuran penuh.
    Tugas 7: Langkah 2
  3. Juga, karena kami telah menggunakan konvensi penamaan ini, kami sekarang dapat menukar tombol apa pun untuk instance/tema alternatif. Untuk melihat ini beraksi, seret dalam satu contoh tombol, lalu buka "Instance" di panel desain, pilih contoh apa pun yang Anda butuhkan, dan itu segera berubah.
Alat desain UX Klik untuk melihat gambar berukuran penuh.
Tugas 7: Langkah 3

Bekerja dalam kerangka komponen memungkinkan kami mengelola tombol dengan cepat dan efisien di semua area desain kami. Yang terbaik dari semuanya, ini tidak hanya berfungsi dengan tombol, tetapi juga bekerja dengan semua jenis komponen UI.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

  • Kekuatan Figma sebagai Alat Desain
  • Figma vs. Sketch vs. Axure – Tinjauan Berbasis Tugas
  • Merampingkan Desain Kolaboratif dengan Figma
  • Desain Tombol Selama Bertahun-Tahun – Garis Waktu Dribbble
  • Tutorial Pembingkai: 7 Interaksi Mikro Sederhana untuk Meningkatkan Prototipe Anda