레이어 101: 레이어 결합하기
워크플로를 한 단계 업그레이드할 준비가 되셨나요? 시간을 절약해 주는 영웅들을 확인해 보세요. 순식간에 새로운 디자인을 만들어 낼 수 있게 도와줍니다.
자동 레이아웃
필요한 구성 요소를 모두 갖추었으니 이제 레이아웃으로 여러 작업을 시도해 보고 싶으신가요? 자동 레이아웃은 프레임에 추가할 수 있는 속성으로, 디자인의 크기 조정, 정렬 및 간격을 자동화합니다.
새로운 레이어를 추가하거나, 긴 텍스트 문자열을 수용하거나, 다양한 기기 및 화면 크기에 반응하는 디자인을 만들어야 할 때 유용합니다.
이 여행 앱용 디자인에서는 신규 로마 투어를 위한 새 여행지 카드를 추가하면 다른 카드가 자동으로 이동하고 리플로되어 프레임에 포함됩니다.
컴포넌트
컴포넌트는 디자인 전반에서 재사용할 수 있는 요소입니다. 동일한 요소를 여러 번 다시 만들 필요가 없으며, 하나 또는 모든 디자인에 대한 디자인 변경 사항을 쉽게 관리할 수 있게 해 줍니다.
모든 레이어나 개체의 컬렉션에서 컴포넌트를 만들 수 있습니다. 아이콘이나 버튼과 같은 단일 개체일 수도 있고 카드, 메뉴와 같은 전체 레이아웃일 수도 있습니다. 레이어를 선택하고 오른쪽 사이드바에서 ❖ Create component(컴포넌트 만들기)를 클릭합니다.
컴포넌트에는 두 가지 측면이 있습니다.
-
기본 컴포넌트는 컴포넌트의 속성을 정의합니다.
우리는 여행 앱에서 여행지 카드를 위한 컴포넌트를 만들었습니다. 여기에는 각 여행지용 카드를 만드는 데 필요한 모든 레이어가 포함되어 있습니다. -
인스턴스는 컴포넌트의 사본으로, 디자인에 추가할 수 있습니다.
카드 컴포넌트에는 4개의 개별 인스턴스가 있습니다. 각 인스턴스에는 각 여행지에 대한 고유한 사진과 관련 텍스트가 있습니다.
여행지 카드의 기본 컴포넌트에서 도시 이름의 색상을 변경하면 생성한 4개의 인스턴스도 업데이트됩니다.