[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "10. Flatten 과 Mask 활용하기"

 

https://mcode.co.kr  

메타코드M

 

 

 

안녕하세요~ 하양입니다. 🤗

 

지난 시간에는 면/선/도형 및 불리언 그룹의 속성에 대해 이해하는 시간이었다면 이번 시간은 불리언 그룹의 속성을 활용해  Flatten, 마스크에 대해 배우는 시간이 될 것 같습니다.

 

 

1.  Flatten으로 병합하기

 

레이어가 그룹형태일 때 리사이징하거나, 여러가지 제약이 있는 것처럼 한꺼번에 다루기 어려워집니다.
그래서 레이어를 Flatten으로 병합하는 기능을 활용하면 좋습니다.

 

기본 상태인 Union 상태와 Flatten 상태를 비교해보겠습니다.

 

사각형 4개를 병합하여 Union 상태로 만든 뒤에  이렇게 처음엔 icon으로 병합된 레이어 하위에 4개의 사각형이 각각 레이어로 존재합니다.

 

 

 

Flatten 상태로 변경하면, 하위 레이어들이 모두 없어지고 하나의 Layer형태로 합쳐지게 됩니다. 이걸 레이어를 Flatten 했다고 말합니다. 

 

Flatten 과 Union을 비교해보면,

Flatten된 상태로 새 벡터로 구성된 도형을 그리면 Flatten된 레이어가 그대로 크기가 확장된 것을 볼 수 있습니다.

 

하지만 Union에서 동일한 행위를 한다면,

이렇게 새로운 Vector1 라는 레이어가 하위에 추가로 생기는 것을 확인할 수 있습니다.

 

 

 

같은 도형을 유니언, 플랫튼으로 각각 합치니까 겉으로 보기에부터 확연한 차이가 느껴집니다.

 

개별도형을 자주 수정하고, 하나의 색으로 운영할 경우엔 레이어를 유니언 상태로 합치는 것이 좋습니다.

하지만 형태가 복잡하거나 복합적인 컬러를 사용한 그래픽이라면 플랫튼 상태로 사용하는 것이 좋습니다.

 

 

2.  마스크(Mask) 활용하기

 

 

 

마스크는 포토샵에서 봤던 개념이라 반가웠습니다. 특정 개체를 프레임으로 지정하여 그 영역만큼만 하위 레이어를 노출할 수 있는 기능을 마스크 기능이라 합니다.

 

 

실제 하위 레이어의 크기보다 적은 부분이 마스크에 표시되는 것을 확인할 수 있습니다. 

 

마스크를 적용하는 방법은 생각보다 간단합니다. 마스크로 사용할 도형을 그린 뒤에 마스크와 적용할 하위레이어를 모두 선택하고, 위에 원형모양의 마스크 아이콘을 클릭해서 설정하면 적용이 됩니다.

 

아래도 정사각형의 마스크에 사진을 맞춰서 노출시키는 마스크 기능을 활용하는 예시입니다.

 

 

 

 

 

피그마 입문 강의 :

 

https://mcode.co.kr/video/list2?viewMode=view&idx=78 

메타코드M

 

 

#피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠 #메타코드