1. 피그마 플러그인 활용하기 - Moukup : 필요한 목업을 꺼내서 바로 적용가능 - Unsplah : 필요한 사진 적용가능 - Material Symbols : 필요한 아이콘 적용 - Product Planner : 필요한 양식 활용 가능 - Charts : 차트 활용 - Color Palettes : 최적 컬러 매칭 위한 팔레트 기능 2. 원하는 이미지 목업이미지로 보여지게 하는 법 - Prototype에 Device를 내가 원하는 디바이스(ex ipone 13, iPad mini8.3) 선택하여 재생하면 된다. 3. 저장 방법 - File → export to frame 하면 하나로 묶인 PDF로 내보내기 가능. (내가 내보낼 이미지만 새로운 Pasges에 추가하여 내보내기) - share → ..
1. 피그마 프로토타입이란 : 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떠너 화면으로 어떤 인터랙션 스타일(클릭, 드래그, 스크롤)로 이동할 것인지 목업으로 보여주는 것 프레임 상태일 때만 프로토타입 적용할 수 있음. 2. 프로토타입 설정 방법 (Shift + E) 연결 할 개체 클릭 후 Prototype을 선택한다. 프로토타입을 선택하면 연결할 수 있는 플러스 아이콘이 뜬다. 플러스 아이콘을 오른쪽을 당겨서 연결한다. 연결되는 화살표 선을 누르면 네모 상자가 뜬다. 1번 핫스팟 : 인터렉션 시작 부분 2번 커넥션 라인 : 두 요소 사이의 연결선 3번 데스티네이션 : 핫스팟에서 연결한 도착점 요소 1. 트리거 :인터렉션의 시발점 On click : 요소를 클릭했을 때..
1. 유저플로우란 ? 순서도라고 하며, 어떠한 일을 처리하는 과정을 순서대로 간단한 기호와 도형으로 도식화한 것을 의미 사용자와 프로덕트가 어떻게 상호작용하는지 그 과정을 비주얼화 해서 보여주는 것. 직관적인 사용자 흐름을 보여서 불필요한 부분을 정리할 수 있다. 최대한 심플하게 만드는 것이 목표이다. 2. 피그마에서 유저플로우 사용방법 먼저 위 상단 파랑색 버튼을 눌러 flow chart를 검색해서 run을 눌러 주면 창이 뜨게된다. 내가 사용하고 싶은 모양을 눌러서 글자를 입력한다. 도형을 클릭 하면 화살표가 나타난다. 화살표를 눌러 원하는 도형을 바로 추가 할 수 있다. 3. 기타 주의사항 통일성있는 도형을 사용해줘야 한다. ex) 시작부분은 네모, YES와 NO는 마름모