Multi-Edit 써 보기
구조적인 디자인이 더욱 빛나는 멀티-에디트
새로운 기능
Multi-Edit
피그마에서 3월 7일 멋진 기능하나를 내놓았습니다. Multi-Edit라는 기능입니다. 기능은 매우 간단하지만, 많은 이야기를 할 수 있는 기능입니다. 제작 때와 수정할 때 모두 유용하고, 시간이 엄청나게 단축되는 기능이니 꼭 익숙하게 사용하시면 좋겠습니다.
비슷하게 구성된 페이지에서 같은 레이어를 자동으로 선택해 주는 기능입니다.
자동 선택이 안되는 경우:
레이어 이름이 다를 경우
다른 그룹이나 프레임에 들어 있을 경우
인공지능으로 알아서 비슷한 레이어를 골라주는게 아니라, 왼쪽 레이어 패널에서의 구조(depth)와 레이어의 이름이 같으면 선택해주는 기능입니다. 같은 화면의 여러 케이스를 테스트 하시거나, 컴포넌트 개선을 위해 비슷한 화면을 여러 개 만드시는 분들은 각각의 화면 프레임이 거의 비슷한 구조를 갖고 있을 겁니다.
제작 중인 디자인 작업의 경우는 같은 레이어를 선택해서 다른 요소에 영향을 최소한으로 주면서 변형할 수 있습니다. 디자인을 시작하는 경우에는 빠르게 만든 레이어와 요소를 쉽게 선택해서 컴포넌트로 만들고 관리할 수 있습니다.
Multi-Edit가
작동하는 방식
Multi-Edit는 각 컨테이너에 들어있는 순서(레이어의 트리 구조)에 맞춰서 선택됩니다.
피그마의 컨테이너에는 섹션과 프레임이 있습니다.
Multi-Edit는 프레임 기준으로 작동하고, 상위 컨테이너로는 섹션만 인정합니다. 이 기능을 활용하기 위해서는 같은 뎁스에 같은 이름을 가진 구조가 필요합니다.
레이어와 개체를
한 번에 선택하고
편집하는 기능
전통적인 벡터 그래픽툴이 갖고 있는 선택 기능은 단순합니다. 어도비 일러스트레이터의 경우는 여러 객체를 선택할 수 있는 기능이 있고, 선택된 상태에서 객체의 색이나 크기를 수정할 수 있습니다. 다만 많은 객체가 겹쳐 있을 경우는 선택하기가 다소 까다롭죠. 일러스트레이터에 비해서 최근에 나온 어피티니 디자이너의 경우는 선택한 계층에 맞게 선택하게 해 주고, 작업하는 영역에 맞춰서 선택하게 해 줍니다.
피그마의 새로운 기능은 조금 더 똑똑한 선택과 편집을 지원합니다.
실제 테스트는 피그마 커뮤니티의 플레이 그라운드(Multi-edit playground 링크)에서 직접 시험해 볼 수 있습니다.
하나의 섹션 안에 두 개의 UI를 만들고, Multi-Edit를 선택하면 비슷한 객체와 프레임, 레이어를 선택하게 됩니다. 피그마에서 수없이 많은 프레임을 만들고 관리하는데, 모든 프레임에 동시 수정 작업이 필요한 경우가 종종 있습니다. 그럴 경우, 이 기능을 사용하면, 수정 작업을 무척이나 빠르게 할 수 있을 것으로 예상됩니다.
같은 계층에 같은 이름의 레이어나 개체가 선택되면, 선택된 개체를 중심으로 오토레이아웃의 순서를 바꾸거나 크기를 변경하거나, 그룹핑 하는 것이 가능합니다.
Multi-Edit의 기능을 충분히 활용하려면,
1. 섹션 기반으로 화면 작업을 하는 것이 중요합니다.
2. 같은 뎁스에 있어야 합니다.
3. 레이어, 개체의 이름이 같아야 합니다.
선택은 섹션 별로 적용이 가능합니다. 그래서 섹션 별 디자인 작업이 더욱 쓸모 있게 되었습니다. 기존에는 프레임이나 섹션 같은 컨테이너를 고려하지 않고, 선택하고 그룹핑을 하면 그게 마지막 선택한 프레임이나 컨테이너로 합쳐졌습니다.
디자이너는 작업할 때, 섹션 별로 비슷한 디자인이 있으면, 각각의 섹션별로 작업하게 싶겠죠? 예를 들어, 디자인 시안을 3개 만들고, 섹션으로 구분했습니다. 그런데, 각 섹션별로 똑같은 그룹핑을 3번 해야 하는 상황이 있을 수 있습니다. 이럴 때, Multi-Edit를 사용하면, 그룹핑이 각 세션 안에서 됩니다.
Case A와 B의 파란 버튼의 경우, 같은 뎁스 안에 있을 경우 쉽게 선택하여 사용할 수 있습니다.
그런데, Case C의 경우는 컨테이너가 하나 더 있어서 Multi-Edit로 선택되지 않습니다. 프레임의 이름이 바뀌어도 선택되지 않습니다. 일단 선택이 되면, 색과 크기, 순서부터 오토 레이아웃 기능까지 더 효과적으로 쓸 수 있습니다.
실제로 기존에 답답하던 선택 절차를 획기적으로 줄여주는 기능이라고 생각합니다. Multi-Edit는 맥락에 따라 추가 작업이 가능합니다.
중요하게 생각되는 기능은 3가지입니다.
Multi-Edit Text
하나의 텍스트 레이어에서 문자열을 수정하면
함께 선택한 다른 텍스트 레이어도 업데이트됩니다.
텍스트를 한 번에 수정하는 방법이 찾기 & 바꾸기 밖에 없었는데 내용을 넘어서 크기와 색까지 바꿀 수 있어서 좋습니다.
특히 어느 정도 완성된 화면들에서 반복적인 텍스트 수정을 할 때, 유용합니다.
이럴 경우에는, 텍스트 레이어의 이름도 적절하게 지어주는 것이 좋습니다.
Multi-Edit Variants
이미 베리언트를 만든 컴포넌트 같은 경우는 베리언트를 선택해서 공통부분을 쉽게 수정할 수 있습니다.
하나의 컴포넌트 안에 버튼처럼 여러 컴포넌트가 있을 때, 공통된 수정 사항을 반영할 때 편리합니다.
Create Multiple Components
여러 개체나 프레임을 선택한 후, 각각의 개체와 프레임을 따로따로 컴포넌트로 만들 수 있습니다.
벡터 아이콘을 한 번에 컴포넌트로 만들 때 너무 편리합니다.
구조적인
디자인
프로덕트 디자인 트렌드 중 하나는 시스템 혹은 구조적인 디자인의 개념입니다. 디자인의 기본 요소를 정리하고 세부 요소를 구성하여 맥락이 있는 구조를 만들어야 하는 압력은 점점 커지고 있습니다.
구조적인 디자인의 기본 요소는 계층이 있는 구조와 이름입니다. 화면(뷰, 스크린 등)을 구성할 때, 화면의 기능과 용도를 미리 정해야 하고, 구분을 위해서 이름을 적절하게 짓는 것이 중요합니다.
이름을 제대로 쓰는 것은 포토샵부터 있었던 에티켓으로 공동 작업의 기본 요소라고 할 수 있습니다. 저 같은 경우에는 화면의 각 부분에 이름을 모두 짓고, 컨테이너와 콘텐츠를 분리하여 관리하여 관리하고 있습니다. 각각의 컨테이너와 콘텐츠, 내비게이션 등을 계층으로 분리하여 관리하면 작업량이 많아져도 관리와 개선이 쉬웠습니다.
피그마의 신규 기능을 효율적으로 활용하기 위해서는 이름과 계층 구조를 통한 디자인 체계 만들기와 규격화가 중요합니다. 피그마가 이름을 중요하게 생각하는 것을 고려하면, 향후 피그마 사용자들을 위한 AI 제안이 관련 기능을 내놓을 것으로 예상됩니다. 레이어 이름과 구조를 규격화 하는 것은 기계가 이해하기 쉬운 구조를 만드는 데 도움이 될 것입니다.
주니어 디자이너들은 이 기능을 통해 베테랑 디자이너의 경험을 자연스럽게 앞지를 수 있을 것으로 예상됩니다. 이러한 추세 속에서 효율적이고 체계적인 작업 방식을 구축하는 것이 디자이너들에게 매우 중요합니다.
Multi-Edit의 철학
https://www.figma.com/blog/behind-the-feature-the-multiple-lives-of-multi-edit/ 에서 Figma 제품 담당 부사장, Sho Kuwamoto가 Multi-Edit에 대한 철학에 대해서 말합니다.
"Figma에서 일하면서 제가 좋아하는 것 중 하나는 디자인 도구가 어떻게 작동해야 하는지에 대한 기초에 의문을 제기하게 된다는 것입니다. 때때로 이러한 질문은 큰 새로운 기능으로 이어지며, 때로는 많은 작은 개선으로 이어집니다.
다중 편집은 두 가지 기능을 모두 수행하는 드문 예입니다. 우리는 2019년에 처음으로 다중 편집에 대한 아이디어를 내놓았습니다. 우리가 씨름하고 있던 핵심 문제 중 하나는 사람들에게 요청하는 반복적인 편집의 양이었습니다.
아시다시피, 크기 변경과 수정은 지루할 수 있으며, 우리는 이 프로세스를 더 쉽게 만들기 위해 다양한 메커니즘을 사용했지만 그 중 어느 것도적합하지 않았습니다.
모든 수정 사항이 마법처럼 모든 변형에 동시에 적용되는 모드로 들어갈 수 있다면 어떨까요? 여러 디자인을 한꺼번에 편집하고 싶을 때가 많지 않나요? 우리는 화이트보드에 스케치를 하고 이를 Multi-Edit라고 불렀습니다."
이 아이디어는 6년간 잠자고 있다가, 피그마에 토큰과 스타일 등의 구조화된 디자인을 지원하는 기능이 추가되면서 다시 살아납니다. 이 과정이 드라마틱해서 좋은 기능의 제품을 만드는 훌륭한 사례가 될 수 있을 듯 합니다.
https://www.figma.com/community/file/1343991048099728924
