반응형 Design/Adobe XD6 [Adobe XD] 무한반복차트 만들기 안녕하세요 :) 오랜만에 adobe XD를 가지고 왔는데요 이것보다는 인터렉션에 관한 내용을 먼저 정리를 해야 하는데 이번에 UX/UI 디자인을 하다가 차트를 그리고 차트가 움직이게 구현을 하고 싶어가지고 생각을 해보고 어떻게 하면 반복으로 멈추지 않고 계속 차트가 움직일 수 있을까 하고 생각을 하다가 성공을 해서 이거 먼저 정리를 하려고 합니다 서론이 길었네요 바로 시작해보죠!! adobe xd를 실행시켜주세요 1. 아트보드 생성 아트보드의 사이즈는 상관이 없겠죠? 연습이니까 그냥 1920 아트보드로 해보도록 하겠습니다. 2. 차트 그리기 차트를 자동으로 그려주는 플러그인이 있는데 플러그인 소개는 다음번에 해드리도록 하겠습니다. 저는 아트보드에 네모안에 차트가 나오게 하기 위해서 사각형을 하나 그리고 .. 2021. 5. 27. AdobeXD 프로토타입 스크롤 시 위치 고정 웹 UI나 모바일 UI에서 스크롤을 할 때 고정이 되어야 하는 부분을 고정 예를 들면 모바일에 하단 독바, 상단 gnb 영역 디자인을 하고 코딩이 되기 전 단계에서 고정을 해보는 것 아래의 디자인은 freepik에서 무료로 다운로드하여서 살짝 수정한 디자인입니다. 프로토타입 탭 클릭 고정하고자 하는 부분들을 그룹화하여 클릭 프로토타입 옵션 창에서 스크롤 시 위치 고정 체크 선택한 요소 좌측 상단에 압정 모앙이 생기면 고정 완료 마지막으로 고정이 잘 되었는지 실행 프로토타입 기능 설명 프로토 타입의 기능을 사용하려면 일단 디자인이 필요 해당 디자인은 어도비에서 제공해주는 웹 와이어 프레임 키트에서 틀을 가지고 온 후 사진을 추가 사진 또한 픽사 베이에서 무료로 다운로드한 사진들이다 디.. 2021. 2. 1. Adobe XD 디자인적 기능들 (3) 모양 설정 현재 클릭되어 있는 요소의 투명도를 조절 포토샵의 혼합 모드와 같다고 생각하면 된다 라운드의 값을 수치로 조정 - 왼쪽에 있는 둥근 사각형은 네 개의 모서리의 값을 한 번에 조절할 수 있는 기능 - 오른쪽에 있는 점선 사각형은 네개의 모서리의 값을 각각 조절할 수 있는 기능 면/선 색상설정 100% 부분은 요소의 투명도를 의미 +는 현재 색상을 다음번에도 사용할 수 있게 저장을 하는 것 테두리를 체크를 하게 된다면 라인을 설정할 수 있는 옵션들이 생긴다 크기 → 두께, 대시 → 점선. 간격 → 점선 사이의 간격 2번의 첫 번째 3가지는 라인의 위치라고 할까요? (첫 번째는 안쪽선, 두 번째는 바깥쪽 선, 세 번째는 가운데 선을 의미한다) 2번의 두번째 3가지는 끝선 처리 (첫번째는 끝에 맞춰진.. 2021. 1. 30. Adobe XD 디자인적 기능들 (2) 패딩 - CSS에서도 많이 들어본 패딩 - 패딩은 요소안에 여백이라고 생각하면된다 - 패딩의 반대는 마진(요소 밖의 여백) [ XD에서 패딩을 조정하는 방법 ] 상하좌우를 한번에 적용할 수 있는 방법 (수치입력) 상하좌우를 각각 적용할 수 있는 방법 (수치입력) Ait를 누르면서 요소에 마우스를 올리면 수치가 나오는데 이걸로 조정을 많이 한다. 반응형 크기 조절 - XD에서는 디자이너들이 디자인만 느낌보는거여서 많이 사용하지는 않는다. [ 반응형 크기 조절 ] 프로그램이 자동으로 반응형으로 조절 해준는 자동 디자이너들이 고정하고 싶은 곳을 고정할 수있는 수동 자동은 자동으로 해주기에 따로 설정할 것이 없다 수동으로 조절하는 방법은 요소를 하나 클릭을 한 후 고정하고 싶은 부분을 클릭을 하면된다 고정이 된.. 2021. 1. 29. 이전 1 2 다음 반응형
