Butang reka bentuk pada Figma boleh dibuat dengan cara yang berbeza dengan menggunakan sifat komponen dan susun atur automatik pada platform. Oleh itu, butang boleh disesuaikan menggunakan label, saiz dan ikon. Jika anda tidak pasti cara membuat butang pada Figma, anda telah datang ke tempat yang betul.
Artikel ini akan menerangkan cara membuat butang dan cara memanfaatkan Figma sepenuhnya.
Mencipta Butang
Butang ialah elemen biasa yang digunakan semasa mereka bentuk antara muka pengguna yang berfungsi. Anda boleh membuat butang dalam reka bentuk Figma. Jika anda baru menggunakan Figma, anda mesti memahami asasnya terlebih dahulu.
Berikut ialah panduan langkah demi langkah untuk membuat butang:
- Buat reka bentuk Figma baharu.
- Tambahkan bingkai dengan menekan kekunci F pada papan kekunci anda, kemudian pilih “desktop” atau “telefon.”
- Tambahkan segi empat tepat dengan ketinggian 50px dan dimensi lebar 200px menggunakan kekunci R papan kekunci.
- Tambahkan teks dengan menekan “T” pada papan kekunci anda. Pusatkan teks anda supaya ia berada di tengah-tengah kotak teks anda secara mendatar dan menegak.
- Letakkan kotak teks ini di tengah-tengah segi empat tepat anda.
- Kumpulan komponen seperti yang anda mahukan.
Anda boleh menambah warna dengan mencipta beberapa menggunakan pemilih warna, atau anda boleh mengakses warna perenambelasan daripada internet.
Berbeza
Warna teks dalam butang bergantung pada sama ada ia berbeza dengan latar belakang hitam atau putih. Anda boleh menggunakan kedua-dua pilihan untuk melihat mana yang paling berkesan. Jika anda tidak menyukai mana-mana pilihan, anda boleh melaraskan gaya dan warna butang.
Mencipta Butang Asas
Terdapat tiga butang asas yang boleh dibuat pada Figma.
Butang Utama
Butang utama ialah warna pepejal dengan teks hitam atau putih. Butang ini menarik pengguna semasa mereka menggunakan aplikasi. Inilah cara anda boleh menciptanya:
- Pilih warna untuk butang anda.
- Pilih segi empat tepat, kemudian gunakan warna yang dipilih.
- Warnakan teks dalam putih atau hitam, bergantung pada kontras yang lebih baik.
Butang Sekunder
Ini biasanya butang putih tetapi digariskan dengan warna yang anda pilih. Teks butang boleh menanggung warna yang sama juga. Ini adalah butang kedua terpenting yang boleh anda buat. Ia juga harus menarik mata pengguna.
- Tukar warna segi empat tepat anda kepada putih (#FFFFFF).
- Dalam segi empat tepat, tambah strok. Anda boleh memilih warna yang anda suka di sini.
- Tukar warna teks anda untuk menghasilkan warna yang sama dengan teks.
Butang Tertiari
Butang tertier tidak sepenting dua yang pertama. Ia boleh berfungsi sebagai pautan, berhenti melanggan atau butang kembali. Ia selalunya dalam teks biasa dan boleh digariskan dalam beberapa keadaan.
- Jadikan segi empat tepat anda putih tanpa strok.
- Tukar warna teks kepada warna yang anda suka.
Anda boleh membuat butang tertiari yang menyerupai butang primer atau sekunder. Anda juga boleh menukar lebar lejang untuk mendapatkan keterlihatan yang lebih baik.
Buat Butang Menggunakan Teks, Reka Letak Auto dan Warna
Dengan alatan pada platform, anda boleh mendapatkan pengalaman praktikal menggunakan Reka Letak Auto dan Alat Teks. Dengan panduan langkah demi langkah, mencipta butang sepatutnya agak mudah untuk dicapai. Untuk mencipta butang, anda perlu mencipta lapisan teks anda, menukar lapisan teks anda kepada bingkai reka letak automatik dan gayakan butang anda.
Mencipta Lapisan Teks
Dalam langkah ini, alat teks digunakan.
- Mengetik alat teks dalam bar alat atau menekan huruf “T.”
- Apabila alat Teks aktif, ketik pada kanvas anda dan masukkan perkataan “Butang”. Ambil perhatian bahawa nama lapisan teks akan sepadan dengan apa sahaja yang ditaip pada kanvas melainkan ia ditukar secara manual dalam panel lapisan.
- Jika nama lapisan perlu ditukar, klik dua kali pada bar sisi kiri, kemudian taipkan nama baharu yang telah anda pilih.
Kini, anda juga boleh bermain-main dengan saiz fon dengan menambah atau mengurangkannya.
- Pilih lapisan teks anda.
- Navigasi ke bar sisi kanan, dan tukar saiz fon pada bahagian “Teks”. Anda juga boleh menukar fon atau berpegang pada pilihan lalai.
Tukar Lapisan Teks Anda Kepada Bingkai Reka Letak Auto
Pada ketika ini, butang itu perlu diubah suai untuk menjadikannya kelihatan glamor. Dengan susun atur auto, anda boleh menambahkan lagi suasana. Reka letak automatik ialah ciri berkuasa pada Figma dan boleh digunakan untuk reka bentuk responsif. Reka bentuk ini secara automatik menyesuaikan diri dengan perubahan seperti saiz kandungan, peletakan objek dan jenis peranti.
Reka letak automatik boleh digunakan untuk menukar lapisan kepada bingkai atau kepada bingkai sedia ada. Untuk menggunakan reka letak pada bingkai sedia ada, pilih lapisan teks anda, kemudian tekan pintasan “Shift” “A”. Setelah reka letak telah digunakan, anda akan melihat beberapa perubahan.
- Lapisan teks akan berada dalam bingkai. Reka letak automatik hanya digunakan pada komponen dan bingkai, jadi Figma meletakkan lapisan teks dalam bingkai baharu secara automatik. Bingkai tidak mempunyai warna isian. Ini digunakan dalam langkah penggayaan butang.
- Apabila memilih bingkai anda, tetapan susun atur automatik dipaparkan pada bar sisi kanan. Susun atur auto boleh diubah suai lagi.
- Anda perasan bahawa bingkai mengecut dan membesar dengan perubahan teks. Dengan elemen dinamik sedemikian, anda menjimatkan masa yang diambil untuk mereka bentuk kandungan yang dilihat pada pelbagai peranti atau diterjemahkan ke bahasa lain.
Menggayakan Butang
Anda boleh mulakan dengan menambah warna.
- Pilih lapisan bingkai, kemudian pilih “Isi tetapan” dalam bar sisi kanan. Ini mengisi warna
secara automatik. Pemilih warna menukar warna.
- Pilih lapisan teks dan laraskan isian kepada #FFFFFF.
- Pilih bingkai sekali lagi, kemudian gunakan tetapan bar sisi kanan untuk melaraskan jejari penjuru.
Perkara seterusnya ialah membetulkan padding bingkai. Selepas teks huruf ditukar kepada susun atur bingkai automatik, padding ditambah secara automatik antara teks dan sempadan bingkai. Padding pada ketika ini kelihatan sama pada semua sisi. Anda boleh menukar padding bawah dan atas menjadi lebih kecil daripada padding kanan dan kiri.
Anda boleh mengemas kini padding sesuka hati. Pelapik kiri dan kanan atau pelapik atas dan bawah boleh ditukar pada masa yang sama dengan pintasan di bawah:
- Tahan <⌥ Option> atau
, kemudian klik kawasan padding untuk memasukkan nilai padding untuk sisi bertentangan - Pegang <⌥ Option> atau
sambil menyeret pemegang untuk menukar padding untuk sisi bertentangan
Pada ketika ini, butang kelihatan baik, tetapi anda masih boleh mengemas kini label. Anda perlu klik dua kali pada teks untuk membenarkan pengeditan. Taip perkataan “Daftar”. Butang berubah saiz semasa anda menaip. Beginilah cara anda mereka bentuk butang menggunakan reka letak automatik dan alat teks. Anda kini boleh mencuba sesuatu yang baharu, seperti menukar butang menjadi komponen atau menambah varian.
Membuat Butang Boleh Diklik
Figma digunakan oleh syarikat seperti Uber, Facebook, Google dan Netflix. Ciri butang boleh klik memudahkan pereka bentuk dalam syarikat sedemikian untuk mencipta butang interaktif dan boleh diklik. Butang membuat navigasi lebih mudah pada platform sedemikian.
Inilah cara untuk membangunkan butang sedemikian dalam Figma:
- Pilih pilihan “Prototaip” dalam menu (kanan).
- Klik ikon “Plus” (+) yang terdapat di bawah tab Prototaip. Ini membolehkan anda menambah interaksi.
- Pilih “Pada klik” dalam tetingkap butiran interaksi.
- Pilih pilihan “Buka pautan”.
- Tambahkan pautan halaman di mana butang akan diarahkan setelah diklik.
- Ketik ikon “X” untuk keluar dari tetingkap butiran Interaksi.
- Navigasi ke butang pilihan “Main” di penjuru kanan sebelah atas.
- Ketik butang “Main” untuk mendapatkan pratonton reka bentuk.
Jika anda menuding kursor pada butang anda, ia bertukar kepada ikon seperti tangan. Ini menunjukkan bahawa butang kini boleh diklik.
Nota: Apabila membuat butang Figma yang boleh diklik, sentiasa gunakan “Pada klik,” bukan “Pada seret.” “Pada klik” membenarkan menambah pautan boleh klik pada butang yang mungkin. Butang “Pada seret” tidak boleh diklik.
Reka Bentuk Lebih Baik Dengan Butang Figma
Butang Figma mempunyai pembolehubah seperti tema, keadaan, pelapik dalaman, panjang meja, lebar dan ketinggian. Dengan mempelajari cara membuat butang pada platform, anda boleh memanfaatkan Figma sepenuhnya dan menambah komponen menggunakan nilai dalam pustaka Figma.
Pernahkah anda cuba mencipta butang pada Figma? Jika ya, apakah pengalaman anda? Beritahu kami di bahagian komen di bawah.