GIDO GIDO

* 계속 설명하듯이, 디자인 시스템에는 정답이 없다.'스타일'의 종류폰트 (Font, Typography)컬러 (Color)앨리베이션 (Elevation)레이아웃 (Layout)- 앨리베이션이란?: 쉽게 말해, 그림자.* 해당 대상이 지면으로부터 얼마나 떠 있는지 그 거리. - UI Kit 에서 디자인 시스템을 잘 정리해둔 이유?: 다른 팀원들도 디자인 시스템을 사용하기 때문. * 스타일을 만드는 방법은 이전에 기재한 적이 있으므로, 생략.  '컴포넌트'의 종류: UI Kit 제작사에 따라 종류, 명칭이 다르다. 하나의 정답이 있는 것은 아니다. - 서로의 아이콘 위치가 다르다?: 그림자까지 포함된 아이콘으로 내보냈기 때문.(기존 아이콘 위치는 그림자를 포함하지 않은 아이콘을 기반으로 한다.) - 해결 ..

1. Variant 기능으로 버튼 컴포넌트 만들기 오토 레이아웃 기능을 이용하여 버튼을 하나 만든다.: Width, 여백, 폰트, 텍스트 크기 등을 조절해준다.-> 만든 버튼을 컴포넌트로 바꾼다. 그럼 활성화/비활성화 버튼은 어떻게 만들까?: 필요할 때마다 컴포넌트를 복사해서 수정한다?-> 조금씩 차이가 생긴다. 즉, 쓰임에 따라 다양하게 바꿔 쓸 수 있는 버튼들을 모두 컴포넌트화 하는 것이 좋다. * 여러가지 컴포넌트를 만든 뒤에, Variants 를 활성화해도 되고Variants 를 활성화하고 컴포넌트를 추가해도 된다. Variants 기능을 적용하면, 기존 컴포넌트에 상태가 추가된다.-> 이전에 네비게이션 컴포넌트에서 아이콘을 바꾸듯이,버튼 컴포넌트에서도 상태를 변경하여 변경사항을 쉽게 적용할 수 ..

1. 프로토타이핑 기능프로토타입에서 화면 스크롤 기능 (세로) 추가하기-> 프레임의 사이즈를 상하로 길게 늘려준다.-> 프로토타입의 Overflow 를 Vertical (세로) 로 설정한다. * 여기서 탭바를 고정하려면?: 탭바의 포지션을 Fixed 로 변경한다. 메뉴 버튼 눌렀을 때, 메뉴 나타나게 하기-> 메뉴 프레임을 새로 만든다. (프레임 안쪽은 자유롭게 꾸민다.)-> 프로토타입 탭에서 네비게이션 바의 메뉴 아이콘과 메뉴 프레임을 연결한다.-> On tap (터치했을 때) & Open Overlay (오버레이로 열기) & Manual (사용자 설정) 으로 설정한다.-> 어디에 오버레이 될 것인지 위치를 조정하고, 애니메이션을 설정한다. * 닫기를 하려면?: 닫기 버튼에 Close Overlay 를..

1. 피그마 컴포넌트 디자인 - 기본 네비게이션 바- 타이틀이 없는 네비게이션 바- 아이콘을 하나만 쓰는 네비게이션 바- 타이틀 없고 아이콘을 하나만 쓰는 네비게이션 바...여러가지 경우의 수가 나온다. 뒤로 가기 아이콘으로 아이콘이 바뀐다고 가정했을 때도,... 마찬가지로 여러가지 경우의 수가 나온다.-> 모든 경우의 수를 일일히 만들 것인가? 그것이 가능할까? 하나만 만들고도 모든 경우의 수를 만들도록 할 수 있을까? 첫번째 방법 : 겹쳐 놓는다.같은 위치에 들어갈 모든 아이콘들을 겹쳐서 배치하고, 필요한 아이콘만 보이게끔 하여 사용한다.문제는, 아이콘이 많아지면 굉장히 복잡해진다는 것. 두번째 방법 : 네비게이션 컴포넌트 안쪽에 포함된 아이콘 그룹도 모두 컴포넌트화 한다.네비게이션 컴포넌트를 메인 ..

1. 팁 하나. UI디자인 실력을 올려 주는 실전방법 UI 디자인 따라해보기! -> 마음에 드는 앱을 고른다. -> 화면을 캡처한다. -> 해당 화면을 똑같이 따라해본다. 2. 팁 둘. 내가 UI디자인할 때 참고하는 레퍼런스들 -> 드리블 : 작품을 한컷 단위로 올리는 사이트 -> 비핸스 : 포트폴리오의 성격이 강하다. -> 서핏 : UXUI 관련 아티클(기사)들을 볼 수 있다. 3. 팁 셋. 디자인 원리 및 공부자료 추천해주세요. -> 휴리스틱 평가 : 10가지 평가 항목 통해 내가 디자인한 것이 사용자에게 도움이 되는지 확인 -> 게슈탈트 심리이론 : 일반적으로 사람들은 개별적이기보다는 전체적인 패턴이나 배열을 보려한다. 4. 팁 넷. 너무 많은 디자인 수정 요청, 어떻게 해야 하나요? -> 한번에 ..

1. Export 기능 개발자들에게 파일을 어떻게 전달할까? 1. Export 기능 파일 종류 선택, 배수 선택(이미지 크기) -> 아이콘 같은 경우 주로 벡터 파일로 저장하여 전달한다. 2. 피그마로 핸드오프 만들기 여백이 몇인지, 레이아웃은 각각 사이즈가 어떻게 되는지 등등을 어떻게 전달할까? 2. 피그마로 핸드오프 만들기 -> 핸드오프 전용 페이지를 하나 만든다. (개발자가 봐야할 파일들을 다 옮긴다.) -> Share 버튼을 눌러 개발자들에게 공유한다. -> Share에서 Link to Frame을 누르면 전체 페이지가 아니라, 특정 프레임만 공유할 수도 있다. -> 개발자 입장에서 보는 화면 3. Zeplin으로 핸드오프 만들기 -> Figma와 Zeplin 계정 연동 -> Zeplin 사용이 ..

팀원 초대하기, 댓글 기능, 그리고 실전에서의 협업 팀원 초대하는 방법 2가지 1. 파일 공유 -> Share 버튼을 눌러 초대한다. -> 수정 가능, 읽기만 가능 중 하나로 권한을 설정해준다. 2. 공유할 프로젝트 생성 -> 팀을 생성한다. (팀 프로젝트를 생성한다.) -> 해당 팀에 멤버로 초대한다. -> 상단에 말풍선 모양 아이콘을 눌러 댓글을 달 수 있다. => 이름 태그를 달아주면 상대방의 이메일까지 전달이 된다. => 프로토타입에도 댓글을 달 수 있다.

프로토타이핑을 활용해야 하는 이유 실제로 개발된 것은 아니지만 사용자가 사용해보도록 할 수 있다. => 사용자 테스트를 하기 위해서. 팀원들이 서비스가 어떻게 동작하는지 볼 수 있다. => 커뮤니케이션을 위해서. -> 프로토타입을 만든 뒤 팀원들에게 링크를 공유한다. -> 핸드폰, 노트북 등에서 빠르게 확인이 가능하다. 이커머스 앱 UI디자인에 프로토타이핑 적용해보기