Cara Membuat Gradien di Figma

Cara Membuat Gradien di Figma

Ketika Anda tidak dapat memutuskan satu warna, gradien adalah pilihan yang sangat baik. Di Figma, Anda dapat membuat berbagai latar belakang gradien, memberi gradien pada bentuk dan teks, membuat gradien guratan, dan masih banyak lagi. Anda bahkan dapat membuat gradien mesh dengan efek blur atau dengan plugin gradien mesh komunitas Figma.

Karena Figma memiliki begitu banyak cara berbeda untuk membuat gradien, pengguna baru mungkin kesulitan memahami semuanya dari awal. Tentu saja, bereksperimen adalah bagian dari proses pembelajaran, namun jauh lebih mudah jika semua instruksi ada di satu tempat. Dan artikel ini menjelaskan hal tersebut.

Cara Membuat Gaya Gradien Berbeda di Figma

Figma menawarkan berbagai gaya gradien yang dapat Anda gunakan untuk mengisi latar belakang atau objek di kanvas dengan berbagai warna.

Linier: Gradien linier memiliki dua warna yang menyatu dalam satu garis lurus.Radial: Dengan gradien radial, yang pertama warna dimulai dari satu titik dan menyatu dengan titik lainnya ke segala arah.Sudut: Dalam gradien sudut, Anda dapat menentukan arah pergerakan gradien dengan menambahkan sudut. Ini adalah pilihan yang bagus untuk membuat gambar 3D.Berlian: Seperti namanya, gradien berlian dimulai dari satu titik dan menyebar dalam bentuk berlian.

Langkah-langkah untuk membuat gradien ini gayanya sama. Perbedaannya hanya pada gaya yang Anda pilih. Berikut cara membuat desain gradien di Figma:

Buka file Figma kosong.
Ketuk “Rectangle Tool”dari toolbar kiri.
Dengan menggunakan alat ini, gambarlah sebuah persegi panjang di kanvas untuk digunakan sebagai referensi gradien.
Pilih persegi panjang yang dibuat.
Klik pada warna saat ini di bawah “Isi”di panel kanan untuk membuka pemilih warna.
Tekan menu tarik-turun dan ubah”Solid”default ke gaya gradien mana pun yang Anda inginkan. Dua perhentian atau kotak warna akan muncul.
Pilih setiap penghentian warna dan pilih warna yang ingin Anda tambahkan ke gradien.
Ketuk empat titik di samping “Isi”untuk menyimpan gradien sebagai gaya.

Setelah itu, Anda dapat mengatur nilai transparansi, posisikan penghentian warna di tempat yang Anda inginkan untuk mengakhiri satu warna dan yang kedua untuk memulai, tambahkan penghentian warna lain, gerakkan di sekitar kanvas, atau ubah sudut gradien. Setelah selesai menyesuaikan, simpan lagi gradien (Langkah 8).

Catatan: Untuk menghapus perhentian warna yang Anda tambahkan, pilih perhentian dan tekan “Hapus”atau “Backspace”pada keyboard Anda.

Sekarang, Anda dapat menerapkan gaya gradien ke objek apa pun yang Anda inginkan.

Cara Membuat Gradien Mesh di Figma

Gradien mesh populer di kalangan perusahaan dan merek besar. Jika Anda sering menggunakan Instagram, Anda akan melihatnya setiap hari di logo aplikasi. Oleh karena itu, mengetahui cara membuatnya dapat berguna dalam situasi ketika Anda perlu menambah daya tarik pada proyek Anda.

Seperti yang telah disebutkan, gradien mesh dapat dibuat dengan plugin disediakan oleh komunitas Figma. Namun ada cara yang lebih mudah untuk menambahkan banyak warna di mana pun Anda inginkan di kanvas tanpa memerlukan alat eksternal.

Berikut cara membuat gradien mesh di Figma:

Masukkan file Figma baru.
Buat bingkai.
Centang kotak “Klip konten”di panel kanan sehingga apa pun yang berada di luar bingkai akan terpotong.
Mulai tambahkan berbagai bentuk atau buat objek Anda sendiri dengan alat “Pena”di dalam bingkai.
Ubah “Isi” setiap form baru agar berbeda dari yang lain.
Pilih semua bentuk.
Di bawah “Effects,” tekan menu drop-down dan pilih “Layer blur.”
Buka pengaturan “Layer blur”dan tingkatkan nilainya hingga Anda tidak lagi melihat batas yang jelas di antara bentuk.
Simpan gaya seperti di atas dan gunakan pada objek lain.

Cara lain untuk membuat gradien mesh adalah dengan menggunakan gaya sudut. Ini memberikan hasil menarik yang sedikit berbeda namun sama menariknya seperti tutorial pertama.

Inilah yang perlu Anda lakukan:

Buka kanvas kosong.
Gunakan bentuk yang Anda inginkan dan tambahkan ke kanvas. Di bawah “Isi”, ubah “Solid”menjadi “Angular.”
Pilih warna untuk gradien.
Sesuaikan sudut dan aspek gradien lainnya.
Tambahkan bentuk lain, sebaiknya “Eclipse”, yaitu lingkaran.
Letakkan di atas yang lain bentuk di atas kanvas.
Tambahkan gradien linier dan ubah warnanya agar cocok dengan warna lainnya.
Di bawah “Effects,” gunakan “Layer blur”beri efek dan buramkan garis bentuk baru untuk memadukannya dengan bentuk pertama.

Cara Gradien pada Gambar di Figma

Selain membuat gradien, Anda juga dapat melapisi gambar yang ada dengan gradien untuk menambahkan beberapa dimensi. Ini memberikan efek “pudar” atau ilusi sumber cahaya tak kasat mata yang menyinari gambar dari luar.

Berikut cara menambahkan gradien pada gambar di Figma:

Buka yang baru file di Figma.
Seret dan lepas gambar yang ingin Anda tambahkan gradien ke kanvas.
Tambahkan bentuk yang sesuai dengan ukuran gambar di atas.
Pilih gaya gradien di bagian “Isi”.
Pilih warna gradien dari pemilih warna.
Sesuaikan opacity, sudut, dll.

Anda juga dapat menggunakan alat”Pena”dan menggambar bentuk di area tempat Anda menginginkan gradiennya.

Cara Membuat Gradien pada Teks di Figma

Membuat gradien pada teks di Figma sangat mirip dengan cara Anda membuat gradien untuk bentuk lainnya. Berikut langkah-langkahnya:

Buka kanvas baru di Figma.
Tekan alat “Teks”dari toolbar di sebelah kiri.
Klik di mana saja pada kanvas dan mulailah menulis. Pilih teks dan buka “Isi.”
Pilih gaya gradien.
Tekan masing-masing kotak warna dan temukan warna yang ingin Anda tambahkan ke gradien.

FAQ

Berapa banyak warna yang dapat saya tambahkan ke gradien di Figma?

Anda dapat menambahkan warna sebanyak yang Anda inginkan dalam gaya gradien Figma standar dan mesh. Tapi cobalah untuk tidak berlebihan. Karena gradien memiliki beberapa warna transisi, lebih dari lima mungkin terlalu banyak, bahkan untuk gradien mesh.

Dapatkah saya mengimpor gradien ke Figma?

Anda dapat mengimpor gradien apa pun yang Anda inginkan ke dalam Figma. Misalnya, Anda dapat menempelkan kode dari CSS (Cascading Style Sheets) dengan membuka panel “Kode”dan menempelkan kode tersebut. Anda juga dapat mengimpor gradien dari Adobe Illustrator.

Di mana saya dapat menemukan gradien Figma gratis?

Anda dapat menemukan gradien Figma gratis dan berbayar di komunitas Figma. Ini menampilkan sejumlah besar desain cantik dan unik yang dibuat oleh pengguna Figma. Anda dapat memfilter berdasarkan plugin, file, dan widget. Cukup ketik “gradien”di bilah pencarian di bagian atas dan temukan yang Anda suka.

Dapatkan Funky Dengan Gradien Warna-warni

Gradien adalah cara terbaik untuk membuat desain berbeda dan dipersonalisasi. Dan Figma memungkinkan Anda melakukan transisi mulus antara dua warna atau lebih yang Anda pilih. Namun, jangan berlebihan. Padukan warna-warna yang serasi dan usahakan tetap berada dalam palet warna yang sama.

Apakah Anda sudah mencoba membuat gradien di Figma? Beri tahu kami di komentar di bawah gaya gradien mana yang Anda gunakan dan untuk tujuan apa Anda menggunakannya.

Penafian: Beberapa halaman di situs ini mungkin menyertakan tautan afiliasi. Hal ini tidak mempengaruhi editorial kami dengan cara apa pun.

Kirim Ke Seseorang

Perangkat Hilang