기계적 인조 인간

어도비 xd에서 ui 키트를 사용하는 방법

Revelation.MOV

Revelation.MOV

차례:

Anonim

웹 디자인에 관심이있는 사용자는 Adobe XD의 UI 키트를 사용하여 새로운 디자인 프로젝트를 시작할 수 있습니다. 이 키트를 사용하면 웹 사이트 또는 앱 디자인에 대해 수정하고 사용할 수있는 편리한 리소스에 액세스 할 수 있습니다.

소프트웨어를 처음 사용하고 Adobe XD에서 UI 키트를 사용하는 방법을 모르는 경우 올바른 위치에 왔습니다., 소프트웨어에 UI 킷을 설치하고 프로젝트에 포함 된 리소스를 사용하는 방법을 알려 드리겠습니다.

또한

Adobe Bridge로 사진을 일괄 변환하는 방법

Adobe XD에서 UI 킷 다운로드 방법

먼저 소프트웨어 내에서 바로 Adobe XD에서 UI 키트를 다운로드 할 수있는 방법을 살펴 보겠습니다. 시작하려면 다음 단계를 따르십시오.

1 단계: 소프트웨어의 왼쪽 상단 모서리에있는 햄버거 메뉴 버튼을 클릭하십시오.

2 단계: 메뉴에서 Get UI Kits 옵션까지 스크롤 한 다음 세 가지 옵션 중 하나를 클릭하십시오.

이 기사에서는 Google Material UI Kit를 선택하겠습니다. 그러나 프로젝트에 따라 Apple iOS 또는 Microsoft Windows 키트 중 하나를 선택할 수 있습니다. 그러면 UI 키트를 무료로 다운로드 할 수있는 공식 웹 페이지가 열립니다.

3 단계: 다음 웹 페이지에서 Adobe XD UI 킷을 찾아 시스템에 다운로드하십시오.

4 단계: 이제 Adobe XD에서 다운로드 한 파일을 열면 해당 플랫폼에 대한 UI 리소스가 포함 된 대다수의 아트 보드가 나타납니다.

Ctrl 버튼을 누른 상태에서 스크롤 휠을 움직여 확대 / 축소하면 모든 개별 대지를 볼 수 있습니다.

대신 와이어 프레임을 다운로드하려면 UI 키트 얻기 메뉴에서 와이어 프레임 옵션을 클릭하십시오.

Get UI Kits 메뉴에서 More UI Kits 옵션을 클릭하여 Adobe 웹 사이트에서 추가 UI 키트를 찾을 수도 있습니다.

웹 사이트에는 헤드 업 디스플레이처럼 보이는 정말 멋진 Movie Magic UI 키트를 비롯하여 선택할 수있는 몇 가지 훌륭한 옵션이 있습니다.

UI 키트를 다운로드하는 방법을 알았으므로 이제 프로젝트에서 어떻게 사용할 수 있는지 살펴 보겠습니다.

Adobe XD에서 UI 킷 사용 방법

프로젝트에서 UI 킷을 사용하려면 다음과 같은 간단한 단계를 따르십시오.

1 단계: 프로젝트에서 사용할 UI 요소를 확대하고 제목을 클릭하여 선택하십시오.

2 단계: 이제 Ctrl + C 바로 가기를 사용하여 요소를 복사합니다.

3 단계: 메뉴에서 새 Adobe XD 프로젝트를 엽니 다.

4 단계: 여기에서 Ctrl + V 바로 가기를 사용하여 UI 요소를 붙여 넣습니다.

이 기사에서는 Google Material UI Kit의 Mobile Dark 요소를 사용합니다. 요소에는 더 많은 레이어를 배치하는 데 도움이되는 가이드가 포함되어 있지만 사용하지 않으려는 경우 다음 단계를 수행하여 쉽게 제거 할 수 있습니다.

5 단계: 가이드를 제거하려면 왼쪽 상단의 자물쇠 아이콘을 클릭 한 다음 삭제를 누르십시오. 가이드를 사용하여 더 많은 객체를 요소에 정확하게 배치하려면이 단계를 건너 뛸 수 있습니다.

6 단계: 이제 UI 킷으로 돌아가서이 페이지에 추가 할 다른 요소를 선택하십시오. 다시 한 번 요소의 제목을 클릭하고 Ctrl + C 바로 가기를 사용하여 복사하십시오.

이 대화 상자 중 하나를 사용할이 기사의 기본 토스트를 만들 것입니다.

7 단계: 이전 요소에 새 요소를 붙여 넣은 다음 가이드별로 정렬합니다.

8 단계: 이제 토스트의 각 요소를 편집하려면 텍스트 상자를 두 번 클릭 한 다음 사용할 텍스트를 입력하십시오. 우선, 건배의 제목을 바꾸자.

그런 다음 텍스트 상자를 두 번 클릭하고 추가 할 내용을 입력하여 본문 내용을 변경하십시오.

동일한 방식으로 버튼의 텍스트를 변경할 수도 있습니다. 텍스트 편집이 끝나면 텍스트의 색과 불투명도를 변경할 수 있습니다. 불투명도를 변경하려면 도구 모음의 불투명도 옵션 아래에있는 슬라이더를 오른쪽으로 이동하십시오.

텍스트의 색을 변경하려면 [채우기] 옵션 옆의 사각형을 클릭 한 다음 색상 선택기에서 새 색상을 선택합니다.

그리고 이런 방식으로 편집 할 수있는 텍스트가 아닙니다. 대화 상자의 거의 모든 항목의 색과 불투명도를 변경할 수도 있습니다. 이는 고유 한 색 구성표를 사용하려는 경우에 유용합니다.

결과에 만족하면 메뉴의 다른 이름으로 저장 옵션을 클릭하거나 Shift + Ctrl + S 바로 가기를 사용하여 파일을 저장하십시오.

또한

#그래픽 디자인

우리의 그래픽 디자인 기사 페이지를 보려면 여기를 클릭하십시오.

UI 킷을 사용하여 완벽한 디자인

이제 Adobe XD에서 UI 킷을 다운로드하고 사용하는 방법을 알게되었으므로 멋진 디자인을 빠르게 만들어 낼 것입니다. 이러한 UI 키트는 매우 유용하며 각 UI 요소를 설계하는 것에 대해 걱정할 필요없이 프로젝트에 곧바로 참여할 수 있습니다.

다음 단계: Adobe XD에서 프로젝트를 완료했으며 HTML로 내보내는 방법을 모르십니까? 다음 기사에서 간단한 단계별 자습서를 확인하십시오.