Indigo.Design UI 키트에 오신 것을 환영합니다.

Indigo.Design 시스템

Indigo.Design System 및 App Builder 사용하면 진정한 UX 디자인 개발 협업이 더욱 쉽고 시간 효율적으로 이루어집니다. Indigo.Design 시스템은 실제 UI 컨트롤 및 구성 요소에 매핑되는 UI 키트와 전례 없는 생산성을 제공하는 도구를 고유하게 결합하여 디지털 제품 팀이 완벽한 픽셀 디자인에서 생산 가능한 코드로 전환할 수 있도록 지원합니다. 여러분이 디자인하는 모든 것은 실제로 사용 가능한 코드로 변환될 수 있으므로 이전과는 전혀 다른 방식으로 디자이너와 개발자의 핸드오프가 단순화됩니다.

60개 이상의 구성 요소

8가지 테마로 시작해보세요

180개 이상의 패턴

디자인부터 코드까지 앱 제작 가속화

가장 인기 많은

데이터 그리드
선형 차트
목록보기
달력

차트

기둥 차트
선형 차트
스플라인 차트
단계 차트

게이지

불릿 그래프
선형 게이지
방사형 게이지

스타일링 및 테마

아이콘
색상 팔레트
타이포그래피
표고
일러스트레이션

그리드

데이터 그리드
트리 그리드
계층 그리드
목록보기
콤보

상호 작용

대화창
슬라이더
툴팁

메뉴

내브바
탐색 서랍

레이아웃

화신
하단 탐색
카드
회전목마
확장 패널
쪼개는 도구
탭

데이터 입력 및 표시

배지
단추
버튼 그룹
체크박스
칩
분할기
쓰러지 다
상
입력
진전
라디오 그룹
선택하다
스위치

공고

배너
스낵바
토스트

스케줄링

달력
날짜 선택기
시간 선택기

Indigo.Design UI 키트를 사용하는 이유는 무엇입니까?

실제 UI 구성 요소로 지원

Indigo.Design 시스템의 모든 것은 Figma 및 Sketch와 같은 가장 인기 있는 도구의 UI 키트로 지원 되며 Angular, React, Blazor 및 Web Components의 UI 컨트롤이 포함된 Material, Fluent 및 Bootstrap과 같은 오늘날 가장 인기 있는 디자인 시스템의 변형이 포함됩니다.

브랜드에 맞게 확장 가능

타이포그래피, 색상 등의 브랜드 자산을 자신의 프로젝트와 라이브러리에 적용하세요. 테마 플러그인을 몇 번만 클릭하면 UI 구성 요소와 패턴을 사용자 정의하여 프로젝트 전체에서 브랜드를 일관되게 표현할 수 있습니다.

처음부터 끝까지 완벽한 픽셀

완벽한 설계-코드 솔루션으로 전체 프로세스를 간소화할 수 있습니다. 귀하의 디지털 제품 팀은 자신들이 잘 알고 선호하는 도구를 타협 없이 사용하여 몇 번의 클릭만으로 귀하의 디자인을 생산 준비 코드로 가져옵니다.

현대적인 디자인

머티리얼 Design System과 Microsoft Fluent, Bootstrap 및 자체 Indigo 테마 변형에서 영감을 받아 모든 장치를 대상으로 하는 가장 현대적인 앱 환경을 디자인할 수 있습니다. 단시간에 단순함과 아름다움을 창조해 보세요.

구성 요소 수준 사용자 정의

UI 키트의 모든 구성 요소는 표준 속성 편집기를 통해 디자인 시간 유연성을 제공하도록 제작되었습니다. 즉, 디자인에서 사용자 정의 컨트롤을 재발명하거나 다시 만드는 대신 디자인과 흐름에 집중할 수 있습니다.

Figma 및 Sketch를 위해 잘 만들어진 UI 키트

Indigo.Design UI 키트를 사용하면 만드는 모든 것이 디자인 시스템을 사용합니다. 팔레트, 입면도, 타이포그래피, 디스플레이 밀도 및 테마를 포함한 모든 스타일 사양은 실제 UI 구성 요소와 일치합니다.

UI 키트를 사용하거나 단순히 App Builder의 도구 상자를 사용하여 디자인하는 모든 것은 다음의 확장 가능한 고성능 UI 컨트롤을 통해 완벽하게 지원됩니다.

Angular
React
Blazor
Web Components

또한 400개 이상의 아이콘, 특수 색상 팔레트, 사용자 정의 가능한 일러스트레이션 17개 등 다양한 기능이 제공됩니다.

Sketch 및 Adobe XD용으로 잘 만들어진 UI 키트 - 캡처 1

Sketch 및 Adobe XD용으로 잘 만들어진 UI 키트 - 캡처 2

Sketch 및 Adobe XD용으로 잘 만들어진 UI 키트 - 캡처 6

귀하의 브랜드에 어울리는 테마!

어두운 버전과 밝은 버전 모두에서 네 가지 테마를 사용하면 Indigo.Design 사용하여 모든 브랜딩 요구 사항을 충족할 수 있습니다. 포함된 항목을 사용하거나 테마를 기본으로 사용하고 완벽한 앱 경험을 위해 사용자 정의하세요!

Sketch 용 사용자 정의 테마 플러그인

우리 모두는 지름길을 좋아합니다. Indigo.Design Plugin for Sketch 디자인 흐름에 구현하여 효율성을 높이고 단 몇 번의 클릭만으로 테마 프로세스를 최적화하세요.

Figma, Sketch 및 Adobe XD 디자인에서 직접 앱 만들기

한 번의 클릭으로 디자인에서 코드로 이동합니다. 실제 UI 구성요소와 스타일을 사용하여 디자인하고 대화형, 반응형 앱을 제작해 보세요. Figma, Sketch 및 Adobe XD 내에서 직접 Indigo.Design 플러그인을 사용하여 실제 프로덕션에 바로 사용할 수 있는 코드로 앱을 구축하세요. 우리 플러그인은 맞춤형 테마를 제공하고, 이미지 자산을 가져오고, App Builder 도구 상자의 컨트롤을 사용하여 모든 구성 요소가 일대일로 매핑되도록 합니다.

반응형

동적으로 확장 및 축소되는 패턴으로 모든 화면 크기를 쉽게 타겟팅할 수 있으므로 진정으로 반응하는 Ul 환경을 만들고 모든 요구를 충족할 수 있습니다.

Sketch 또는 Figma에서 직접 App Builder 설계-코드 스토리를 사용하여 최첨단 웹 애플리케이션을 만들고, 이를 App Builder의 데이터에 바인딩하고, 디자이너와 개발자가 함께 사용할 수 있는 하나의 통합 워크플로에서 GitHub에 코드를 푸시합니다. 예전처럼 함께.

사용자 테스트

Indigo.Design으로 대화형 프로토타입을 만들고 모든 장치 또는 플랫폼에서 실제 사용자와 원격 사용자 테스트를 수행합니다. 사용자 통찰력, 이해관계자와의 단순화된 협업, 사용자 행동에 대한 심층 분석, 사용자 테스트 여정의 비디오 및 오디오 녹음을 얻으세요.