What is prototyping in Adobe XD?

In Adobe XD, you typically draw hotspots over areas you would like to be clickable and by choosing the destination artboard of the hotspot you can create interactive prototypes. However, once you publish your Indigo.Design-based project to our cloud it will automatically detect components and let you easily choose the destination screen to create the same experience for the end user without cluttering your design file with hotspots.

How to use UI kits in Adobe XD?

It has almost become a standard for designers to download a free UI Kit, copy some of its components, then paste and arrange them in a layout to meet the needs of their projects. However, Indigo.Design is more than a UI Kit, it is a native Adobe XD Library, which can be added to one’s creative cloud account with a single click and then easily accessed from the “Libraries” panel. Furthermore, with a component instance linked to the main component in the source library, you will automatically get updates as the design system evolves. Also, this paradigm assures a single source of truth which is one of the core characteristics of a true design system.

Adobe XD 프로토타입을 더 빠르게 앱으로 전환

Indigo.Design for Adobe XD를 사용하여 디자인 시스템을 크리에이티브 워크플로우에 통합하고 App Builder ™ 사용하여 완성된 XD 프로토타입을 앱으로 빠르게 변환할 수 있습니다. 클릭 한 번으로 정적인 디자인을 사용하고 실제 UI 구성 요소와 스타일이 있는 반응형 대화형 앱을 얻을 수 있습니다.

데모 요청

디자인과 코드를 통해 XD 프로토타입을 앱으로 제작 및 변환

디자인 워크플로우를 시작해보세요

수백 개의 사전 구축된 UI 패턴과 그리드, 차트, 드롭다운, 메뉴 등과 같은 60개 이상의 원자 구성 요소를 사용하여 성공적으로 시작하세요.

다양한 시각적 스타일 탐색

디자인의 색상 자산, 문자 스타일, 타이포그래피를 쉽게 조정하여 원하는 모양을 얻을 수 있습니다. Adobe XD UI 키트에는 400개 이상의 아이콘, 특수 색상 팔레트 및 사용자 정의 가능한 일러스트레이션 17개가 포함되어 있습니다.

디자인에서 코드로 - Adobe XD에서 Angular 또는 Blazor로

단일 작업 환경을 통해 설계 시간을 생산 준비 Angular 또는 Blazor 코드로 빠르게 변환할 수 있습니다. 디자이너는 Adobe XD 또는 Sketch와 같은 선호하는 디자인 도구를 사용할 수 있으며 개발자는 Visual Studio, GitHub 또는 즐겨 사용하는 IDE를 사용할 수 있습니다. 사일로를 제거하고 완전히 통합된 design-to-code 시스템으로 잘못된 커뮤니케이션을 줄입니다.

기본 XD 자산 라이브러리

훌륭한 프로토타입 제작과 앱 구축은 구성 요소의 상호 작용 상태, 풍부한 템플릿, 사용자 정의 및 자동 레이아웃 기능과 같은 세부 사항으로 귀결됩니다. 바로 사용할 수 있습니다! Indigo.Design의 기본 XD 기능을 사용하면 버튼 유휴 및 호버와 같은 다양한 효과 또는 사용자 정의 아이콘 및 일러스트레이션과 같은 기타 창의적인 효과로 구성 요소를 쉽게 사용자 정의할 수 있습니다.

훌륭한 앱을 쉽게 설계하고 구축할 수 있게 해주는 기능

당신을 위한 Creative Cloud 라이브러리

라이브러리에 Indigo.Design 추가하고 모든 프로젝트에서 사용하면 향후 업데이트, 개선 사항 및 새로운 구성 요소를 자동으로 받을 수 있습니다. 또는 "사본 만들기"를 통해 제품의 요구 사항에 맞게 조정된 버전을 만들 수 있습니다.

색상, 타이포그래피, 아이콘 및 구성 요소가 포함된 Adobe XD 라이브러리

더 이상 처음부터 시작하지 마세요

빨리 시작하고 싶으신가요? 기본 Adobe XD 라이브러리 패널로 이동하여 색상, 타이포그래피, 아이콘, 구성 요소 및 패턴 변형으로 생성된 그룹을 찾아 새 프로젝트를 시작하세요. 클릭하고 드래그하기만 하면 빈 캔버스를 멋진 디자인으로 바꿀 수 있습니다.

모든 것은 App Builder로 끝납니다.

Adobe XD에서 직접 최첨단 웹 애플리케이션을 만들고, 이를 App Builder의 데이터에 바인딩하고, 이전과는 전혀 다른 방식으로 디자이너와 개발자를 하나로 묶는 하나의 통합된 디자인-코드 작업 흐름을 통해 GitHub에 코드를 푸시합니다.

참조 앱 갤러리 살펴보기

Indigo.Design 전문가가 되어 갤러리에서 몇 가지 참조 앱을 탐색하여 기본 디자인 시스템 원칙을 알아보세요. Adobe XD 파일로 다운로드하여 App Builder에서 동일한 앱을 보면서 레이어 구조를 탐색하십시오.

NoXD, 문제 없습니다

Sketch에 대한 지원은 이미 제공되고 Figma 제작 중이므로 UX 및 UI 디자인을 위한 주요 도구에 대해 다룰 수 있습니다. UI 키트는 동일한 구성 요소, 패턴, 스타일 및 사용자 정의 세트를 제공하지만 각 키트는 제작된 도구의 장점을 사용합니다.

Indigo.Design에 대해 문의하세요

Indigo.Design은 팀이 애플리케이션을 더 빠르게 설계, 구축, 테스트하는 데 필요한 도구를 갖춘 완벽한 디지털 제품 디자인 플랫폼입니다. 자세한 내용을 알아보려면 아래 양식을 작성하세요. 그러면 팀원이 후속 조치를 취하고 귀하와 함께 일할 수 있는 날짜와 시간을 예약합니다.

필수 필드

비즈니스 이메일

이름

성

회사 이름

직위

핸드폰

관심사가 무엇인가:

프로토타이핑

User Testing

Code Generation

Embed

Other

본인은 Infragisitcs의 이용약관 및 개인정보 보호정책을 이해하고 이에 동의합니다.

자주 묻는 질문

Adobe XD 프로토타이핑에 대한 질문과 답변

Adobe XD에서는 일반적으로 클릭할 수 있는 영역 위에 핫스팟을 그리며 핫스팟의 대상 아트보드를 선택하여 대화형 프로토타입을 만들 수 있습니다. 그러나 Indigo.Design 기반 프로젝트를 클라우드에 게시하면 구성 요소가 자동으로 감지되고 대상 화면을 쉽게 선택하여 핫스팟으로 디자인 파일을 어지럽히지 않고도 최종 사용자에게 동일한 경험을 제공할 수 있습니다.

디자이너가 무료 UI 키트를 다운로드하고, 일부 구성 요소를 복사한 다음, 프로젝트의 요구 사항을 충족하는 레이아웃에 붙여넣고 배열하는 것은 거의 표준이 되었습니다. 그러나 Indigo.Design UI 키트 그 이상입니다. 네이티브 Adobe XD 라이브러리로, 한 번의 클릭으로 Creative Cloud 계정에 추가한 다음 "라이브러리" 패널에서 쉽게 액세스할 수 있습니다. 또한 소스 라이브러리의 기본 구성 요소에 연결된 구성 요소 인스턴스를 사용하면 디자인 시스템이 진화함에 따라 자동으로 업데이트를 받게 됩니다. 또한 이 패러다임은 진정한 디자인 시스템의 핵심 특성 중 하나인 단일 진실 소스를 보장합니다.

대화에 참여