스타일링 개요

    ​Indigo.Design 시스템은 Ignite UI for Angular 컨트롤에 매핑되는 모든 60+ UI 구성 요소의 스타일을 정교하게 지정할 수 있는 방법을 제공합니다. Angular 제품의 테마 엔진을 사용하면 몇 줄의 코드로 전체 제품의 스타일을 변경할 수 있는 사용자 지정 색상 테마를 만들 수 있습니다. App Builder는 또한 이러한 테마 메커니즘을 구현하여 사용자가 몇 번의 클릭만으로 앱의 전체 모양을 변경할 수 있도록 합니다.

    Styling in Figma

    Figma의 Indigo.Design for Material 라이브러리는 다음과 같은 페이지 구조를 가지고 있습니다.

    • ↳ 아이콘
    • ↳ 색상
    • ↳ 타이포그래피
    • ↳ 고도
    • ↳ 일러스트레이션

    나열된 페이지는 🧱 Foundation 페이지 아래에 있습니다. 색상과 높이는 Color styles과 Effect styles로 존재하는 반면, 타이포그래피는 Text styles로 정의되어 있습니다. 이를 통해 Indigo.Design System으로 만든 모든 디자인의 테마를 빠르게 변경할 수 있습니다.

    Styling in Sketch

    4개의 Sketch 라이브러리 각각, Indigo.Design for Material, Indigo.Design for Bootstrap, Indigo.Design for Fluent and Indigo.Design for Indigo Theme는 자산과 라이브러리의 나머지 부분이 구축되는 강력한 스타일 인프라를 제공하는 이모티콘 접두사가 🎨 붙은 동일한 페이지 구조를 가지고 있습니다. 따라서 선호하는 디자인 언어에 따라 변형을 선택한 후 다음 페이지로 이동하여 라이브러리의 모양을 추가로 사용자 정의하십시오.

    • 🎨 재료 아이콘
    • 🎨 색상
    • 🎨 타이포그래피
    • 🎨 고도
    • 🎨 일러스트레이션

    색상과 표고는 Layer Styles로 존재하고, 타이포그래피는 Text Styles로 정의됩니다. 이를 통해 Indigo.Design System으로 만든 모든 디자인의 테마를 빠르게 변경할 수 있습니다.

    Styling in Adobe XD

    Adobe XD 라이브러리에는 라이브러리의 나머지 부분이 구축되는 강력한 스타일링 인프라를 보여주는 🎨 이모티콘 접두사가 붙은 몇 가지 아트보드가 있습니다.

    • 🎨 재료 아이콘
    • 🎨 색상
    • 🎨 타이포그래피
    • 🎨 고도
    • 🎨 일러스트레이션

    색상은 Colors으로 정의되고, 타이포그래피는 Character Styles로 정의되고, 아이콘, 고도 및 일러스트레이션은 Components로 존재합니다. 이를 통해 Indigo.Design System으로 만든 모든 디자인의 테마를 빠르게 변경할 수 있습니다.

    더 많은 정보를 찾으려면:

    • 머티리얼 아이콘- 머티리얼 아이콘 디자인 지침에 따라 우리가 만든 360개 이상의 아이콘으로 확장된 160개 이상의 머티리얼 아이콘 컬렉션으로, 더 쉽게 확장할 수 있습니다.
    • 색상- 다양한 유형의 색맹에 최적화된 세트를 포함하여 기본, 보조 및 회색 색상 변형이 포함된 팔레트와 특수 색상 및 데이터 시각화를 위해 특별히 설계된 몇 가지 팔레트
    • 타이포그래피- 일반 및 구성 요소별 텍스트 스타일 모음
    • Elevation-머티리얼 디자인에서 우리에게 친숙한 24개의 그림자 세트
    • 일러스트레이션- 디자인을 더욱 재미있고 완벽하게 만들어 주는 17가지 사용자 정의 가능하고 스타일이 가능한 일러스트레이션 세트

    Additional Resources

    관련 주제:

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