시작하기

    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 설계에서 개발까지의 워크플로우를 지원하는 주요 기능을 제공합니다.

    1. ​Indigo.Design System 사용하여 Figma, Sketch 또는 Adobe XD에서 디자인 만들기
    2. ​cloud.indigo.design 통해 프로토타입으로 공유하여 사용자와 테스트하고 협업하세요.
    3. Figma, Sketch 또는 Adobe XD 파일을 사용하여 Ignite UI App Builder에서 앱을 디자인하고 플러그인을 통해 가져오거나 Ignite UI App Builder 직접 사용하세요.
    4. 애플리케이션에서 Angular, Blazor, React 또는 웹 구성 요소 코드를 생성합니다. Ignite UI App Builder, 해당 항목을 사용하여 Code Generation 서비스.

    Indigo.Design System

    디자인 시스템은 다양한 에셋, 스타일, 구성 요소 및 패턴을 포함하는 Figma, Sketch 및 Adobe XD용 라이브러리 세트입니다. UI 구성 요소를 사용하면 다양한 상태와 템플릿을 사용할 수 있는 유연성을 제공하는 복잡한 사용자 인터페이스를 만들 수 있습니다. 모양을 사용자 정의하려면 미리 만들어진 팔레트, 타이포그래피, 그림자, 아이콘 및 일러스트레이션을 활용할 수 있습니다. 마지막으로, 제품 세부 정보 레이아웃, 다양한 양식, 가격표 등 제공되는 패턴 컬렉션을 통해 UI 및 인터랙션 디자인에 모범 사례를 적용하여 앱 디자인을 간소화할 수 있습니다.

    머티리얼용 Figma UI 키트

    Figma UI 키트

    새로운 머티리얼용 Figma Indigo.Design UI 키트는 유니티의 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 키트 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 구성 요소, 전역 테마, 외부 데이터 소스를 사용할 수 있도록 하는 일련의 주요 기능이 포함되어 있습니다.

    디자인 캔버스

    더 알아보기:

    샘플 애플리케이션에서 앱을 만듭니다.

    샘플 앱

    Generate Code

    Ignite UI App Builder에서 애플리케이션 디자인이 준비되면 여기에서 쉽게 Angular, Blazor 또는 Web Components 코드를 생성할 수 있습니다. 생성된 코드는 GitHub의 리포지토리에 직접 업로드하거나 로컬에 파일 패키지로 다운로드할 수 있습니다. 생성된 애플리케이션에 사용되는 구성 요소는 Ignite UI for Angular로 구동됩니다.

    더 알아보기:

    Indigo.Design을 처음 사용하는 경우 첫 번째 아트보드를 만드는 방법에 대해 자세히 알아보세요: