피그마 신기능 '매칭 레이어' 사용법

 

피그마 신기능 '매칭 레이어' 사용해보셨나요?

디자이너 입장에서 간만의 유용한 업데이트였다고 생각되는 기능인데요,

유사한 레이어를 자동으로 선택하여 동시에 수정할 수 있는 기능, '매칭 레이어' 사용법에 대해 알아보겠습니다.

 

 

1. 두개의 프레임을 생성하여 '안녕하세요' 라고 입력한 텍스트를 복사 + 붙여넣기 해보겠습니다.

 

 

2. 둘중 하나의 프레임만 선택한 상태에서 상단의 '매칭 레이어' 도구를 선택해보겠습니다.

 

3. 동일한 레이어가 선택되었으면, 폰트를 바꾸어보겠습니다.

 

4. 이번엔 도형을 Frame 1에 추가하고 Frame 2에 붙여넣어 보겠습니다.

 

5. 하나의 도형만 선택한 상태로 상단에 매칭 레이어 도구를 클릭하면 동일한 요소들이 모두 선택됩니다. 그 상태에서 크기를 줄여보겠습니다.

 

6. 하나의 요소에만 리사이징을 했음에도 불구하고 동일한 요소의 사이즈가 줄어든 것을 확인할 수 있습니다. 

 

웹/모바일 UI/UX 설계 시 매칭 레이어 기능을 활용하면, 별도의 컴포넌트를 만들지 않아도 동일한 요소를 한번에 선택하여 수정할 수 있어 매우 활용도가 높습니다. 컴포넌트로 설정하기에는 중요도가 낮지만 자주 활용되는 요소들은 매칭 레이어 기능을 이용해 수정하며 사용하면 될 것 같습니다!