피그마 레이어 꼭 정리해야 돼요?
협업이 필수인 인하우스에서 레이어 가이드 만들기
안녕하세요, 삼쩜삼 프로덕트 디자이너 장현명입니다.
인하우스 프로덕트 디자이너의 메인 툴이 “Sketch → Figma”로 전환되는 요즘
자비스앤빌런즈 디자인 챕터 그루밍시즌에 TO-DO 리스트에 살짝(?) 역행하는 제안을 했어요.
레이어 정리 해볼까요?
레이어 정리의 중요성
이 문제를 제안한 이유는 2가지였어요.
공유되고 있는 각각의 피그마 결과물을 재생산하고 있었음
불특정 상황에 따라 히스토리 없이 디자인을 수정/관리할 수 있어야 했음
회사 신규 디자이너가 늘어난 이 시기에 내부 룰을 만들기에 적정한 시기였고, 기준이 되는 Hand off 템플릿을 제작하자는 분위기가 자연스럽게 이야기 나온 것!
그래서 저의 팀에서 정의한 Figma 레이어 정리 가이드를 공유드릴게요!
너무 기본적인 내용이라 대실망 주의
모든 것은 Frame 안에 있다
최종 레이어 패널은 Section을 최상위로 두고, Frame in Frame을 목표로 하기로 했어요.
Section은 주로 프로젝트 단위로 그룹화했고, 시작 Frame은 Preset(디바이스)이었어요.
Level
상위레벨이 하위레벨에 속하지 않도록 구성해요. 단 같은 레벨은 하위에 속할 수 있어요.
Frame 톺아보기
Preset도 Frame인데.. 다 넣으면 되는 거 아닌가요?
맞아요. 하지만 디자인에도 뎁스가 있듯이, 레이어 패널에도 뎁스 관리가 필요해요.
왜? 위에서 이야기한 내용처럼 우린 모든 화면을 공유 및 재생산하고, 불특정 상황에 따라 히스토리 없이 디자인을 수정/관리할 수 있는 환경이 필요해요.
Preset 안 Frame에 Margin을 적용한 작업과 없는 작업이 있어요
각자의 작업 스타일이 있지만, 뎁스가 높은(Navigation, Alert, Tooltip, 레이어 위 이미지를 겹쳐서 표현 등) 디자인을 제외한 Body 영역은 Auto layout을 통해 Margin을 적용해서 작업해요
Group 톺아보기
Frame, Group 차이는 무엇인가요?
시각적으로는 큰 차이가 없지만, 속성에서 차이가 있어요.
Group: 리사이징 시, 내부 오브젝트 사이즈 변환이 생김(소수점은 덤 �)
Frame: Auto layout, Constraints를 통해 내부 오브젝트 사이즈 변환 시 모양을 계속 유지됨
그럼 Group은 언제 쓰는 건데요..
디자인하다 보면 변칙적인 상황이 생겨 종종 필요하지만..
1. 레이어가 너무 많아 시각적 정보 정리가 필요할 때
2. Auto layout, Constraints를 사용할 수 없는 상황
위 상황 시, 적절히 사용을 지향해요.
협업에 필요한 레이어 정리
결론은 협업이 필수인 인하우스에서는 레이어 정리 가이드 만들면
교통정리에 도움이 됩니다.
감사합니다!
