Cara Memburamkan Latar Belakang di Figma – Panduan Cepat untuk Efek Latar Belakang

Pelajari cara memburamkan latar belakang di Figma menggunakan blur latar belakang dan efek layer. Cocok untuk desain UI dan overlay yang terlihat rapi.

Create Stunning Product Video & Docs with AI

Tutorial ini dibuat dengan Trupeer dalam waktu kurang dari 5 menit

Buat Gratis

In this guide, you will learn how to apply a blur effect to a frame in Figma using the design menu.
Follow the detailed steps to achieve the desired blurring of an element in your design project.

A background blur effect in Figma gives your design a frosted glass appearance, commonly used in modals, cards, and overlays.

Step 1: Prepare the Blurring Layer

Create a Shape
Use a rectangle or any shape/frame where you want the blur effect to appear.
Add a Fill
Fill it with a solid color (e.g., white or gray).
Lower the Opacity
Reduce the layer’s opacity (typically around 10–40%). This step is essential blur won’t show without transparency.

Step 2: Apply the Background Blur

Select the Layer
Click the shape you just created.
Go to Effects Panel
On the right sidebar, click the "+" next to Effects, then choose Background Blur from the dropdown.
Adjust the Blur Value
Click the settings icon next to the effect and use the slider to control how blurry the background appears.

Optional: Fine-Tuning

You can combine background blur with drop shadows for added depth.
Adjust opacity and blur together to create either a soft frosted look or a strong, glassy one.

Step-by-Step Guide: How To Blur Background in Figma

Step 1

To begin applying a blur effect in Figma, first select the frame you wish to blur.

Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it.

In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

To begin applying a blur effect in Figma, first select the frame you wish to blur. Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it. In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

Step 2

Once the new effect is added, a drop-down menu will appear. Click on this menu and select 'Layer Blur.' The blur effect has now been successfully applied to your chosen frame.

Tips pro untuk memburamkan latar belakang di Figma

Terapkan Blur ke Objek:
Pilih objek (gambar, shape, atau frame) yang ingin Anda buramkan. Di sidebar kanan pada bagian Effects, klik ikon + dan pilih Background Blur atau Layer Blur dari menu dropdown.
Atur Intensitas Blur:
Setelah menerapkan blur, gunakan slider untuk menyesuaikan intensitas blur. Anda dapat menambah atau mengurangi jumlah blur untuk mencapai efek yang Anda inginkan.
Gunakan Gaussian Blur untuk Kontrol Lebih Baik:
Untuk kontrol yang lebih presisi atas efek blur, gunakan Gaussian Blur, yang menghasilkan blur lebih halus dan bertahap.
Memburamkan Gambar atau Frame:
Jika Anda memburamkan gambar atau frame, pastikan gambar tersebut dipilih. Anda bisa memburamkan gambar tanpa memengaruhi elemen desain lainnya.
Beberapa Blur pada Layer:
Anda dapat menerapkan beberapa efek blur pada layer yang berbeda. Misalnya, jika Anda ingin latar belakang buram dengan teks yang jelas, terapkan blur hanya pada layer latar belakang.

Kesalahan umum saat memburamkan latar belakang di Figma

Memburamkan Layer yang Salah:
Perbaikan: Periksa kembali layer yang Anda pilih sebelum menerapkan blur. Gunakan Panel Layers untuk memastikan Anda mengedit layer yang benar.
Terlalu Sering Menggunakan Efek Blur:
Perbaikan: Jangan menerapkan blur terlalu banyak pada elemen penting seperti teks atau logo, karena dapat mengurangi keterbacaan. Gunakan blur secukupnya untuk penekanan desain.
Kejelasan yang Tidak Disengaja Setelah Blur:
Perbaikan: Jika menerapkan blur pada gambar menghasilkan kejelasan yang tidak diinginkan, sesuaikan jumlah blur dan coba efek berbeda seperti Gaussian Blur untuk mendapatkan tampilan yang diinginkan.
Blur Tidak Muncul saat Diekspor:
Perbaikan: Jika efek blur tidak terlihat saat Anda mengekspor, pastikan Anda mengekspor dengan resolusi tinggi (PNG atau SVG) untuk kualitas yang lebih baik.

FAQ Umum untuk memburamkan latar belakang di Figma

Bisakah saya memburamkan teks di Figma?
Anda bisa memburamkan bentuk vektor dan gambar, tetapi Anda tidak dapat langsung menerapkan efek blur pada teks di Figma. Namun, Anda bisa merasterisasi teks menjadi sebuah bentuk, lalu menerapkan efek blur.
Bagaimana cara memburamkan latar belakang sebuah desain?
Pilih layer latar belakang atau gambar, terapkan efek Layer Blur, lalu sesuaikan intensitasnya. Ini bagus untuk menciptakan fokus pada elemen di bagian depan.
Bisakah saya mengontrol arah blur?
Efek blur Figma diterapkan secara seragam. Jika Anda memerlukan blur dengan arah (seperti motion blur), Anda perlu menggunakan alat pengeditan gambar eksternal seperti Photoshop atau Illustrator sebelum mengimpor kembali gambar ke Figma.
Apakah efek blur akan tetap ada setelah mengekspor desain?
Ya, efek blur akan tetap ada pada desain yang diekspor selama file disimpan dalam format yang didukung seperti PNG atau JPG.
Apakah ada cara untuk memburamkan hanya sebagian dari sebuah gambar?
Ya, Anda bisa menggunakan mask di Figma untuk mengisolasi area tertentu dari gambar dan menerapkan efek blur hanya pada bagian tersebut.
Cara screen record di mac?
Untuk screen record di Mac, Anda dapat menggunakan Trupeer AI. Ini memungkinkan Anda menangkap seluruh layar dan menyediakan kemampuan AI seperti menambahkan avatar AI, menambahkan voiceover, menambahkan zoom in dan out pada video. Dengan fitur terjemahan video AI dari trupeer, Anda dapat menerjemahkan video ke 30+ bahasa.
Cara menambahkan avatar AI ke screen recording?
Untuk menambahkan avatar AI ke screen recording, Anda perlu menggunakan alat screen recording AI. Trupeer AI adalah alat screen recording berbasis AI yang membantu Anda membuat video dengan beberapa avatar, sekaligus membantu Anda membuat avatar Anda sendiri untuk video tersebut.
Cara screen record di windows?
Untuk screen record di Windows, Anda dapat menggunakan Game Bar bawaan (Windows + G) atau alat AI tingkat lanjut seperti Trupeer AI untuk fitur yang lebih canggih, seperti avatar AI, voiceover, terjemahan, dll.
Cara menambahkan voiceover ke video?
Untuk menambahkan voiceover ke video, unduh ekstensi chrome trupeer ai. Setelah mendaftar, unggah video Anda dengan suara, pilih voiceover yang diinginkan dari trupeer, lalu ekspor video Anda yang sudah diedit.
Bagaimana cara melakukan Zoom pada screen recording?
Untuk melakukan zoom saat screen recording, gunakan efek zoom di Trupeer AI yang memungkinkan Anda melakukan zoom in dan out pada momen-momen tertentu, sehingga meningkatkan dampak visual dari konten video Anda.