[피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

[ 피그마 ] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

 

 

피그마 작업중 이미지를 도형모양으로 넣는 프로필 UI 가 필요하게 되었습니다. 

 

빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다. 

 

해당내용은 포토샵의 클리핑 마스크, 피그마에서는 마스킹 을 응용한 방법입니다.

 

# 1.클리핑 마스크 란? ( Clipping Mask )

 

 

클리핑 마스크(Clipping Mask) 는 특정 도형(Shape)을 기준으로 이미지 또는 오브젝트의 특정 부분만 보이도록 잘라내는 기능입니다. 예를 들어, 이미지를 원형으로 자르거나, 텍스트 안에 이미지를 넣을 때 활용할 수 있습니다.

 

 

 

 

# 2.피그마에서 적용하기 - 이미지 가져오기

 

 1) 하단에서 Image/video ... 선택 ( 단축키 : Ctrl + Shift + K )

하단 패널

 

2) 이미지 가져오기

   

전 귀여운 강아지 사진을 가져왔습니다.

 

 

 

# 3.도형 만들기

 

 1) 하단 패널에서 Ellipse 선택 해 도형 만들기 

 

저는 원형 으로 해보겠습니다.

 

 

도형을 만들면 이렇게 됩니다.

 

 

 

 

# 4.클리핑 마스크 적용하기

 

1) 만든 도형 이미지안에 넣기 

 

 

 

2) 이미지와 도형 전체 선택하기 

 

전체선택

 

 

 

3) 클리핑 마스크 적용하기

전체선택 한 후에 마우스 우클릭 -> Use as Mask  선택 ( 단축키 Ctrl + Alt + M )

 

레이어 확인

적용된 모습

적용된 모습

 

 

 

완성된 모습

완성

 

 

 

여기까지 따라오신 분들 고생많으셨습니다.

 

이제 만든 작업물을 컴포넌트 설정해 사용하시면 더 편리하고 유용하게 사용하실 수있습니다!!

 

 

 

✅ 도움될만한 포스팅

---

 

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 표 (테이블 table) 만들기

[ 피그마 ] 초간단! 표 (테이블 table) 만들기

 

 

[정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

[ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

 

 

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

 

 

[정보공유 같이해요/TECH] - [ AI 툴 ] Figma 대체 툴 Creatie 알아보기

[ AI 툴 ] Figma 대체 툴 Creatie 알아보기

 

 

 

썸네일