피그마 Multi-Edit 기능과 활용
바쁜 현대인을 위한 요약
피그마 작업바 상단에 새로 생긴 Select Matching Layers✓ [Select Matching Layers 버튼]을 통해 같은 결의 오브젝트를 한 번에 선택할 수 있다
✓ 서로 다른 프레임, 다른 컬러, 다른 텍스트 내용, 다른 위치에 있더라도 같은 결의 오브젝트라면 [Select Mathicng Layers 버튼]을 통해서 한 번에 선택해 수정할 수 있다.
✓ 혹은 단축키 맥북 기준 [Option+Command+A]를 눌러 매칭 레이어를 선택할 수 있다.
멀티 에딧이란? (Multi-Edit)
말 그대로 오브젝트들을 한 번에 여러 개 선택해서 수정할 수 있는 기능입니다. 이번에 새로 업데이트 된 기능인데, 기존에 컴포넌트와 조금 비슷한 개념이지반 더 범용적이에요.
컴포넌트를 만들어 두면, 프레임과 상관없이 수정사항이 인스턴스에 반영되는 것과 비슷한데요. 개별 오브젝트들도 별도의 컴포넌트 설정 없이도 빠르게 많은 프레임들의 디자인 요소들을 수정할 수 있는 기능이에요.
대표 기능
1) 각기 다른 프레임의 오브젝트 선택 및 수정
2) 각기 다른 프레임의 텍스트 수정
3) 컴포넌트 베리언츠의 동시 다량 수정
그럼 함께 잡히는 오브젝트의 기준이 뭔가요?
매칭 레이어 선택 시 함께 선택되는 오브젝트의 기준이 뭔지 궁금했는데요. "위치나 컬러 등이 달라도 상위 프레임이 같고 레이어 명이 같으면" 함께 잡힙니다. 따라서 다른 도형처럼 보여도, 같이 위 기준이 충족되면
멀티 에딧(multi edit)이 가능합니다.
색상이 다른 베리언츠 버튼들도 한 번에 선택할 수 있어요어떻게 활용할 수 있나요?
사실 새로운 기능은 직접 써보면서 익히는게 가장 좋지만 저도 직접 사용해보면서 정리한 내용을 공유해봐요.
주요 활용 케이스
오브젝트의 위치를 한 번에 정렬하고 싶을 때 (로고, 특정 문구, 버튼 등)
오브젝트들을 한 번에 선택하고 각자 따로 오토 레이아웃 설정하고 싶을 때
다량의 오브젝트를 한 번에 여러 프레임으로 복사 붙여넣기 하고 싶을 때
각 프레임에 흩어져있는 텍스트를 동시에 수정하고 싶을 때
각 프레임에 흩어져 있는 오토 레이아웃 된 오브젝트들의 정렬, 사이즈 등을 변경하고 싶을 때
각 프레임에 흩어져 있는 오브젝트들의 상위 프레임을 변경하고 싶을 때
여러 베리언츠(Variants)에 아이콘 추가, 텍스트 수정 등이 필요할 때
스마트 애니메이션 프로토타이핑 만들었는데, 갑자기 애니메이션 먹인 요소 사이즈나 위치 수정하고 싶을 때 (개별로 사이즈 조정하지 않고도 스마트 애니메이션이 깨지지 않도록 수정가능)
주요 활용
같은 오브젝트가 있는 여러 프레임의 디자인 목업 수정
여러 베리언츠에 새로운 오브젝트 추가도 유연하게 가능
스마트 애니메이션의 빠른 수정피그마 유튜브 채널에서 멀티 에딧에 대한 짧은 영상들을 활용 케이스 별로 올려 두었는데 직접 보는게 훨씬 이해가 빠르다!
그리고 직접 아래 피그마 플레이 그라운드에서 직접 해보며 영상을 보면 바로 이해할 수 있으니 추천!
