Multi-edit 이란,
여러 화면에 있는 레이어를 한 번에 편집할 수 있는 기능입니다. (단축키 맥 기준 cmd + option + a)
멀티 에딧 기능이 나오기 전에는 요소 편집을 위해선 개별 선택한 뒤 작업을 해야 했습니다. 한 번에 작업을 하고 싶어도 아래 이미지처럼 하나의 묶음처럼 커졌기 때문에 반복 작업은 피할 수 없었는데요
Before
 |
 |
| 사이즈 키우기: 선택한 요소들은 하나의 묶음으로 커집니다. | 회전하기: 선택한 요소들은 하나의 묶음으로 회전합니다. |
After
Multi-edit 기능을 사용하고 난 뒤 불편함이 개선되었습니다.
사이즈를 키웠을 때 요소는 포지션 변경 없이 사이즈가 커집니다.
<Multi-edit : 텍스트 데이터 한 번에 변경하기>
텍스트 내부 요소를 변경하기 위해서는 개별적으로 선택 후 내용을 입력해야 했습니다.
중복되는 요소의 데이터를 한 번에 변경하기 위해 multi-edit 기능 중 하나인 텍스트 변경을 사용할 수 있습니다.
텍스트 데이터 한 번에 변경하기
변경하려는 레이어 선택 후 multi-edit 버튼을 선택합니다.
매칭되는 레이어가 선택되었습니다.
enter 키를 눌러 텍스트를 입력합니다. 입력 값에 따라 매칭되는 레이어 내부의 텍스트가 실시간으로 적용됩니다.
끝! 여러 프레임에 있는 데이터를 멀티 에딧 기능을 이용해 쉽게 변경할 수 있습니다.
<Multi-edit : 화면 내 개별 요소 일괄 선택>
레이어를 선택한 뒤 메뉴 상단 영역의 multi-edit 버튼을 선택합니다.
그러면 자동으로 선택한 레이어와 일치하는 레이어가 선택됩니다. (이때 레이어 이름은 동일한 이름을 갖고 있어야 합니다.)
변경하고자 하는 옵션(e.g: 사이즈 변경, 컬러 변경, 회전, 포지션 변경)을 선택하면 multi edit 적용된 요소들이 동일하게 적용됩니다.
<Multi-edit : 동일한 위치의 레이어 한번에 선택하기>
“Mutli edit” 기능을 사용해 조건에 맞는 스타일을 지정해 활용할 수 있습니다.
조건) 첫 번째 레이어에 그림자를 추가한다
첫 번째 레이어를 선택 후 Select matching layers 버튼 선택합니다.
첫 번째 레이어만 선택되었습니다. 레이어에 그림자를 추가하고 위치를 이동하면 나머지 레이어도 동일하게 적용됩니다.
<Multi-edit : 다중 편집 정렬 (align) 여러 요소들 한번에 정렬하기>
3개의 프레임이 있습니다.
일치하는 레이어를 선택합니다.
우측의 정렬 패널로 이동해 좌측 정렬을 누르면 모든 개체가 가장 왼쪽의 개체에 정렬됩니다 .
중앙 정렬을 빠르게 하려면 다중 선택한 후 개체 선택한 상태에서
Shift 키를 누른 채 현재 선택된 개체를 함께 정렬합니다. 프레임 안에서 하나의 그룹 형태로 정렬됩니다.
가로 중심 정렬을 해줍니다.
세로 중심 정렬을 해줍니다. 개체가 함께 정렬 됩니다.
<Multi-edit : 오토 레이아웃>
screen의 “multi-option” 레이어를 선택 후 멀티 에딧 버튼을 선택합니다.
multi-option 이름의 레이어가 일괄 선택됩니다.
선택한 레이어를 오토 레이아웃으로 만들면 스크린 내부의 레이어가 각각 auto layout 적용됩니다.
스크린 내부의 레이어가 각각 오토 레이아웃이 적용됩니다.
<Multi-edit : 동일한 요소 한 번에 컴포넌트로 변경하기>
메인 컴포넌트와 인스턴스 컴포넌트 구분
어떤 상황에서 사용할까요? 🌝
화면에 동일한 요소가 여러 개인 상황에서 인스턴스 컴포넌트가 되기를 원하는 시점이 올 겁니다. 그때 잊지 말고 이 기능을 이용해 보세요
첫 번째 프레임에서 개체를 선택하고 상단 표시줄에서 멀티 에딧 버튼을 선택합니다.
나머지 프레임에는 해당 개체가 모두 선택되어 있는 것을 볼 수 있습니다.
상단 메뉴의 멀티 에딧 버튼을 선택합니다.
그렇게 하면 모든 항목이 가장 왼쪽 상단 항목의 인스턴스로 대체되었음을 알 수 있습니다.
각 프레임의 구성 요소들은 인스턴스 컴포넌트이고 메인 컴포넌트는 프레임 밖에 자동 생성된걸 확인할 수 있습니다.
😱 Multi-edit 버튼이 안나와요
상단 멀티에딧 버튼이 미노출 되는 경우는 다음과 같은 상황에서 발생됩니다.
- 프레임 또는 섹션에 묶여 있나요?
프레임(frame)이나 섹션(section)에 있지 않으면 해당 옵션은 노출되지 않습니다. 옵션이 보이지 않는 경우 프레임 (frame) 또는 섹션(section)에 포함되어 있는지 확인해주세요 - 레이어 이름이 동일한가요?
레이어의 이름이 같은 이름인지 확인해주세요.
레이어 이름이 다음과 같은 형태라면 멀티에딧 버튼은 보이지 않습니다. - 버그..? 🤪
버그가 있어요.. 프레임이나 섹션에 포함이 되어 있고 레이어 이름이 똑같은데 멀티에딧 버튼이 나오지 않을 때가 있어요.
그럴 땐 곧 패치가 되려니 믿고 기다려주세요…흡