스타일링 개요

    ​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 시스템으로 만든 특정 디자인의 테마를 빠르게 변경할 수 있습니다.

    Styling in Sketch

    네 가지 Sketch 라이브러리인 Indigo.Design for Material, Indigo.Design for Bootstrap, Indigo.Design for Fluent 및 Indigo.Design for Indigo Theme는 각각 자산과 강력한 라이브러리의 나머지 부분이 구축되는 스타일링 인프라입니다. 따라서 선호하는 디자인 언어를 기반으로 변형을 선택한 후 다음 페이지로 이동하여 라이브러리의 모양을 추가로 사용자 정의하십시오.

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

    색상과 고도는 Layer Styles로 존재하고, 타이포그래피는 Text Styles로 정의되어 Indigo.Design 시스템으로 만든 특정 디자인의 테마를 빠르게 변경할 수 있습니다.

    Styling in Adobe XD

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

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

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

    더 많은 정보를 찾으려면:

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

    Additional Resources

    관련 주제:

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