책 제목 : 실전 피그마UI/UX 디자이너, 서비스 기획자를 위한 실무 입문서 / 김범용 (스무) 지음 읽은 부분 : PART 4. 오토 레이아웃 살펴보기, PART 5. 컴포넌트&배리언츠 적용하기 인상 깊게 본 내용 :< PART 4. 오토 레이아웃 살펴보기 >
텍스트 기준선 정렬하기
•
텍스트 기준선 기준으로 오브젝트 정렬하는 기능
•
서로 다른 크기의 텍스트를 오토 레이아웃으로 설정할 때 도움이 된다.
•
Auto layout 패널 > (Advanced auto layout settings) ... 아이콘 클릭 > Align text baseline 체크 or 단축키 B를 눌러 정렬 모드를 변경 > 텍스트가 폰트의 기준선을 기준으로 정렬된다.
•
서로 다른 종류 폰트 사용하는 경우에도 텍스트 기준선 정렬 옵션을 통해 텍스트 정렬을 깔끔하게 만들 수 있다.
< PART 5. 컴포넌트&배리언츠 적용하기 >
•
컴포넌트 : 디자인 전체에서 재사용할 수 있는 요소, 재사용성이 핵심, 반복 사용 요소들은 컴포넌트로 만들어 관리하면 효율적이며, 모든 요소를 한 번에 편집할 수 있어서 유지보수가 쉽다.
인스턴스 컴포넌트의 속성 변경하기
•
메인 컴포넌트와 별개로 인스턴스 컴포넌트에서 독립적으로 색상, 코너 둥글기, 글자 크기 속성을 변경할 수 있다.
•
인스턴스 컴포넌트에서 독립적으로 변경된 속성들은 메인 컴포넌트의 영향을 받지 않는 상태가 된다.
•
독립된 속성 초기화하기
•
속성이 변경된 인스턴스 컴포넌트 선택 > 오른쪽 Component 패널 > (Instance options) 아이콘 ... 클릭 > 초기화 > 메인 컴포넌트와 속성 연결된 상태로 만들 수 있다.
•
Reset all changes 선택 > 인스턴스에서 독립적으로 수정된 모든 변경값이 초기화된다.
•
Reset fill 클릭 > 개별 속성을 각각 초기화 할 수 있다.
•
텍스트 선택 > Component 패널 ... 아이콘 클릭 > Reset text 선택 > 변경된 속성 초기화된다.
텍스트에서도 fill, text 등 개별 속성을 초기화 할 수 있다.
•
색상 변경한 인스턴스 컴포넌트의 경우 색상을 메인 컴포넌트와 다시 같게 만든다고 해서 독립적으로 변경된 속성이 초기화 되지 않는다.
Components 패널 > Reset fill을 선택하여 초기화해야 색상이 정상으로 메인 컴포넌트와 동기화된다.
•
독립된 속성을 메인 컴포넌트로 이전하기
•
메인 컴포넌트와 인스턴트 컴포넌트는 다른 페이지에서 사용하는 경우가 많다. 인스턴스 컴포넌트로 시안을 잡는 도중 인스턴스 컴포넌트에서 변경한 속성을 메인 컴포넌트에 적용하고 싶은 경우가 발생한다.
•
인스턴트 컴포넌트 선택 > Component 패널 (Instance options) ... 아이콘 클릭 > Push changes to main component 선택
•
인스턴스 컴포넌트의 속성을 메인 컴포넌트로 이전하면 메인 컴포넌트와 인스턴스 컴포넌트가 자동으로 동기화된다.
•
메인 컴포넌트의 색상을 변경하여 인스턴스 컴포넌트와 속성이 동기화된 것을 확인한다.
•
메인 컴포넌트 찾기
•
인스턴스 컴포넌트 선택 > Component 패널 > Go to main component 아이콘 클릭 > 사용 중인 인스턴스 컴포넌트의 메인 컴포넌트로 이동할 수 있다.
•
캔버스 아래쪽 Retutn to instance 버튼 클릭 > 다시 이전 인스턴스 컴포넌트로 돌아갈 수 있다.
•
삭제된 메인 컴포넌트 복구하기
•
실수로 메인 컴포넌트가 삭제된 경우 모든 인스턴스 컴포넌트와의 동기화가 끊겨 컴포넌트 역할 수행할 수 없는 상태가 된다.
•
메인 컴포넌트가 삭제된 인스턴스 컴포넌트 선택 > Component 패널 Restore Component 버튼 클릭 > 삭제된 메인 컴포넌트 복구
•
복구된 메인 컴포넌트는 기존 인스턴스 컴포넌트와 자동으로 동기화 된다.
* 인스턴스 컴포넌트 해제하기
•
인스턴스 컴포넌트 해제 : Component 패널 Instance options ... 아이콘 클릭 > Detach Instance 선택
•
마우스 오른쪽 버튼 클릭 > Detach instance
•
Ctrl + Alt + B
•
해제된 인스턴스 컴포넌트는 일반 프레임으로 되돌아간다.
•
메인 컴포넌트는 Detach instance 기능으로 해제할 수 없다. 인스턴스 컴포넌트를 복제하고, 복제된 인스턴스 컴포넌트를 해제한 다음, 메인 컴포넌트를 삭제한다.
코멘트피그마 사용 시, 헷갈리는 부분을 자세하게 다시 살펴볼 수 있어서 유익했다.
어떻게 적용할 수 있을까책에서 배운 팁을 활용하면 실수나 작업 시간을 줄일 수 있어서 앞으로도 책을 자세히 살펴보려고 한다.
* 출처 : 실전 피그마