[데이터드리븐 서비스 기획 7일차] Figma

🎥 [홍보영상, 모션그래픽, 인포그래픽] 땡스 APP 서비스 홍보 영상 

 

📍 프로토타입 테스트 📍 피그마기반 모바일 UI 기획 설계  📍 피그마 프로토타이핑 📍 피그마 프로토타이핑[개인 실습] 📍 피그마 프로토타이핑[팀 실습]

 

 

shift+R : ruler 기능, 가로세로 

 

Design 툴바 > Auto Layout : 설정 시, 자동으로 양식 지정돼서 순서 바꿀 때, 방향키로 바꿔도 되고, 새로운 컨텐츠 추가할 때 그냥 아래에 추가하면 간격 유지됨.

간격 줄 수 있음.

 

Alt 누르고 다른 컴포넌트 누르면 간격 알 수 있음. 

 

컴포넌트 따로 빼내서 다른 화면에서도 같이 공유해야 더 좋음.

텍스트 터져나가는거 설정해놓기.

 

개발자한테 png 형태로 주면 그대로 사용, svg 형태면 바꿀 수 있음.

 

Design 툴바 > Effects > Drop Shadow : 보통 그림자 1, 투명도 10 

 

영역 잡아놓고 안에 컴포넌트 넣기

 

프레임 밖에서 인스턴스 만들어서 프레임 안에 넣기.

 

 

1️⃣ 피그마기반 모바일 UI 기획 설계 

---

- 테스트 디바이스를 선정하여 향후 UI 디자인 제작 시 대표가 되는 디바이스 사이즈 선정

- 테스트 디바이스와 피그마와 연동하여 실제로 작동하는 모습 시연

 

1. 서비스별 디바이스 확인

웹, 앱, 태블릿, 버스정류장 디바이스

웹은 무조건 스크롤 함. 앱은 스크롤 안하는 앱도 있음. 배너 항상 있음. 

어떤 기준으로 배치할까를 고민.  -> 디자이너든, 개발자든 좋아함.

 

statcounter.com < 전세계 기준 많이 쓰이는 디바이스 크기 확인할 수 있는 사이트

 

타겟 선정 -> 타겟이 많이 사용하는 디바이스 선정

 

2. 테스트 디바이스에 적합한 프레임 제작

웹이면 피그마 웹에서 Present 버튼 눌러서 확인(option > Fit screen)

앱이면 모바일 앱 다운로드 받아서 프로토타입 테스트하기 

starting point 선택 -> flow 설정 할 수 있음.

 

 

3. 4px 그리드

4의 배수로 간격을 통일시키는 것.

- 이유 : 다양한 배율(0.5x, 1.5x, ....) 에서의 Export할 떄 픽셀 틀어짐 방지

             개발자가 디자인을 구현할 때 일관성 유지 및 오류를 줄일 수 있음.

* Export : Design 툴바 하단에 Export 있음. 1.5x, 0.5x 로 설정해서 깨짐 확인 가능. 

 

- 4px 그리드를 사용하지 않았을 때 문제점

  Export 할 때 픽셀 틀어짐과 소수점이 발생하여 개발자 업무에 지장

  항상 소수점 없어야 함!!

  안되면 2px 그리드라도 사용(보통 현업에서는 4px을 사용하기 어려우니까 2px을 주로 사용한다.)

 

uiadrian : 인스타그램, 프로토타입 정보 공유 多

 

2️⃣ 피그마 프로토타이핑

---

1. 프로토타입이란?

기획한거 테스트 하는 것. 소비자 입장이 어떨지 경험. 우리가 체험하는 것보다 이 서비스의 기획 의도에 대해 암것도 모르는 사람이 테스트하게 하는 것이 더 좋음. 불편한 점이나 개선점 파악하기 편하므로.

 

로우 형태의 프로토타이핑함. 하이 형태는 레퍼런스 참고.

 

시각적으로 아이디어 공유하고 ui를 테스트해보는 것.

 

프로토타이핑을 하는 이유

- 아이디어 시각화

- 피드백 수집

- 개발 지침 수립

- 클라이언트 협의 및 승인

 

여러 단계에서 프로토타이핑을 해야지 개발 상황에서 문제를 만들지 않을 수 있다.

 

2. 프로토타이핑 구조

1. FLOW와 Starting point

 

프로토타이핑을 사용하면 한 페이지에서 프로토타입에 대한 여러 플로우를 생성하여 디자인을 통한 사용자의 전체 여정과 경험 확인 가능

 

다른 기업의 flow를 아는 것도 중요.

 

shift + space : prototype 창 

 

아예 다른 양식으로 이동할 때 smart animate 사용 x. 의미가 없다. 오히려 이상한 의미가 생김. 

-> move in, move out 이용

 

ease in, ease out

custom in, custom out

 

이동 액션

이동 방식

 

3️⃣ 피그마 커뮤니티 & 피그마 헬프센터 & 플러그인

---

피그마 커뮤니티 : 미리 만들어진 목업 가져와서 참고해도 됨

피그마 헬프센터 : 피그마 사용법 등 동영상 or 글 제공

플러그인 : iconify, material design icons(아이콘 벡터화 = 크기 등 변형 가능, 색 변경 가능), unsplash(무료 이미지 제공 사이트, 개체 클릭하고 이미지 클릭하면 개체에 이미지 채워짐)

 

google에 피그마 플러그인 문서화