[피그마 공부] 메타코드 강의별 스터디 후기 (마스크 활용하기)

 

마스크의 아이콘을 보면

부분만 색칠된 동그라미를 볼 수 있다.

특정 레이어의 영역만큼만

하위 레이를 보여준다는 의미이다.

 

 

배경컬러 영역이 마스크로 지정된 영역이고

그 안에있는 하위레이어인 텍스트가

마스크로 지정된 영역의 범위 내에서만 노출되고 있다.

즉 마스크 외의 범위는 잘리는 것이다.

 

 

마스크로 지정된 범위는 꼭짓점을 드래그해서

범위를 늘릴수도 있다.

마스크 밖의 범위가 아예 잘려서 없어져버리는 것이 아니라숨겨져서 보이지 않을 뿐 그대로 있음을 확인할 수 있다.

 

 

윗줄의 상단 아이콘 3가지중

맨 오른쪽에 위치하고 있으며

포함될 레이어들을 중복으로 선택해준 후

아이콘을 눌러주면 마스크범위로 묶이며

부분만 보이게 된다.

 

 

마스크의 범위를 설정해도

하위 레이어들의 스타일 요소는 통합되지 않기 때문에

색 등을 개별로도 수정이 가능하고

새로운 레이어를 더 추가할 수도 있다.

 

 

이 마스크 범위를 설정하는 기능은

썸네일을 만들 때 많이 사용한다고 한다.

위 그림처럼 이미지등을 삽입할 때 일정 규격에 맞추기 위해

미리 정해둔 사각 레이어를 기준으로 마스크 범위를 설정해서

그 부분에 이미지가 알맞게 들어가게끔 말이다. 

 

 

이미지의 크기를 원하는 규격만큼 줄이다보면

비율이 깨져서 이상해지거나 보기힘들정도로 축소되는 등의 문제가 있었는데

마스크라는 기능을 통해서 원하는 규격만큼만 보이도록 설정할 수 있어서

이러한 문제들을 해결할 수 있을 것 같다.오늘도 유용한 새로운 지식 습득 완료.

 

: https://mcode.co.kr/

메타코드M

본 내용은 메타코드 Figma 서포터즈 강의 후원을 받아 작성되었습니다.