시작하기
Indigo.Design은 시각적 디자인, UX 프로토타입, 코드 생성 및 앱 개발을 위한 통합 플랫폼입니다. UX에 대한 집중을 잃지 않으면서 가능한 한 빨리 픽셀 완벽한 앱을 제공하고자 하는 디자인 및 개발 팀을 대상으로 합니다.
디자인에서 개발까지의 워크플로우
Indigo.Design 플랫폼은 UI 키트, 프로토 타입 / 사용성 연구 및 App Builder의 세 가지 주요 모듈로 구성됩니다. UI 키트(Sketch, Figma, XD)는 생산성을 제공하는 도구를 사용하여 실제 UI 컨트롤 및 구성 요소에 매핑됩니다. 각 UI 키트는 색상, 타이포그래피, 크기 등을 엄격하게 구현하고 따릅니다. 프로토타입 및 사용성 연구는 제품 또는 기능의 사용자 경험을 측정하고 개선하는 데 도움이 됩니다.이 App Builder 통해 사용자는 웹 환경에서 자신의 애플리케이션을 구축하고 Angular, React, Blazor 또는 Web Components 코드를 생성할 수 있습니다.
How does this work?
Indigo.Design 디자인에서 개발까지의 워크플로를 지원하기 위한 주요 기능을 제공합니다.
- Figma, Sketch 또는 Adobe XD에서 디자인 제작
Indigo.Design System -
cloud.indigo.design통해 프로토타입으로 공유하여 사용자와 테스트하고 협업하세요. - Figma, Sketch 또는 Adobe XD 파일을 사용하여 앱을
Ignite UI App Builder디자인하고 플러그인을 통해 가져오거나 Ignite UI App Builder 직접 사용하십시오. - Ignite UI App Builder의
Code Generation서비스를 사용하여 애플리케이션에서 Angular, Blazor, React 또는 웹 구성 요소 코드를 생성합니다.
Indigo.Design System
디자인 시스템은 Figma, Sketch 및 Adobe XD용 라이브러리 세트로, 다양한 에셋, 스타일, 구성 요소 및 패턴을 포함합니다. UI 구성 요소를 사용하면 다양한 상태와 템플릿을 사용할 수 있는 유연성을 제공하는 복잡한 사용자 인터페이스를 만들 수 있습니다. 모양을 사용자 정의하려면 미리 만들어진 팔레트, 타이포그래피, 그림자, 아이콘 및 일러스트레이션을 활용할 수 있습니다. 마지막으로, 제품 세부 정보 레이아웃, 다양한 양식 및 가격표와 같은 제공된 패턴 모음을 통해 앱 디자인을 간소화하여 UI 및 상호 작용 디자인의 모범 사례를 적용할 수 있습니다.
Material용 Figma UI 키트
Figma UI 키트
새로운 Figma Indigo.Design UI Kit for Material은 Ignite UI for Angular, Blazor 및 Web Components UI 툴셋에 매핑되어 디자인-개발 프로세스를 완전히 재정의합니다. 이제 강력한 구성 요소, 패턴, 스타일 지정 및 사용자 지정 옵션 세트를 얻을 수 있으므로 프로토타입 또는 Figma로 설계된 모든 유형의 화면을 가져와 깔끔한 코드로 변환할 수 있습니다. 가장 좋은 점은 모든 정적 디자인이 클릭 한 번으로 실제 UI 구성 요소, 브랜딩 및 스타일링이 포함된 대화형 반응형 앱이 된다는 것입니다.
Figma UI 키트
Figma 플러그인, UI 키트 및 샘플 앱은 자산 다운로드 페이지에서 다운로드할 수 있습니다.
또는 아래의 직접 링크를 통해:
Note
Figma 무료 사용자와 Pro 사용자로 키트를 사용할 때 차이가 있습니다 -주제
Sketch UI Kit
Indigo.Design for Sketch는 사용자에게 하나가 아닌 네 개의 라이브러리 파일을 제공합니다: 우리가 지원하는 각 디자인 언어(Material, Bootstrap, Fluent UI 및 자체 Indigo)에 대해 하나씩. 4개의 라이브러리 모두 Indigo.Design 플러그인을 통해 밝은 모드와 어두운 모드 간의 원활한 전환을 지원하며 제공하는 사전 정의된 또는 사용자 정의 색상 팔레트와 함께 작동합니다. 이러한 개선을 통해 Sketch 사용자는 선택한 디자인 언어에 대한 구성 요소와 패턴의 100% 기본 모양과 느낌을 즐길 수 있습니다.
Sketch UI Kit 4가지 테마
Sketch 플러그인, UI 키트 및 샘플 앱은 자산 다운로드 페이지에서 다운로드할 수 있습니다.
또는 아래의 직접 링크를 통해:
Adobe XD UI Kit
디자이너가 와이어프레임과 앱을 디자인할 수 있는 현대적이고 사용하기 쉬운 도구 모음을 제공하기 위해 처음부터 제작된 Adobe XD는 오늘날 시장에서 인기 있는 벡터 그래픽 디자인 플랫폼 중 하나입니다. 와이어프레임 기능과 함께 디자이너는 충실도가 높은 프로토타입을 만들고, 디자인 프로세스를 통해 팀 간 협업하고, 애니메이션을 구성하고, 피드백을 수집할 수 있습니다.
Note
Adobe XD UI 키트, Adobe XD용 플러그인 및 샘플 앱 다운로드
Adobe XD 플러그인
Prototyping & Usability Testing
디자인에 대한 피드백을 받으려면 cloud.indigo.design 사용하여 Sketch 문서를 가져와서 대화형 프로토타입으로 공유할 수 있습니다. 이렇게 하면 이해 관계자가 모든 장치에서 프로토타입을 보고 댓글을 통해 피드백을 제공할 수 있습니다.
이 지침 주제에 대해 자세히 알아보세요.
사용자가 프로토타입을 사용하여 특정 작업을 완료하는 방법을 관찰하고 작업 시간 및 완료율과 같은 지표를 수집하려면 게시된 프로토타입을 사용하여 유용성 테스트를 설정하세요.
이 지침 주제에 대해 자세히 알아보세요. 사용자 테스트 설정
Design apps with App Builder
App Builder 모듈을 사용하면 디자인 파일(Figma, Sketch 또는 Adobe XD)을 시작점으로 사용하여 단일 페이지 애플리케이션을 디자인하거나 처음부터 만들 수 있습니다. 이 App Builder 에는 사용자가 실제 UI 구성 요소, 글로벌 테마, 외부 데이터 소스를 사용할 수 있도록 하는 일련의 주요 기능이 포함되어 있습니다.
디자인 캔버스
더 알아보기:
- App Builder에서 응용 프로그램 빌드 - 시작 하기.
- App Builder 인터페이스 개요.
- 플렉스 레이아웃.
- 구성 요소.
- 상호작용.
- SPA 및 탐색.
- 앱을 공유하고 미리 봅니다.
샘플 애플리케이션에서 앱을 만듭니다.
샘플 앱
Generate Code
Ignite UI App Builder에서 응용 프로그램 디자인이 준비되면 Angular, Blazor 또는 Web Components 코드를 쉽게 생성 할 수 있습니다. 생성된 코드는 GitHub의 리포지토리에 직접 업로드하거나 파일 패키지로 로컬에 다운로드할 수 있습니다. 생성된 애플리케이션에 사용되는 구성 요소는 UI 프레임워크 Ignite UI for Angular 의해 구동됩니다
더 알아보기:
Indigo.Design 처음 사용하는 경우 이를 사용하여 첫 번째 아트보드를 만드는 방법에 대해 자세히 알아보세요.
GitHub