높이

    기본 콘텐츠에 그림자를 드리우기 위해 구성 요소와 패턴 전체에 사용되는 Indigo.Design 시스템에서 지원하는 24개의 엘리베이션이 있습니다. 이를 사용하여 일부 시각적 계층 구조를 설정하는 하단 탐색 및 부동 작업 버튼과 같은 구성 요소가 있지만 이를 사용하여 등록 또는 로그인 양식과 같은 특정 요소를 부동으로 만들 수도 있습니다. 고도는 각도 그림자용 머티리얼 디자인 고도 및 Ignite UI for Angular와 동일합니다.

    Support for Elevations

    고도는 간단한 논리를 따릅니다. 고도의 숫자가 높을수록 그림자가 더 두드러집니다. 그림자는 3가지 누적된 그림자 색상(그림자, 반그림자, 주변 색상)의 조합으로 제공되며 그 값은 머티리얼 디자인 정의와 일치합니다.

    Figma에서 Elevation은 ↳ Elevation 이라는 별도의 페이지에 배치됩니다. 대부분의 경우 구성 요소 프레임이나 구성 요소 구조 내부의 배경 레이어에 적용되며 속성 패널에서 효과 스타일로 사용할 수 있습니다. Sketch에서 고도는 🎨 Elevation 라는 별도 페이지에서 찾을 수 있으며 모든 모양에 적용할 수 있는 레이어 스타일로 제공됩니다. 이를 사용하는 구성 요소에서는 이 스타일을 올바른 레이어(대개 마스크 레이어 또는 특별히 지정된 Elevation 직사각형)에 적용했습니다. Adobe XD에서 입면도는 라이브러리 파일의 왼쪽 열에 있는 동일한 이름의 아트보드에 배치되며 구성 요소와 패턴 전체에 사용되는 구성 요소로 존재합니다.

    Note

    스타일을 변경하여 구성 요소의 고도를 변경하는 것은 Sketch 및 Figma에서 가능하며 예상한 결과를 생성하지만 아직 Ignite UI for Angular 에서는 동일한 결과를 얻을 수 없습니다.

    Use of Standalone Elevations in Figma

    예를 들어 콘텐츠의 한 부분을 들어올려 나머지 부분보다 더 많은 초점을 끌어올리기 위해 고도를 자체적으로 사용하려면 별도의 배경 레이어에 효과 스타일로 적용하거나 프로젝트 내에서 프레임을 사용하는 경우에는 프레임에 직접 적용할 수 있지만 입면도를 표시하려면 채우기 색상도 적용해야 합니다.

    Use of Standalone Elevations in Sketch

    예를 들어 콘텐츠의 한 부분을 들어올리고 나머지 부분보다 더 많은 초점을 맞추기 위해 고도를 자체적으로 사용하려면 강화하려는 콘텐츠의 크기와 일치하는 직사각형에 선택한 고도 레이어 스타일을 적용하기만 하면 됩니다.

    Use of Standalone Elevations in Adobe XD

    예를 들어 콘텐츠의 한 부분을 들어 올리고 나머지 부분보다 더 많은 초점을 맞추려면 고도를 자체적으로 사용하려면 해당 부분 중 하나를 Libraries 패널에서 아트보드로 드래그하고 그 위에 추가할 표면으로 사용하면 됩니다. 배경색 레이어를 포함한 나머지 사용자 인터페이스. 예를 들어 대화 상자를 디자인할 때 모서리를 둥글게 만들고 싶을 때가 있습니다. 고도가 이에 맞춰지도록 레이어 패널에서 확장하고 세 개의 내부 레이어를 선택한 다음 모서리 반경을 원하는 값으로 설정하세요.

    Example of a Standalone Elevation

    Additional Resources

    관련 주제:

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.