[figma]피그마에서 백그라운드 블러(background blur) 만들기

안녕하세요. 당근입니다.
오늘도 피그마 사용법을 가지고 왔어요.

오브젝트를 기준으로 뒤에 위치한 요소를 흐리게 만들어주는 백그라운드 블러 (background blur) 효과!

피그마로 적용하는 법을 알아볼건데요. 이번에도 엄청 쉽답니다.

처음부터 차근차근 알아볼까요?

먼저 뒤에 배경이 있어야 블러가 들어간 걸 확인할 수 있겠죠?

저는 언스플래시에서 예쁜 배경 하나를 삽입해봤어요.

플러그인으로 피그마에서 쉽게 삽입할 수 있습니다. 아래 글을 참조하세요.

[피그마] 고퀄리티 무료 이미지를 바로 불러올 수 있는 플러그인 : Unsplash

[피그마] 고퀄리티 무료 이미지를 바로 불러올 수 있는 플러그인 : Unsplash 안녕하세요. 당근입니다. 요즘 피그마를 활용하여 조금씩 업무도 보고 이것저것 만져보면서 적응중인데요. 오늘

nicecarrot2.tistory.com

다음은 기준이 될 도형을 만들어야겠죠. 왼쪽 상단에서 사각형 툴을 선택해서 만들겠습니다.

원하시는 걸로 만들어보세요.

이렇게 만들었어요.

원하시는 모양으로 도형을 좀 손봐주세요.

투명도가 있어야 뒤에 배경이 보이겠죠. 저는 화이트에 투명도를 10%로 설정했어요.

여기까지는 기본 세팅이었어요.

만든 도형을 선택하시고 Design탭에서 Effect 탭을 클릭해서 이펙트를 추가해주세요.

기본적으로 드롭 쉐도우(그림자 효과)가 들어갈텐데요. 여기서 설정을 바꿔서 백그라운드 블러 를 적용해줄겁니다.

Drop Shadow 라고 적힌 글자를 클릭하세요.

그럼 이너 쉐도우, 레이어 블러, 백그라운드 블러 등 효과 옵션이 나와요.

여기서 "Background blur"를 선택합니다.

이렇게 적용이 완료 되었어요.

이렇게 백그라운드 블러 앞에 아이콘을 눌러보시면 Blur 값을 조절하실 수 있어요.

저는 그림자도 좀 더 넣어서 블러 적용된 상자가 더 돋보이게 만들어 완성해봤어요.

피그마로 백그라운드 블러 넣기, 엄청 쉽죠? 상단 내비게이션 등 고정 요소에 많이 쓰이니까 잘 활용해보세요.

아참, 피그마로 프로토타이핑 할 때 요소를 스크롤에 영향받지 않고 고정시키고 싶다면 아래 포스팅도 참고해보시고요.

[figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등)

[figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등) 안녕하세요. 당근입니다. 오늘은 제가 피그마 관련 포스팅 유입 키워드들을 살펴보다가 프로토타이핑

nicecarrot2.tistory.com

당근이었습니다.

[figma] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기 (0)	2022.05.24
[figma] 물결 디자인이 이렇게 쉽다고...? 웨이브 만드는 꿀 플러그인 : Get Waves (0)	2022.04.16
[figma] 피그마 작업 전에 해야할 필수 과정! 레이아웃 그리드 세팅하는 방법! (0)	2021.11.01
[figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등) (4)	2021.08.27
[figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) (2)	2021.08.26

친절한 당근 블로그